在网页制作中我们常常需要折叠式的菜单，在折叠菜单中，手风琴特效的菜单是非常受欢迎，下面就讲解使用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. HDU2084JAVA

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  2. 高效 jquery 的奥秘

    当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $( ...

  3. 什么是JavaScript？

  4. 网页版 treeview使用中遇到的问题

    <div class="ScrollBar" id="ItemsTree"></div> var cla = $("#Item ...

  5. IIS 上发布ASP.NET5

    原文 http://docs.asp.net/en/latest/publishing/iis.html 1.安装HTTP Platform Handler ,这个是必需的,不然无法通过IIS访问AS ...

  6. file的name值

    在picturelibrary中取一张jpg文件, 其Name值为  "NoThumbnail.jpg",注意后面的.jpg             foreach (SPFile ...

  7. Socket服务器整体架构概述

    转载:http://www.cnblogs.com/tianzhiliang/archive/2010/10/28/1863684.html Socket服务器主要用于提供高效.稳定的数据处理.消息转 ...

  8. c语言学习之基础知识点介绍（十）：内存空间模型、地址解释及指针变量

    一.内存 /* 内存: 存在内存里的. 内存分了N多个小空间,每个小空间1个字节 每个小空间有它自己的地址.每个地址之间差1 int类型占用4个字节,等于占了4个空间(有4个地址),不需要记住4个地址 ...

  9. while循环的跳出

    今天在编码时突然产生一个疑问:程序中有一个while循环,循环体执行的是某个附带条件限制的操作.我现在想达到的目的是 => 条件成立,就执行操作,并跳出循环:条件不成立就跳出当次的while循环 ...

  10. 连接远程LINUX服务器

    远程登陆linux服务器需要下载一个软件,非常好用,名字是SecureCRT5,百度搜索有很多,如果下载不到可以联系我   运行安装包,一路下一步就可以了   安装好后,运行该软件   点击左上角第二 ...