垂直口风琴菜单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 ...

随机推荐

rocketmq设计
# 设计(design) 1 消息存储消息存储是RocketMQ中最为复杂和最为重要的一部分,本节将分别从RocketMQ的消息存储整体架构.PageCache与Mmap内存映射以及RocketMQ ...
【bzoj2427】【软件安装】tarjan缩点+树形依赖背包
(上不了p站我要死了,侵权度娘背锅) Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上, ...
校赛你的粪坑V2
原题今天举办程序设计比赛,2点30分开始,然而你睡到了2点25分,紧张的你将头发梳成大人模样,敷上一层最贵的面膜,穿着滑板鞋,以飞一般的速度奔向计算机学院准备参加程序设计竞赛!冠军是你的! 然而路上 ...
一本通&&洛谷 ——靶型数独——题解
题目传送主要是搜索顺序不同导致效率千差万别. 联想人做数独的策略,总是先填可填数最少的那个空,再填选择第二少的...其实这种策略就造就了一个深度浅时分支也较少的搜索树.合适的搜索顺序再配合剪枝==A ...
动态DP总结
动态DP 何为动态DP? 将画风正常的DP加上修改操作. 举个例子? 给你一个长度为\(n\)的数列,从中选出一些数,要求选出的数互不相邻,最大化选出的数的和. 考虑DP,状态设计为\(f[i][1/ ...
EQS 自定义Context 如何用Testing Pawn 进行测试？
比如自定义了一个玩家的Context, 那么需要把这个玩家直接放置到场景中在Context中override Provide Single Actor函数,按类型获取所有的Actor,其中第一个作为 ...
前端String类型转JSON类型
在js中通过ajax获取数据后,赋值给前端树形插件zTree中的zNodes,但一直失败如图: 浏览器端报错: 于是我将zNodes变量的值直接写死,并打印这两个的值,如图再次运行成功.浏览器控制台 ...
Java数据结构之排序---冒泡排序
冒泡排序的基本思想: 通过对待排序序列从前到后(从下标小的元素开始),依次比较相邻位置的元素的值,若发现与给定的次序冲突,则交换位置(假设数值大的数放在序列的后面),使数值较大的元素逐渐从前移动到后部 ...
UVALive 3958 Weird Numbers （负进制数）
Weird Numbers 题目链接: http://acm.hust.edu.cn/vjudge/contest/129733#problem/F Description Binary number ...
np.asarray(a, dtype=None, order=None)
np.asarray(a, dtype=None, order=None) 参数a:可以是,列表, 列表的元组, 元组, 元组的元组, 元组的列表,多维数组参数dtype=None, order=N ...

垂直口风琴菜单3（jquery）

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

随机推荐

热门专题