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

    基本概念 LCA:树上的最近公共祖先,对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. RMQ:区间最小值查询问题.对于长度为n的 ...

  2. spring参数类型异常输出，SpringMvc参数类型转换错误输出

    spring参数类型异常输出, SpringMvc参数类型转换错误输出 >>>>>>>>>>>>>>>> ...

  3. springMvc中406错误解决，springMvc使用json出现406 (Not Acceptable)

    springMvc中406错误解决, springMvc使用json出现406 (Not Acceptable) >>>>>>>>>>> ...

  4. WisDom.Net 框架设计(七) 验证框架

    WisDom.Net-验证框架 1.分类 这里我们将数据验证分为以下几种 数据类型校验      主要用于确保数据类型输入的正确  比如年龄一项输入 A岁 ,显然不合法 域检查             ...

  5. [GDI+] 生成缩略图的类文件SmallImage (转载)

    直接看代码吧,大家可以直接复制使用 /// <summary> /// 类说明:SmallImage类, /// 编码日期:2012-08-20 /// 编 码 人: 苏飞 /// 联系方 ...

  6. arcgis engine - 添加图例,指北针.

    esri帮助提供了使用比例尺的方法: Working with map surrounds 主要代码为: public void AddMapSurround(IPageLayout pageLayo ...

  7. wp 修改 提高youtu 速度

    resolve = 后添加 |.googlevideo.com ,并修改 crlf_rules crlf_rules = /^https?:\/\/[^\/]+\.c\.youtube\.com\// ...

  8. Ajax结合Js操作灵活操作表格

    Table页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  9. C# 匿名表达式（Lambda表达式）

    匿名表达式 这次来说说Lambda表达式吧,反正也简单,我也不像其他高手那样强调来强调去,只讲一下方法: 准备条件如下: 第一,匿名表达式必须存在与之对应的委托. 只要存在相对应的委托就可以了.接下来 ...

  10. 函数还能这样玩儿～实现类似add(1)(2)(3)的函数

    人生的第一份前端工作找到了,感谢大神主子们给半路出家自学的我这么多的机会,很高兴正式踏上客观又乐趣满满的程序员之路,哇咔咔咔. ​ 分享一个准备面试时遇到的一个有趣的问题: 要求实现类似add(1)( ...