简单的下拉菜单、左部导航使用。

2016-5-13 记

效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉列表</title>

    <style type="text/css">

     *{

         margin: 0;

         padding: 0;

     }

     .wrap{

         margin-left: 100px;

         margin-top: 50px;

         width: 120px;

     }

     .caktye_list{

         border: 1px solid #eee;

     }

     .caktye_list li{

         list-style: none;

     }

     .caktye_list li a{

         width: 120px;

        display: block;

        height: 32px;

        line-height: 32px;

        text-decoration: none;

        color: #333;

        /*text-align: center;*/

        border-top: 1px solid #eee;

     }

     .caktye_list li:first-child a{

        border-top: none;

     }

     .cak{

         display: none;

     }

     .cak li a{

        width: 120px;

        border-top: 1px solid #FFF;

        background-color: #FDECF9;

     }

     .cak li a:hover{

       background-color: #eee;

     }

     .cak li:first-child a{

         border-top: none;

     }

    </style>

</head>

<body>

    <div class="wrap">

        <ul class="caktye_list">

            <li>

                <a href="###">JavaScript</a>

                <ul class="cak">

                    <li><a href="###">语法</a></li>

                    <li><a href="###">语句</a></li>

                    <li><a href="###">函数</a></li>

                </ul>

            </li>

            <li>

                <a href="###">Jquery</a>

                <ul class="cak">

                    <li><a href="###">语法</a></li>

                    <li><a href="###">语句</a></li>

                    <li><a href="###">函数</a></li>

                </ul>

            </li>

            <li>

                <a href="###">Angular</a>

                <ul class="cak">

                    <li><a href="###">语法</a></li>

                    <li><a href="###">语句</a></li>

                    <li><a href="###">函数</a></li>

                </ul>

            </li>

        </ul>

    </div>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>

    <script type="text/javascript">

       $(function(){

            $(".caktye_list li a").click(function(){

                 $(this).siblings("ul").slideToggle("fast");

                 $(this).siblings("ul").children("ul").slideUp("fast");

                 if($(this).siblings("ul").css("display")== "block"){

                   $(this).parents("li").siblings('li').children('ul').slideUp("fast");

                 }

            })

       })

    </script>

</body>

</html>

需导入jQuery的js文件

Jquery、简单的下拉列表、网页左部导航菜单的更多相关文章

  1. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  2. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  3. jquery——简单的下拉列表制作及bind()方法的示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Jquery学习笔记（8）--京东导航菜单（2）增加弹框

    京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: <!DOCTYPE html> <html lan ...

  5. Jquery学习笔记（7）--京东导航菜单

    主要是几个模块的浮动和定位不好处理,另外还缺少右侧导航,及幻灯片. <!DOCTYPE html> <html lang="en"> <head> ...

  6. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  7. jQuery 简单漂亮的 Nav 导航菜单

    自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一 ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

随机推荐

  1. Splinter学习——不仅仅是自动化测试哦

    前两天,想抢购一个小米MIX,结果,一开始抢就没有了.于是想,作为程序猿,总得有点特殊手段吧,比如说一个小脚本.最近在学习python,百度了一下,发现了Splinter这个强大的东东!用了不到两小时 ...

  2. iOS之小门道道

    1.代理方法不执行 很多时候在你代理方法不执行时,小样,你看看你设置代理了吗?

  3. php 导出excle的.csv格式的数据时乱码问题

    1.header('Content-Encoding: XXXX'); 有可能是编码问题:可以尝试UTF-8,GBK,GB2312,等编码格式 2.有可能是文件编码问题,虽然UTF-8不建议带BOM, ...

  4. python map()

    map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明,比如我们有一个函数f(x)=x%2,要把这个函数作用在一个li ...

  5. Delphi多线程的OnTerminate属性（附加一个关于临界区线程同步的例子）

    首先看TThread源码中关于OnTerminate的代码: public .... property OnTerminate: TNotifyEvent read FOnTerminate writ ...

  6. 五分钟搭建起一个包含CRUD功能的JqGrid表格

    之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...

  7. [译]：Xamarin.Android开发入门——Hello,Android快速上手

    返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...

  8. Python-面向对象（类）二

    一.成员修饰符 • 共有成员 • 私有成员 __+字段 __:成员修饰符 无法直接访问,只能通过该成员所属类的方法简介访问 class Foo: def __init__(self, name, ag ...

  9. Asp.Net中使用OpenRowSet操作Excel表，导入Sql Server(实例)

    有两种接口可供选择:Microsoft.Jet.OLEDB.4.0(以下简称 Jet 引擎)和Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎). Jet 引擎大家都很熟悉,可 ...

  10. System中记录体函数命名怪异

    //1019unit System; 中发现记录体函数命名怪异//乍一看,很怪异,其实是结构体里面 的变量后面直接写 函数类型了.不像传统先定义T***Event      = procedure(S ...