前端：

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>简单实用的垂直手风琴滑动菜单列表特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>

    <link rel="stylesheet" type="text/css" href="css/normalize.css" />

    <link rel="stylesheet" type="text/css" href="css/default.css">

    <link rel="stylesheet" href="css/style.css">

    <!--[if IE]>

        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>

    <![endif]-->

</head>

<body>

    <article class="htmleaf-container">

        <header class="htmleaf-header">

            <h1>简单实用的垂直手风琴滑动菜单列表特效 <span>Simple Menu with toggle slide animation using jQuery and CSS</span></h1>

            <div class="htmleaf-links">

                <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>

                <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201509192591.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>

            </div>

        </header>

        <div class="htmleaf-content">

            <ul class="mainmenu">

                <li><img src="data:images/user.png" alt="User icon" class="icon"><span>Account</span></li>

                <ul class="submenu">

                    <div class="expand-triangle"></div>

                    <li><span>Basics</span></li>

                    <li><span>Picture</span></li>

                    <li><span>Go Premium</span></li>

                </ul>

                <li>

                    <img src="data:images/envelope.png" alt="Envelope icon" class="icon"><span>Messages</span><div class="messages">23</div>

                </li>

                <ul class="submenu">

                    <div class="expand-triangle"></div>

                    <li><span>New</span></li>

                    <li><span>Sent</span></li>

                    <li><span>Trash</span></li>

                </ul>

                <li><img src="data:images/cog.png" alt="Cog icon" class="icon"><span>Settings</span></li>

                <ul class="submenu">

                    <div class="expand-triangle"></div>

                    <li><span>Language</span></li>

                    <li><span>Password</span></li>

                    <li><span>Notifications</span></li>

                    <li><span>Privacy</span></li>

                    <li><span>Payments</span></li>

                </ul>

                <li><img src="data:images/key.png" alt="Key icon" class="icon"><span>Logout</span></li>

            </ul>

        </div>

    </article>

    <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

    <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>

    <script src="js/script.js"></script>

</body>

</html>

script.js代码：

