自己做了一个基于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. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  2. LinuxMysql命令操作数据库

    键入命令mysql -uroot -p密码查看所有表:mysql> show databases;进入表use multidomain_db;删除表:DROP table colour 执行sq ...

  3. Mac Vim + ctags 实现多目录跳转

    set tags=tags; set autochdir :wq保存. 在源码根目录中输入ctags -R命令.后重启vim,打开src文件,就能使用Ctrl+] 或 g Ctrl+] 来实现跳转了. ...

  4. 卷积神经网络_(4)_caffe简介

    这里大致说一下caffe.caffe是伯里克利大学的贾杨清教授写的一个深度学习框架,使用C++编写的,但同时也提供python和matlab接口:组成部分主要有: (1)Blob:用来存储数据和梯度: ...

  5. HttpClient (POST GET PUT)请求

    HttpClient (POST GET PUT)请求 package com.curender.web.server.http; import java.io.IOException; import ...

  6. Redis安装及实现session共享

    一.Redis介绍 1.redis是key-value的存储系统,属于非关系型数据库 2.特点:支持数据持久化,可以让数据在内存中保存到磁盘里(memcached:数据存在内存里,如果服务重启,数据会 ...

  7. 中间件Study-了解什么是中间件

    一.中间件含义:中间价是位于各种平台(硬件和操作系统)和各种应用之间的通用服务. 帮助应用实现高效的.可靠的消息使应用之间实现便捷的互联互通高效.可靠构建企业应用实现分布式应用的快速搭建和部署注:中间 ...

  8. java servlet

    回顾 1三要素是什么? 入口(login.html)     处理(LoginServlet.java)  出口 (success.jsp) 2如何访问servlet http://IP:port/p ...

  9. Android中用TextView显示大量文字的方法

    最近学习Android中,试着实现一个简单的显示新闻Demo的时候,遇到了一个问题:一条新闻的内容文字很多,放在TextView上面超出屏幕了,怎么破? 查了一下资料,找到了两种方法实现: 1. 只用 ...

  10. Microsoft Visual Studio PDB文件相关事宜

    Microsoft Visual Studio PDB:调试的符号文件,程序数据库 (PDB) 文件保存着调试和项目状态信息,使用这些信息可以对程序的调试配置: 当以 /ZI 或 /Zi(用于 C/C ...