在网页制作中我们常常需要折叠式的菜单，在折叠菜单中，手风琴特效的菜单是非常受欢迎，下面就讲解使用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. CocoaPods 原理分享及遇到的问题改进

    cocoapods 原理分享及问题阐述 cocoapods 管理私有工程,需要两个git 仓库, repo 仓库,保存podspec 文件,告诉我们项目从哪来, 项目 仓库,保存工程文件,告诉我们引用 ...

  2. PS之放射背景

    效果图 素材 新建图层,填充颜色 新建图层,矩形工具画条形 滤镜-扭曲-极坐标 合并图层,效果如下 新建图层,画一个适当的圆 滤镜-模糊-高斯模糊 将素材人物抠出来放在中间

  3. ubuntu14.04使用wubi安装出错

    使用wubi安装后,进入系统是总是提示/分区加载异常,无法正常进入系统. 参考解决方案来自 http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6 ...

  4. 跟着老男孩一步步学习Shell高级编程实战

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51cto.com/2561410/1264627 本sh ...

  5. while loading persisted sessions 异常解决方法

    一直用tomcat一段时间都正常无事,最近一次启动tomcat就发生以下异常: 严重: IOException while loading persisted sessions: java.io.EO ...

  6. 工具: ass109.awk 分析 Oracle 的跟踪文件

    原文链接:http://www.eygle.com/archives/2009/11/awk_ass109.html 以前分析Oracle的跟踪文件,主要靠手工阅读,最近发现ass109.awk文件是 ...

  7. 修改PYTHONPATH的一种方法（在Window平台和Ubuntu下都有效）

    1.显示PYTHONPATH 2.修改PYTHONPATH 通过PYTHONPATH 中的任何 .pth 文件来添加pythonpath.比如我想添加/home/aa这个路径到pythonpath里, ...

  8. border-radius的浏览器兼容

    早期开发时,圆角的实现对于开发者来说是一个头疼的事情,因为需要添加多种图片以及定位去实现固定.缺乏灵活性的圆角容器,故css3中引入了border-radius属性,使得开发者实现圆角变得轻而易举! ...

  9. SVM对偶形式

    dual svm 对偶SVM linear SVM 可以用二次规划方法解 xn通过非线性转换变成zn SVM配合非线性特征转换 透过large-margin降低模型复杂度 透过特征转换得到弯弯曲曲的边 ...

  10. 简单的GDI+双缓冲的分析与实现

    为什么要使用双缓冲绘制 在进行多图元绘制的时候: 因为是要一个一个画上去,所以每画一个图元,系统就要做一次图形的绘制操作,图形的重绘是很占用资源的,特别当需要重绘的图形数量很多的时候,所造成的消耗就特 ...