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

随机推荐

PHP入门培训教程　一个漂亮的PHP验证码
如何写一个漂亮的PHP验证码?兄弟连PHP培训小编分享一段代码给大家: <?php class Imagecode{ private $width ; private $height; pri ...
JS onclick中this用法
当在dom元素中使用onclick绑定事件的时候,可以使用this来指向该元素对象. 打印输出的内容为: 所以可以通过该this对象来获取子元素 //通过element获取该对象下的一个audio标签 ...
手写Tomcat源码
http://search.bilibili.com/all?keyword=%E6%89%8B%E5%86%99Tomcat%E6%BA%90%E7%A0%81 tomcat源码分析一:https: ...
CG-CTF | 综合题
开场就是一个js混淆,直接丢到console里面然后根据tip查头: 看到这个tip,一开始还以为要考注入了,用访问历史来进行注入,后来发现是我高估这题了,,,:
Mybatis一对一关联查询
有两张表,老师表teacher和班级表class,一个class班级对应一个teacher,一个teacher对应一个class 需求是根据班级id查询班级信息(带老师的信息) 创建teacher和c ...
转：KVM使用NAT联网并为VM配置iptables端口转发，kvmiptables
转载地址:https://www.ilanni.com/?p=7016 在前面的文章中,我们介绍KVM的虚拟机(以下简称VM)都是通过桥接方式进行联网的. 本篇文章我们来介绍KVM的VM通过NAT方式 ...
PowerDesigner相关总结
1.PowerDesigner 工具生成数据库Report指导摘自:https://www.cnblogs.com/zycblog/archive/2010/05/11/1732918.html 1 ...
网络处理器（Network Processor）
网络处理器(Network Processor,简称NP),又可以称为交换芯片,专用于实现核心交换机高速转发功能. 根据网络处理器会议(Network Processors Conference)的定 ...
Linux动态库和静态库
Linux下动态库查看办法:nm -D libavformat.so Linux下静态库查看办法:ar -t libavformat.a ------------------------------- ...
code_action
w https://raw.githubusercontent.com/laravel/laravel/master/config/database.php <?php return [ /* ...

垂直口风琴菜单3（jquery）

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

随机推荐

热门专题