前端：

  1. <html lang="zh">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>简单实用的垂直手风琴滑动菜单列表特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
  7.     <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  8.     <link rel="stylesheet" type="text/css" href="css/default.css">
  9.     <link rel="stylesheet" href="css/style.css">
  10.     <!--[if IE]>
  11.         <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  12.     <![endif]-->
  13. </head>
  14. <body>
  15.     <article class="htmleaf-container">
  16.         <header class="htmleaf-header">
  17.             <h1>简单实用的垂直手风琴滑动菜单列表特效 <span>Simple Menu with toggle slide animation using jQuery and CSS</span></h1>
  18.             <div class="htmleaf-links">
  19.                 <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
  20.                 <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201509192591.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  21.             </div>
  22.         </header>
  23.         <div class="htmleaf-content">
  24.             <ul class="mainmenu">
  25.                 <li><img src="data:images/user.png" alt="User icon" class="icon"><span>Account</span></li>
  26.                 <ul class="submenu">
  27.                     <div class="expand-triangle"></div>
  28.                     <li><span>Basics</span></li>
  29.                     <li><span>Picture</span></li>
  30.                     <li><span>Go Premium</span></li>
  31.                 </ul>
  32.                 <li>
  33.                     <img src="data:images/envelope.png" alt="Envelope icon" class="icon"><span>Messages</span><div class="messages">23</div>
  34.                 </li>
  35.                 <ul class="submenu">
  36.                     <div class="expand-triangle"></div>
  37.                     <li><span>New</span></li>
  38.                     <li><span>Sent</span></li>
  39.                     <li><span>Trash</span></li>
  40.                 </ul>
  41.                 <li><img src="data:images/cog.png" alt="Cog icon" class="icon"><span>Settings</span></li>
  42.                 <ul class="submenu">
  43.                     <div class="expand-triangle"></div>
  44.                     <li><span>Language</span></li>
  45.                     <li><span>Password</span></li>
  46.                     <li><span>Notifications</span></li>
  47.                     <li><span>Privacy</span></li>
  48.                     <li><span>Payments</span></li>
  49.                 </ul>
  50.                 <li><img src="data:images/key.png" alt="Key icon" class="icon"><span>Logout</span></li>
  51.             </ul>
  52.         </div>
  53.     </article>
  54.  
  55.     <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  56.     <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
  57.     <script src="js/script.js"></script>
  58. </body>
  59. </html>

