自己做了一个基于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. EndNote(一)之基本介绍

    作为一个经常看文献的人,发现看了很多文献,但是之后需要再找某一篇文献的时候,却无法找到文献在哪里了.混乱的文献管理方式,浪费了很多时间在翻阅自己已经看过的文献之中.这是一件很头痛的事情,才想起借助软件 ...

  2. Qt 程序打包发布

    Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,Qt 官方开发环境里自带了一个工具:windeployqt.exe.在Qt安装目录如:C:\Qt\Qt5.7. ...

  3. Reason: image not found

    刚生的Xcode8,出现好多Error,有些Error真的太麻烦不想记录,现在这个挺简单的,就记下来,控制台输出的Error信息如下: fix: Target -> Build Phases - ...

  4. 你不知道的Spring配置文件

    Spring配置文件是用于指导Spring工厂进行Bean生产.依赖关系注入(装配)及Bean实例分发的"图纸".Java EE程序员必须学会并灵活应用这份"图纸&quo ...

  5. javascript 核心语言笔记 5 - 语句

    表达式在 JavaScript 中是短语(phrases),那么语句(statements)就是 JavaScript 整句或命令,语句以分号结束.表达式计算出一个值,语句用来执行以使某件事情发生 表 ...

  6. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  7. [项目]WebService涉及到的部分核心代码

     前言: 博客园似乎不太喜欢设计模式的东西,一连写了几篇设计模式的东西,都没什么人气,也许是写的水平有些不够,另外设计模式属于内功,怎们都得修炼一下,否则,设计混乱,不成体系,对于大型项目来说,就会显 ...

  8. 感知机(perceptron)概念与实现

    感知机(perceptron) 模型: 简答的说由输入空间(特征空间)到输出空间的如下函数: \[f(x)=sign(w\cdot x+b)\] 称为感知机,其中,\(w\)和\(b\)表示的是感知机 ...

  9. js倒计时

    /** * 启动,秒杀倒计时 * totalSecond:剩余秒数 * showTime(tm):回调函数,其中tm={day:"",hour:"",min:& ...

  10. CozyRSS开发记录17-Html2Xaml

    CozyRSS开发记录17-Html2Xaml 1.RssContentView还需要优化 上回做了RssContentView的显示,但是对于rss返回的描述(摘要),连换行的没有,更别说里面还有h ...