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

随机推荐

nyoj 952 : 最大四边形（计算几何）
题目链接任意四边形均可看作是两个三角形拼接得到的(即使是凹四边形),故可以O(n^2)枚举所有的线段,然后对每条线段O(n)枚举线段端点外的其他点,用来更新以此线段构成的三角形的有向面积的最大值m ...
React Native 中吐司组件react-native-easy-toast
https://github.com/crazycodeboy/react-native-easy-toast 用法: import Toast from 'react-native-easy-toa ...
ckeditor直接粘贴图片实现
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
CodeForces 1198D 1199F Rectangle Painting 1
Time limit 1000 ms Memory limit 262144 kB 解题思路一堆循环嵌套的那种dp,不好想.但是可以搜啊,很暴力的.记忆化一下就好. 我们定义搜索函数\(\text{ ...
R 大小写转换
>x = "CAGTTTCTTGAGTCTGATTAATTCAGGTTTCGGGGT"#定义字符串变量x>tolower(x)[1] "cagtttcttga ...
笔记本连接树莓派3b（不需要屏幕）
一.网线直连工具:笔记本,网线,树莓派软件:putty 过程: 将系统烧录进SD卡后,在root里添加一个名字为“ssh”的空白文件(不需后缀名)来开启ssh服务,SD卡里的cmdline.txt ...
oracle触发器update本表数据
功能: 1. 允许/限制对表的修改 2. 自动生成派生列,比如自增字段 3. 强制数据一致性 4. 提供审计和日志记录 5. 防止无效的事务处理 6. 启用复杂的业务逻辑开始 create trig ...
AtomicReference 源码分析
AtomicReference AtomicReference 能解决什么问题?什么时候使用 AtomicReference? 1)AtomicReference 可以原子更新引用对象. 2)comp ...
用Vue来实现音乐播放器（六）：JSONP的封装
在npm上下载jsonp的包这个包的用法传入的参数是地址加上地址参数的混合但是想封装一个将地址和地址参数分别传入的jsonp方法所以来封装一个 import originJSONP from ...
Powershell指令集_1
目录目录前言程序进度条 Write-Progress 执行表达式 Invoke-Expression 表格化打印信息 Format-Table 获取系统服务 Get-WmiObject 循环 F ...

垂直口风琴菜单3（jquery）

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

随机推荐

热门专题