前端：

<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. ENode框架Conference案例分析系列之 - 复杂情况的读库更新设计

    问题背景 Conference案例,是一个关于在线创建会议(类似QCon这种全球开发者大会).在线管理会议位置信息.在线预订某个会议的位置的,这样一个系统.具体可以看微软的这个项目的主页:http:/ ...

  2. 剑指Offer面试题：9.二进制中1的个数

    一.题目:二进制中1的个数 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 二.可能引起死循环的解法 一个 ...

  3. 剑指Offer面试题：28.连续子数组的最大和

    一.题目:连续子数组的最大和 题目:输入一个整型数组,数组里有正数也有负数.数组中一个或连续的多个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n).例如输入的数组为{1,-2,3 ...

  4. 【转】我的技术学习方法 — Anytao

    原文作者:anytao—王涛 他的著作:<你必须知道的.Net> 关于这个问题,也有不少刚刚入行的朋友向我问起.我想可能一千个人就有一千个答案,我不能保证自己的想法适合于所有的人,但是这确 ...

  5. Scrapy爬取自己的博客内容

    python中常用的写爬虫的库有urllib2.requests,对于大多数比较简单的场景或者以学习为目的,可以用这两个库实现.这里有一篇我之前写过的用urllib2+BeautifulSoup做的一 ...

  6. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (7) -----第二章 实体数据建模基础之拆分实体到多表以及拆分表到多实体

    2-6 拆分实体到多表 问题 你有两张或是更多的表,他们共享一样的主键,你想将他们映射到一个单独的实体. 解决方案 让我们用图2-15所示的两张表来演示这种情况. 图 2-15,两张表,Prodeuc ...

  8. JAVAScript控制多个下拉框

    方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 这个东西我是在百度上查的,我为了方 ...

  9. SQL中Group By的使用

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...

  10. myeclipse转到函数定义的方法去

    转到函数的定义CTRl+鼠标左击 myeclipse自动补全的快捷键 alt+/