垂直口风琴菜单3（jquery）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery手风琴菜单</title>

<style type="text/css">

body{width:500px;margin:0 auto}

.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}

.footer a{color:#999;text-decoration:none}

#wrapper-250{width:250px;margin:0 auto;}

@charset "utf-8";

/* CSS Document */

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

}

.accordion li {

    list-style: none;

}

/* Layout & Style */

.accordion li > a {

    display: block;

    position: relative;

    min-width: 110px;

    padding: 0 10px 0 40px;

    height: 32px;

    color: #fdfdfd;

    font: bold 12px/32px Arial, sans-serif;

    text-decoration: none;

    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #6c6e74;

    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a,

.accordion > li > a.active {

    color: #3e5706;

    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    /*background: url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/o_active.png) repeat-x;*/

    background: #a5cd4e;

    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

}

.accordion li > a span {

    display: block;

    position: absolute;

    top: 7px;

    right: 0;

    padding: 0 10px;

    margin-right: 10px;

    font: normal bold 12px/18px Arial, sans-serif;

    background: #404247;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

}

.accordion > li:hover > a span,

.accordion > li:target > a span,

.accordion > li > a.active span {

    color: #fdfdfd;

    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #3e5706;

}

/* Images */

.accordion > li > a:before {

    position: absolute;

    top: 0;

    left: 0;

    content: '';

    width: 24px;

    height: 24px;

    margin: 4px 8px;

    background-repeat: no-repeat;

    background-image: url(http://images.cnblogs.com/cnblogs_com/heyiming/947284/o_icons.png);

    background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before,

.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before,

.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before,

.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before,

.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {

    color: #797979;

    text-shadow: 1px 1px 0px rgba(255,255,255, .2);

    background: #e5e5e5;

    border-bottom: 1px solid #c9c9c9;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

    color: #797979;

    text-shadow: 1px 1px 0px rgba(255,255,255, .2);

    background: transparent;

    border: 1px solid #c9c9c9;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

.sub-menu em {

    position: absolute;

    top: 0;

    left: 0;

    margin-left: 14px;

    color: #a6a6a6;

    font: normal 10px/32px Arial, sans-serif;

}

/* Functionality */

.accordion li > .sub-menu {

    display: none;

}

.accordion li:target > .sub-menu {

    display: block;

}

</style>

<meta name="robots" content="noindex,follow" />

</head>

<body>

<div id="wrapper-250">

  <ul class="accordion">

    <li id="one" class="files"> <a href="#one">My Files<span>495</span></a>

      <ul class="sub-menu">

        <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

        <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

        <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

        <li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>

        <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

      </ul>

    </li>

    <li id="two" class="mail"> <a href="#two">Mail<span>26</span></a>

      <ul class="sub-menu">

        <li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>

        <li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

      </ul>

    </li>

    <li id="three" class="cloud"> <a href="#three">Cloud<span>58</span></a>

      <ul class="sub-menu">

        <li><a href="#"><em>01</em>Connect<span>12</span></a></li>

        <li><a href="#"><em>02</em>Profiles<span>19</span></a></li>

        <li><a href="#"><em>03</em>Options<span>27</span></a></li>

        <li><a href="#"><em>04</em>Connect<span>12</span></a></li>

        <li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

        <li><a href="#"><em>06</em>Options<span>27</span></a></li>

      </ul>

    </li>

    <li id="four" class="sign"> <a href="#four">Sign Out</a>

      <ul class="sub-menu">

        <li><a href="#"><em>01</em>Log Out</a></li>

        <li><a href="#"><em>02</em>Delete Account</a></li>

        <li><a href="#"><em>03</em>Freeze Account</a></li>

      </ul>

    </li>

  </ul>

</div>

<script type="text/javascript"  src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>

<script type="text/javascript">

        $(document).ready(function() {

            // Store variables

            var accordion_head = $('.accordion > li > a'),

                accordion_body = $('.accordion li > .sub-menu');

            // Open the first tab on load

            accordion_head.first().addClass('active').next().slideDown('normal');

            // Click function

            accordion_head.on('click', function(event) {

                // Disable header links

                event.preventDefault();

                // Show and hide the tabs on click

                if ($(this).attr('class') != 'active'){

                    accordion_body.slideUp('normal');

                    $(this).next().stop(true,true).slideToggle('normal');

                    accordion_head.removeClass('active');

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

                }

            });

        });

    </script>

</body>

</html>

效果图：

垂直口风琴菜单3（jquery）的更多相关文章

CSS制作垂直口风琴2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS3制作的垂直口风琴1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce&q ...
bootstrap-简单实用的垂直手风琴滑动菜单列表特效
前端: <html lang="zh"> <head> <meta charset="UTF-8"> <meta ht ...
[转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

随机推荐

ESP8266-利用网页控制ESP8266
说明:发出/gpio/1 就输出 "亮灯": /gpio/0 就输出 "灭灯" #include <ESP8266WiFi.h> con ...
Floyd求解最短路
Floyd算法适用于求解全源最短路.也就是能够求解任意两点间的最短路径并且是适用于含有负权边的图,但是含有负环则不行了!空间复杂度为O(n2).时间复杂度为O(n3).其具体的原理在百度能够找到很多, ...
洛谷 P4570 BZOJ 2460 [BJWC2011]元素
Time limit 20000 ms Memory limit 131072 kB OS Linux 解题思路看题解可知我们将矿石按照魔法值降序排序,然后依次将矿石编号放入线性基(突然想起线代里 ...
php日志托管给apache处理
php.ini配置: log_errors = On;不显示错误display_startup_errors = Offdisplay_errors = Off ;除了notice级别错误外,报告所有 ...
洛谷P1309 瑞士轮——题解
题目传送思路非常简单,只要开始时把结构体排个序,每次给赢的加分再排序,共r次,最后再输出分数第q大的就行了. (天真的我估错时间复杂度用每次用sort暴力排序结果60分...)实际上这道题估算时间复 ...
[CSP-S模拟测试]:回家（塔尖）
题目传送门(内部题7) 输入格式第一行一个整数$T$,表示共$T$组数据.对于每组数据,第一行两个数$n,m$表示有$n$个建筑物,$m$条道路.接下来$m$行,每行两个整数$u,v$,表示第$u$ ...
vue双向绑定原理（简单实现原理附demo）
先上效果图简单的实现数据的双向绑定首先来了解一个东西:Object.defineProperty() https://developer.mozilla.org/zh-CN/docs/Web/Jav ...
format和urlencode的使用对比
一:format的基本语法使用基本语法是通过 {} 和 : 来代替以前的 % . format 函数可以接受不限个参数,位置可以不按顺序. 例如: >>>"{} {}&q ...
RNN系列
漫谈RNN之梯度消失及梯度爆炸:http://bbs.imefuture.com/article/4405 漫谈RNN之长短期记忆模型LSTM:http://bbs.imefuture.com/art ...
unique()与nunique()
1 unique() 统计list中的不同值时,返回的是array.它有三个参数,可分别统计不同的量,返回的都是array. 当list中的元素也是list时,尽量不要用这种方法. import nu ...

垂直口风琴菜单3（jquery）

垂直口风琴菜单3（jquery）的更多相关文章

随机推荐

热门专题