自己做了一个基于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. js对Cookie的读写操作

    //读Cookie function getCookie(objName) {//获取指定名称的cookie的值 var arrStr = document.cookie.split("; ...

  2. .NetChajian

    Code generation(代码自动生成) NVelocity CodeSmith X-Code .NET XGoF - NMatrix / DEVerest Compilation(编译工具) ...

  3. git 修改注释信息

    1. push 之前 先看看自己提交过多少次,然后执行 git rebase -i HEAD~数字(你要修改你的第几次提交) 接下来执行,修改注释 git commit --amend 修改完注释之后 ...

  4. sqlserver添加主键

    sqlServer中给表添加主键的sql: alter table market_media_medical_history alter column pk_id bigint not null; a ...

  5. [Android Pro] Scroller使用分析

    reference to : http://blog.csdn.net/a910626/article/details/51548840 一.Scroller是什么? Android里 Scrolle ...

  6. java 文件按行读写

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  7. squid 2.7 配置与安装

    1.准备安装包 2.准备编译环境 yum -y install gcc 3.编译安装squid ./configure \--prefix=/data/squid \--disable-interna ...

  8. **crontab的使用方式介绍和no crontab for root 提示的处理

    crontab的使用方式介绍   定时任务参数详解如下:  crontab -l     |  crontab -e    www.2cto.com   #*/30 * * * * ntpdate 1 ...

  9. 给numpy矩阵添加一列

    问题的定义: 首先我们有一个数据是一个mn的numpy矩阵现在我们希望能够进行给他加上一列变成一个m(n+1)的矩阵 import numpy as np a = np.array([[1,2,3], ...

  10. MySQL数据库1067 问题

    1.MySql1067错误解决方法 http://blog.csdn.net/mhmyqn/article/details/17043921   MySql 1045解决方法 my.ini  mysq ...