自己做了一个基于Jquery 的垂直下拉二级菜单功能，直接看图：

　　

Html的代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>垂直下拉菜单</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>Accordion

<div style="text-align:center;clear:both">

</div>

    <!-- Contenedor -->

    <div id="page-sidebar-menu" class="page-sidebar-menu">

        <p class="tab-link"><a class="left-a" href="javascript:void(0)" title="系统日志">系统日志1</a></p>

            <ul class="submenu">

                <li><a href="#">Photoshop1</a></li>

                <li><a href="#">HTML1</a></li>

                <li><a href="#">CSS1</a></li>

                <li><a href="#">Maquetacion web1</a></li>

            </ul>

        <p class="tab-link"><a class="left-a" href="javascript:void(0)" title="系统日志">系统日志2</a></p>

        <p class="tab-link"><a class="left-a" href="javascript:void(0)" title="实盘监控">实盘监控3</a></p>

            <ul class="submenu">

                <li><a href="#">Photoshop3</a></li>

                <li><a href="#">HTML3</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">Maquetacion web3</a></li>

            </ul>

        <p class="tab-link"><a class="left-a" href="javascript:void(0)" title="实盘监控">实盘监控4</a></p>

            <ul class="submenu">

                <li><a href="#">Photoshop4</a></li>

                <li><a href="#">HTML4</a></li>

                <li><a href="#">CSS4</a></li>

                <li><a href="#">Maquetacion web4</a></li>

            </ul>

        <p class="tab-link"><a class="left-a" href="javascript:void(0)" title="实盘监控">实盘监控5</a></p>

            <ul class="submenu">

                <li><a href="#">Photoshop5</a></li>

                <li><a href="#">HTML5</a></li>

                <li><a href="#">CSS5</a></li>

                <li><a href="#">Maquetacion web5</a></li>

            </ul>

    </div>

  <script src='js/jquery-1.10.2.js'></script>

  <script src="js/index.js"></script>

</body>

</html>
$(function() {

    var Accordion = function(el, multiple) {

        this.el = el || {};

        this.multiple = multiple || false;

        var links = this.el.find('.tab-link');

        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)

    }

    Accordion.prototype.dropdown = function(e) {

        var $el = e.data.el;

            $this = $(this),

            $next = $this.next();

            if($next.find('li').length ==0){

                return false;

            }

            $next.slideToggle();

            $next.find('li').click(function() {

                $(this).addClass('activeLi').siblings().removeClass('activeLi');

            });

            $this.toggleClass('open');

            if (!e.data.multiple) {

                var oth =$el.find('.submenu').not($next);

                    oth.slideUp().parent().removeClass('open');

                    oth.find('li').removeClass('activeLi');

            };

    }    

    var accordion = new Accordion($('#page-sidebar-menu'), false);

});

CSS代码：

　

 div,p,ul,li{

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

    ul li{

        list-style-type: none;

    }

 .page-sidebar-menu .left-a {

        display: block;

        font-size:12px;

        color:#03478b;

        text-decoration: none;

        -webkit-transition: all 0.4s ease;

        -o-transition: all 0.4s ease;

        transition: all 0.4s ease;

    }

    .page-sidebar-menu li.active {

        background: #bbbbbb;

    }

    .tab-link{

        padding:5px;

        margin:2px 0;

        background-color:#E4EFFB;

    }

    p.active {

        background: #5A86A8;

    }

    .page-sidebar-menu p.active a {

        color:#fff;

    }

    .submenu {

        display: none;

        background: #444359;

        font-size: 14px;

    }

    .submenu li {

        border-bottom: 1px solid #4b4a5e;

    }

    .submenu a {

        display: block;

        text-decoration: none;

        color: #d9d9d9;

        font-size: 12px;

        padding: 5px;

        -webkit-transition: all 0.25s ease;

        -o-transition: all 0.25s ease;

        transition: all 0.25s ease;

    }

    .submenu a:hover {

        background: #E4EFFB;

        color: #000;

    }

由于时间匆忙，接直接贴代码，凑活着看

Jquery垂直下拉二级菜单的更多相关文章

  1. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  2. DEDECMS v5.7 完美实现导航条下拉二级菜单

    一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...

  3. Javascript实现简单的下拉二级菜单

    在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...

  4. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  5. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

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

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

  7. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

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

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

  9. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

随机推荐

  1. Ubuntu16.04安装Screenlets

    通过添加软件源的方式安装装 sudo add-apt-repository ppa:screenlets/ppa sudo apt-get update sudo apt-get install sc ...

  2. Sublime3和Chrome配置自动刷新网页【实测可用】

    SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法.win7下实测可用! 安装成功后,就不需要再手 ...

  3. php二进制安全的含义

    PHP里,有string的概念.string里,每个字符的大小为byte(与PHP相比,Java的每个字符为Character,是UTF8字符,C语言的每个字符可以在编译时选择). byte里,有AS ...

  4. ng-repeat

    <html ng-app="compile"> <head> <script src="http://apps.bdimg.com/libs ...

  5. linux下用c实现ls命令

    struct dirent中的几个成员: d_type:4表示为目录,8表示为文件 d_reclen:16表示子目录或文件,24表示非子目录 d_name:目录或文件的名称 #include < ...

  6. sh3.useradd 添加用户脚本

    1.写一个脚本: 添加10个用户user1到user10,密码同用户名,但要求只有用户不存在的情况下才能添加 #/bin/bash # ..};do if id user$i &> /d ...

  7. 用 javassist 来修改 class 文件

    import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; public class Test { ...

  8. C#设计模式之建造者模式

    建造者模式可以将部件本身和它们的组装过程分开,关注如何一步步创建一个包含多个组成部分的复杂对象,用户只需要指定复杂对象的类型即可得到该对象,而无须知道其内部的具体构造细节. 建造者模式:将一个复杂对象 ...

  9. Linux安装卸载Mysql数据库

    关于mysql数据库在Linux下的应用一直以来都是我认为比较棘手的,这次通过搭建Linux学习环境顺便研究和学习Mysql数据库在Linux下安装和卸载. 1.先来看看卸载吧,如下图所示: 以上的命 ...

  10. Blender 之 Splash 代码分析

    注:以下内容基于 Blender 2.7x 版本工程,其它低版本可能有改动. Blender启动完成时,会出现一个画面,英文叫Splash.默认是打开的,可以在设置里关闭.在文件菜单里点击用户首选项( ...