script.js代码：

  1. $(document).ready(function () {
  2.     var $submenu = $('.submenu');//<ul class="submenu">
  3.     var $mainmenu = $('.mainmenu');//<ul class="mainmenu">
  4.     $submenu.hide();//所有的都不伸展
  5.     /*
  6.     delay()对被选元素的所有排队函数（仍未运行）设置延迟
  7.     slideDown() 方法以滑动方式显示被选元素。
  8.     注意：slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
  9.     提示：如需以滑动方式隐藏元素，请查看 slideUp() 方法。
  10.     */
  11.     $submenu.first().delay(400).slideDown(700);
  12.     //点击Basics、Picture等左侧变颜色
  13.     $submenu.on('click', 'li', function () {
  14.         /*
  15.         siblings() 方法返回被选元素的所有同级元素。
  16.         同级元素是共享相同父元素的元素。
  17.         */
  18.         $submenu.siblings().find('li').removeClass('chosen');
  19.         $(this).addClass('chosen');
  20.     });
  21.     //点击Account、Messages等展开子元素
  22.     /*
  23.     next() 方法返回被选元素的后一个同级元素。
  24.     同级元素是共享相同父元素的元素。注意：该方法只返回一个元素。
  25.  
  26.     slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
  27.     该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。
  28.  
  29.     slideUp() 方法以滑动方式隐藏被选元素。
  30.     注意：隐藏的元素不会被完全显示（不再影响页面的布局）。
  31.     */
  32.     $mainmenu.on('click', 'li', function () {
  33.         $(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
  34.     });
  35.     $mainmenu.children('li:last-child').on('click', function () {
  36.         //$mainmenu.fadeOut().delay(500).fadeIn();
  37.     });
  38. });

部分css代码：

  1. /*------------ Color Palette ------------*/
  2. /*
  3. LIGHT ORANGE: #e4644b
  4. DARK ORANGE: #d05942
  5. DARK BROWN: #484141
  6. Menu text: #f7f1e3
  7. Submenu text: #ae9f9f
  8. */
  9.  
  10. /*------------ General Settings ------------*/
  11. /*@import url(https://fonts.useso.com/css?family=Montserrat);*/
  12.  
  13. body {
  14.     margin: 0;
  15.     padding: 0;
  16.     font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  17.     background: url("../images/bg.jpg") top center no-repeat;
  18.     letter-spacing: 0.2px;
  19. }
  20.  
  21. ul {
  22.     list-style: none;
  23.     width: 276px;
  24. }
  25.  
  26. li {
  27.     cursor: pointer;
  28. }
  29.  
  30. /*------------ Main Menu ------------*/
  31. .container {
  32.     background-color: black;
  33. }
  34.  
  35. /*------------ Main Menu ------------*/
  36. .mainmenu {
  37.     margin: 90px auto;
  38.     font-size: 16px;
  39.     position: relative;
  40.     padding: 0;
  41. }
  42.  
  43.     .mainmenu > li {
  44.         background-color: #e4644b;
  45.         border-top: 1px solid #d05942;
  46.         height: 48px;
  47.         color: #f7f1e3;
  48.         box-sizing: border-box;
  49.     }
  50.  
  51.         .mainmenu > li:first-child {
  52.             border-radius: 7px 7px 0 0;
  53.             border-top: 0;
  54.         }
  55.  
  56.         .mainmenu > li:last-child {
  57.             border-radius: 0 0 7px 7px;
  58.         }
  59.  
  60.         .mainmenu > li span {
  61.             display: block;
  62.             line-height: 48px;
  63.         }
  64.  
  65.         .mainmenu > li .icon {
  66.             padding: 14px 20px 0 20px;
  67.             float: left;
  68.             width: 20px;
  69.             height: 20px;
  70.             display: block;
  71.         }
  72.  
  73.         .mainmenu > li .messages {
  74.             background: url("../images/messages.png") no-repeat;
  75.             padding: 0;
  76.             margin-top: -33px;
  77.             margin-right: 19px;
  78.             float: right;
  79.             display: block;
  80.             width: 34px;
  81.             height: 18px;
  82.             text-align: center;
  83.             font-size: 11px;
  84.             line-height: 19px;
  85.         }
  86.  
  87. .expand-triangle {
  88.     background: url("../images/expand.gif") top left no-repeat;
  89.     height: 10px;
  90.     width: 276px;
  91.     content: " ";
  92.     margin-left: -40px;
  93. }
  94.  
  95. /*------------ Sub Menu ------------*/
  96. .submenu {
  97.     box-sizing: border-box;
  98.     color: #ae9f9f;
  99.     font-size: 13px;
  100.     content: " ";
  101.     /*opacity: 0.5;*/
  102. }
  103.  
  104.     .submenu li {
  105.         line-height: 20px;
  106.         height: 35px;
  107.         padding-top: 11px;
  108.         margin-left: -40px;
  109.         background-color: #484141;
  110.         border-left: solid 6px #484141;
  111.         transition: border-left 220ms ease-in;
  112.     }
  113.  
  114.     .submenu .chosen,
  115.     .submenu .chosen:hover {
  116.         border-left: solid 6px #96d145;
  117.     }
  118.  
  119.     .submenu li:hover {
  120.         border-left: solid 6px #d05942;
  121.     }
  122.  
  123.     .submenu li span {
  124.         margin-left: 30px;
  125.     }
  126.  
  127. .animate {
  128.     animation: flip 2000ms ease-in-out alternate;
  129. }
  130.  
  131. @keyframes flip {
  132.     to {
  133.         transform: rotateY(360deg);
  134.     }
  135. }

效果：

引用的demo地址：

http://www.htmleaf.com/Demo/201509192592.html

bootstrap-简单实用的垂直手风琴滑动菜单列表特效的更多相关文章

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

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

  2. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  3. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

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

  4. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  5. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  6. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  7. android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu

    示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这里我简单说明一下用自定义ViewGroup来实现. 实现方法:我们自定义一个ViewGroup实现左右滑动, ...

  8. android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]

    http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...

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

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

随机推荐

  1. Some warning were found during validation

    前几天做一个iOS下的App更新,到上传的时候出了问题,一直传了大半个小时,结果还是没传完,再试依然不行,于是只好关机,把电脑带回家弄. 回家后出现了更奇怪的事,经过漫长等待后,竟然出现这个提示: 我 ...

  2. 【Java并发编程实战】-----“J.U.C”：ReentrantLock之三unlock方法分析

    前篇博客LZ已经分析了ReentrantLock的lock()实现过程,我们了解到lock实现机制有公平锁和非公平锁,两者的主要区别在于公平锁要按照CLH队列等待获取锁,而非公平锁无视CLH队列直接获 ...

  3. Cygwin/babun install telnet

    最近一直在用一个windows下模拟linux的集成环境babun,特点是安装方便,使用简单,而且大部分linux程序都可以找到. 下面说一下telnet的安装: pact install inetu ...

  4. Atitit 索引技术--位图索引

    Atitit 索引技术--位图索引 索引在数据结构上可以分为三种B树索引.位图索引和散列索引 存储原理 编辑 位图索引对数据表的列的每一个键值分别存储为一个位图,Oracle对于不同的版本,不同的操作 ...

  5. VS2012 VS2015 的项目配置模板及其目录

    建立的项目多了的时候 , 就希望能自己配置好一个项目模板,以后建立的项目自动使用这个模板就省事了,不用每次都要改, 每个项目都要改了! 经不懈努力, 终于 发现了 vs2015,vs2012 (我只用 ...

  6. 搭建LNAMP环境（六）- PHP7源码安装MongoDB和MongoDB拓展

    上一篇:搭建LNAMP环境(五)- PHP7源码安装Redis和Redis拓展 一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g ...

  7. python django基础（一）

    Django简介:Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M,视图V和控制器C.不过在Django实际使用中,Django更关注的是模型(Mod ...

  8. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  9. 《Qt Quick 4小时入门》学习笔记3

    http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...

  10. iframe跨域+

    script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...