在网页制作中我们常常需要折叠式的菜单，在折叠菜单中，手风琴特效的菜单是非常受欢迎，下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法。

jQuery实现垂直手风琴折叠菜单示例代码

首先给出手风琴折叠菜单的HTML代码，如下所示：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3垂直手风琴折叠菜单DEMO演示</title>

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

    <!-- Iconos -->

    <link href="css/font-awesome.min.css" rel="stylesheet">

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

</head>

<body>

    <!-- Contenedor -->

    <ul id="accordion" class="accordion">

        <li>

            <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>

            <ul class="submenu">

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

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

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

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

            </ul>

        </li>

        <li>

            <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>

            <ul class="submenu">

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

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

                <li><a href="#">Frameworks javascript</a></li>

            </ul>

        </li>

        <li>

            <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>

            <ul class="submenu">

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

                <li><a href="#">Dispositivos mobiles</a></li>

                <li><a href="#">Medios de escritorio</a></li>

                <li><a href="#">Otros dispositivos</a></li>

            </ul>

        </li>

        <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>

            <ul class="submenu">

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

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

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

                <li><a href="#">Otros buscadores</a></li>

            </ul>

        </li>

    </ul>

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

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

</body>

</html>

如上面的代码，首先需要引入font-awesome.min.css，这是awesome的字体库。然后需要引入自定义的css，style.css代码如下面所示：

* {

    margin: ;

    padding: ;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

body {

    background: #2d2c41;

    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;

}

ul {

    list-style-type: none;

}

a {

    color: #b63b4d;

    text-decoration: none;

}

/** =======================

 * Contenedor Principal

 ===========================*/

h1 {

     color: #FFF;

     font-size: 24px;

     font-weight: ;

     text-align: center;

     margin-top: 80px;

 }

h1 a {

     color: #c12c42;

     font-size: 16px;

 }

 .accordion {

     width: %;

     max-width: 360px;

     margin: 30px auto 20px;

     background: #FFF;

     -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

     border-radius: 4px;

 }

.accordion .link {

    cursor: pointer;

    display: block;

    padding: 15px 15px 15px 42px;

    color: #4D4D4D;

    font-size: 14px;

    font-weight: ;

    border-bottom: 1px solid #CCC;

    position: relative;

    -webkit-transition: all .4s ease;

    -o-transition: all .4s ease;

    transition: all .4s ease;

}

.accordion li:last-child .link {

    border-bottom: ;

}

.accordion li i {

    position: absolute;

    top: 16px;

    left: 12px;

    font-size: 18px;

    color: #;

    -webkit-transition: all .4s ease;

    -o-transition: all .4s ease;

    transition: all .4s ease;

}

.accordion li i.fa-chevron-down {

    right: 12px;

    left: auto;

    font-size: 16px;

}

.accordion li.open .link {

    color: #b63b4d;

}

.accordion li.open i {

    color: #b63b4d;

}

.accordion li.open i.fa-chevron-down {

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    transform: rotate(180deg);

}

/**

 * Submenu

 -----------------------------*/

 .submenu {

     display: none;

     background: #;

     font-size: 14px;

 }

 .submenu li {

     border-bottom: 1px solid #4b4a5e;

 }

 .submenu a {

     display: block;

     text-decoration: none;

     color: #d9d9d9;

     padding: 12px;

     padding-left: 42px;

     -webkit-transition: all .25s ease;

     -o-transition: all .25s ease;

     transition: all .25s ease;

 }

 .submenu a:hover {

     background: #b63b4d;

     color: #FFF;

 }

使用jQuery&HTML&CSS3实现垂直手风琴折叠菜单就必须使用jQuery，所以一定要引入jQuery库。然后配合自定义的js，index.js代码如下所示：

$(function() {

    var Accordion = function(el, multiple) {

        this.el = el || {};

        this.multiple = multiple || false;

        // Variables privadas

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

        // Evento

        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();

        $next.slideToggle();

        $this.parent().toggleClass('open');

        if (!e.data.multiple) {

            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');

        };

    }    

    var accordion = new Accordion($('#accordion'), false);

});

这样我们可以看到下面的图片效果：

jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解的更多相关文章

  1. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  2. 炫酷实用的CSS3代码垂直手风琴菜单

    今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...

  3. bootstrap-简单实用的垂直手风琴滑动菜单列表特效

    前端: <html lang="zh"> <head> <meta charset="UTF-8"> <meta ht ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery和css3实现的很酷的菜单导航

    今天为大家带来的是jquery和css3实现的不错的导航菜单.点击列表图表后,内容页面向内移动显示菜单项.当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位.看下图 在线预览   源码下载 我们看下实现 ...

  6. 基于jQuery制作的手风琴折叠菜单

    初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...

  7. jQuery简单竖排手风琴折叠菜单代码

    项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...

  8. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  9. CSS3 3D下拉折叠菜单

    在线演示 本地下载

随机推荐

  1. java定义类 对象，引用，指针

    java是根据面向对象编程,因此有类和对象的概念,类分为普通类与抽象类. 一.定义类 类由N个 构造器  成员变量  方法组成,可以不定义,也可以根据语法定义N个. [修饰符] class 类名{ 构 ...

  2. Android开发之ContentProvider（内容提供者）

    1. ContentProvider简介 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据,但数据访问 ...

  3. Android（java）学习笔记185：xml文件生成

    1.xml文件: 用元素描述数据,跨平台. 2.利用传统的方式创建xml文件,下面是一个案例: 设计思路:建立一个学生管理系统,创建xml文件保存学生信息: (1)首先是布局文件activity_ma ...

  4. 关于Android NDK

    把解压后的ndk放在自己想放的位置 环境变量:ndk根目录添加到PATH=$PATH:<ndk-root-path> 使用NDK:在自己工作目录(可以是随意位置)下创建<Test&g ...

  5. 卸载AMH 5.0面板的具体办法

    安装AMH 5.0面板只有YES.NO和EXIT,和AMH 4.X的安装.卸载.退出有点不同,那么如何卸载AMH 5.0面板呢? 1.root登录ssh 2.输入如下命令: killall php-f ...

  6. KALI ssh无法登陆的解决办法

    应该是sshd的设置不允许root用户用密码远程登录 修改 vim /etc/ssh/sshd_config 找到# Authentication:LoginGraceTime 120PermitRo ...

  7. （转）Spring 读书笔记-----使用Spring容器（一）

    Spring有两个核心接口:BeanFactory和ApplicationContext,其中ApplicationContext是BeanFactory的子接口.他们都可代表Spring容器,Spr ...

  8. ubuntu出现有线已连接却无法上网

    或者直接追加到/etc/sysctl.conf 如果遇到“设备未托管”,一般是台式机默认移动ip后禁用网络. 那么修改/etc/NetworkManager/NetworkManager.conf,设 ...

  9. Using native GDI for text rendering in C#

    Using native GDI for text rendering in C# Aug12by Arthur To complete my previous post on text render ...

  10. MYSQL使用指南(下)

    在上篇我们讲了登录.增加用户.密码更改等问题.下篇我们来看看MySQL中有关数据库方面的操作.注意:你必须首先登录到MYSQL中,以下操作都是在MYSQL的提示符下进行的,而且每个命令以分号结束. 一 ...