在网页制作中我们常常需要折叠式的菜单，在折叠菜单中，手风琴特效的菜单是非常受欢迎，下面就讲解使用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 字节流与字符流的区别 （转）

    字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用了缓冲区,通过缓冲区再操 ...

  2. java实现的可以无限级别添加子节点的菜单树

    网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...

  3. JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息

    今天项目中所解决的问题:JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息,一开始总是获取不到 radio 的值,后来发现逻辑存在些问题,特此共享该代码留笔记 和 分享给遇到 这类问题的 ...

  4. UML图基本类型

    use case model用例模型 analysiss model分析模型 design model设计模型 implementation model实现模型 deployment model部署模 ...

  5. latch: cache buffers chains故障处理总结

    一大早就接到开发商的电话,说数据库的CPU使用率为100%,应用相应迟缓.急匆匆的赶到现场发现进行了基本的检查后发现是latch: cache buffers chains 作祟,处理过程还算顺利,当 ...

  6. mac下安装配置nginx环境

    本文介绍 nginx 在mac上的安装. 我是通过brewhome 来安装的. brew install nginx 一路顺畅. 下面是安装信息. 复制代码 代码如下: hematoMacBook-P ...

  7. 237. Delete Node in a Linked List（C++）

    237. Delete Node in a Linked Lis t Write a function to delete a node (except the tail) in a singly l ...

  8. Windows phone 之XML序列化与反序列化

    为什么要做序列化和反序列化? 一个回答: 我们都知道对象是不能在网络中直接传输的,不过还有补救的办法.XML(Extensible Markup Language)可扩展标记语言,本身就被设计用来存储 ...

  9. php session 自定义的设置测试

    <?php // ini_set('session.save_handler', 'user'); // 注意 set_session_save_handler() 一定要在 session_s ...

  10. Java 不定长度参数

    在调用某个方法时,若是方法的参数个数事先无法确定该如何处理?例如System.out.printf()方法中并没有办法事先决定要给的参数个数,像是: ? 1 2 3 System.out.printf ...