$(document).ready(function () {

    var $submenu = $('.submenu');//<ul class="submenu">

    var $mainmenu = $('.mainmenu');//<ul class="mainmenu">

    $submenu.hide();//所有的都不伸展

    /*

    delay()对被选元素的所有排队函数（仍未运行）设置延迟

    slideDown() 方法以滑动方式显示被选元素。

    注意：slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

    提示：如需以滑动方式隐藏元素，请查看 slideUp() 方法。

    */

    $submenu.first().delay(400).slideDown(700);

    //点击Basics、Picture等左侧变颜色

    $submenu.on('click', 'li', function () {

        /*

        siblings() 方法返回被选元素的所有同级元素。

        同级元素是共享相同父元素的元素。

        */

        $submenu.siblings().find('li').removeClass('chosen');

        $(this).addClass('chosen');

    });

    //点击Account、Messages等展开子元素

    /*

    next() 方法返回被选元素的后一个同级元素。

    同级元素是共享相同父元素的元素。注意：该方法只返回一个元素。

    slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。

    该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

    slideUp() 方法以滑动方式隐藏被选元素。

    注意：隐藏的元素不会被完全显示（不再影响页面的布局）。

    */

    $mainmenu.on('click', 'li', function () {

        $(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();

    });

    $mainmenu.children('li:last-child').on('click', function () {

        //$mainmenu.fadeOut().delay(500).fadeIn();

    });

});

部分css代码：

/*------------ Color Palette ------------*/

/*

LIGHT ORANGE: #e4644b

DARK ORANGE: #d05942

DARK BROWN: #484141

Menu text: #f7f1e3

Submenu text: #ae9f9f

*/

/*------------ General Settings ------------*/

/*@import url(https://fonts.useso.com/css?family=Montserrat);*/

body {

    margin: 0;

    padding: 0;

    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;

    background: url("../images/bg.jpg") top center no-repeat;

    letter-spacing: 0.2px;

}

ul {

    list-style: none;

    width: 276px;

}

li {

    cursor: pointer;

}

/*------------ Main Menu ------------*/

.container {

    background-color: black;

}

/*------------ Main Menu ------------*/

.mainmenu {

    margin: 90px auto;

    font-size: 16px;

    position: relative;

    padding: 0;

}

    .mainmenu > li {

        background-color: #e4644b;

        border-top: 1px solid #d05942;

        height: 48px;

        color: #f7f1e3;

        box-sizing: border-box;

    }

        .mainmenu > li:first-child {

            border-radius: 7px 7px 0 0;

            border-top: 0;

        }

        .mainmenu > li:last-child {

            border-radius: 0 0 7px 7px;

        }

        .mainmenu > li span {

            display: block;

            line-height: 48px;

        }

        .mainmenu > li .icon {

            padding: 14px 20px 0 20px;

            float: left;

            width: 20px;

            height: 20px;

            display: block;

        }

        .mainmenu > li .messages {

            background: url("../images/messages.png") no-repeat;

            padding: 0;

            margin-top: -33px;

            margin-right: 19px;

            float: right;

            display: block;

            width: 34px;

            height: 18px;

            text-align: center;

            font-size: 11px;

            line-height: 19px;

        }

.expand-triangle {

    background: url("../images/expand.gif") top left no-repeat;

    height: 10px;

    width: 276px;

    content: " ";

    margin-left: -40px;

}

/*------------ Sub Menu ------------*/

.submenu {

    box-sizing: border-box;

    color: #ae9f9f;

    font-size: 13px;

    content: " ";

    /*opacity: 0.5;*/

}

    .submenu li {

        line-height: 20px;

        height: 35px;

        padding-top: 11px;

        margin-left: -40px;

        background-color: #484141;

        border-left: solid 6px #484141;

        transition: border-left 220ms ease-in;

    }

    .submenu .chosen,

    .submenu .chosen:hover {

        border-left: solid 6px #96d145;

    }

    .submenu li:hover {

        border-left: solid 6px #d05942;

    }

    .submenu li span {

        margin-left: 30px;

    }

.animate {

    animation: flip 2000ms ease-in-out alternate;

}

@keyframes flip {

    to {

        transform: rotateY(360deg);

    }

}

效果：

引用的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. 在Visual Studio中将现有.NET Framework项目迁移至.NET Core 1.1 Preview 1

    1)下载安装包含 .NET Core 1.1 Preview 1 的 SDK:Windows x64 安装包(下载地址列表) 2)下载最新 VS 2015 NuGet 插件:https://dist. ...

  2. 走向面试之数据库基础：一、你必知必会的SQL语句练习-Part 1

    本文是在Cat Qi的参考原帖的基础之上经本人一题一题练习后编辑而成,非原创,仅润色而已.另外,本文所列题目的解法并非只有一种,本文只是给出比较普通的一种而已,也希望各位园友能够自由发挥. 一.三点一 ...

  3. spring快速入门（三）

    一.在spring快速入门(二)的基础上,原先我们是采用构造方法完成对象的注入.这里还有其他的方法可以完成注入,通过set方法来完成. 修改UserActionImpl package com.mur ...

  4. 浅谈JavaScript之原型

    上一篇谈new关键字也是给这一篇写关于原型的文章买个伏笔,我对原型的理解可能会有偏差,如有错误,望指正一定修改,望各位道友如果想真正的理解原型的概念一定要再看完各方言论再回归教材. 言归正传谈原型,首 ...

  5. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

  6. iOS-----Crash文件分析(一)

    开发程序的过程中不管我们已经如何小心,总是会在不经意间遇到程序闪退.脑补一下当你在一群人面前自信的拿着你的App做功能预演的时候,流畅的操作被无情地Crash打断.联想起老罗在发布Smartisan ...

  7. 【初恋】vue单页应用开发总结

    vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...

  8. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  9. 【WP开发】加密篇：单向加密

    单向加密,简单地说就是对数据进行哈希处理,平时我们见得较多的有MD5.SHA1等,都属于单向加密.上一篇文章中,老周跟大家扯了有关双向加密的事,本文咱们就扯一下单向加密吧. 要对数据进行哈希处理也不是 ...

  10. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...