bootstrap-简单实用的垂直手风琴滑动菜单列表特效

前端：

<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);

    }

}

效果：

bootstrap-简单实用的垂直手风琴滑动菜单列表特效

引用的demo地址：

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

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

[转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 *分享jQuery.html5和css3的插件库基于Bootstrap简单实用的tags标签插件
jQuery&amp&semi;HTML&amp&semi;CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...
19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这里我简单说明一下用自定义ViewGroup来实现. 实现方法:我们自定义一个ViewGroup实现左右滑动, ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...
炫酷实用的CSS3代码垂直手风琴菜单
今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head&gt ...

随机推荐

JSP九大内置对象及四个作用域
九大对象: 内置对象(又叫隐含对象,有9个内置对象):不需要预先声明就可以在脚本代码和表达式中随意使用 1-out: javax.servlet.jsp.JspWriter类型,代表输出流的对象.作用 ...
移动端上传照片预览+Draw on Canvas&&num;39&semi;s Demo（解决 iOS 等设备照片旋转 90 度的 bug）
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览需求二:然后绘制在canvas画布上这里,我们先看一个demo(http://jsfiddle.net/q ...
Js对map的操作
var map = {}; // 赋值 var key = "key1"; var value = "value1"; map[key] = value; // ...
css兼容问题
Opacity的兼容处理 filter:alpha(opacity=100); /* IE */ opacity: 0.5; /* 支持opacity的浏览器*/
Linux下常用的硬件信息查看命令
1.查看CPU型号,这里为了方便查看结合管道符用grep进行了匹配,当然只需要前面的命令也可以,命令如下: cat /proc/cpuinfo | grep "model name&quot ...
Python字符编码与转码
字符编码与转码注: 该图转自 http://www.cnblogs.com/luotianshuai/p/5735051.html. Python2 解码,编码 #Python2 #-*- codi ...
BZOJ&lowbar;4016&lowbar;[FJOI2014]最短路径树问题&lowbar;最短路+点分治
BZOJ_4016_[FJOI2014]最短路径树问题_最短路+点分治 Description 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择 ...
plink提取指定样本的数据（keep函数）
提取样本见命令行: plink --bfile file --noweb --keep sampleID.txt --recode --make-bed --out sample 其中,sampleI ...
Omi-touch实战移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
MySQL 有用的查询语句
查看指定数据库 db_name 的字符集和排序规则 USE db_name; SELECT @@character_set_database, @@collation_database; 显示索引信息 ...