自己做了一个基于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. maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令

    maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令 在日常的工作中由于各种原因,会出现这样一种情况,某些项目并没有打包至mvnrepository. ...

  2. C+继承

    // 继承.cpp : Defines the entry point for the console application.// #include "stdafx.h" str ...

  3. Redis的Python实践，以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》

    首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...

  4. iOS UIButton 设置图片平铺

    UIImage *image2 = [UIImage imageNamed:imgName]; CGFloat top = ; // 顶端盖高度 CGFloat bottom = ; // 底端盖高度 ...

  5. Redis

    1. sds类型 sds为一种抽象数据结构 typedef char *sds;struct sdshdr { // buf 已占用长度int len; // buf 剩余可用长度int free;  ...

  6. win7系统网卡驱动正常，网线连接设备正常，但电脑右下角网络图片显示一直在转圈或者显示一个黄色感叹号的解决办法

    今天遇到一个问题是电脑的win7系统一直都可以连接有线,但今天突然连接不了.在我的电脑右键-->管理--->设备管理器-->网络适配器,里面查看了网络适配器安装正常.但是电脑右下角的 ...

  7. 手把手教你玩转nginx负载均衡（四）--源码安装nginx

    引言: 在上一篇,我们已经装好了虚拟机,并且已经配置好了网络,那么今天我们就要开始安装nginx服务器了. 安装工具以及过程 安装gcc编译套件以及nginx依赖模块 yum -y install g ...

  8. design包 TabLayout使用

    类似"网易新闻"UI设计就很好,顶部是导航,下面是各个页面.如图 这种效果使用design包中的TabLayout可以轻松的实现.   一.分析TabLayout 常见 UI 上图 ...

  9. LeetCode 206 Reverse a singly linked list.

    Reverse a singly linked list. Hint: A linked list can be reversed either iteratively or recursively. ...

  10. Google Analytics 链接点击次数记录

    <span> <a href="http://protect-your-family.hansaplast.com.my/upload/<?php echo $fil ...