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

随机推荐

iView栅格的使用
一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统,将区域进行24等分基础用法实例代码: <template> <Row> <Col s ...
C# Asp.NET实现上传大文件(断点续传)
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
【bzoj3566】 [SHOI2014]概率充电器
*题目描述: 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器: “采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率充电器,您生活不可 ...
ubantu apache2.4.6 apache https配置
[root@VM_58_118_centos dbback]# a2enmod ssl [root@VM_58_118_centos dbback]# service apache2 restart ...
window cmd 命令行下创建文件夹和文件
新建文件夹命令: makedir 文件名新建文件命令: type null> 文件名.文件类型链接
animate(动画)框架和 swiper (轮播)框架的使用
swiper.js 框架网址:https://www.swiper.com.cn/ 是一个专门做轮播,切换特效的轮播使用方法: 然后进入案例,通过案例来进行各种功能的实现, 这一步是教我们怎么做, ...
简单三步同步你的 VSCode 用户配置
https://www.cnblogs.com/knight-errant/p/10444777.html 设备重装,换设备,VSCode 又要重新配置了?不不不,简单三步,让你的 VSCode 配置 ...
ArrayBlockingQueue 源码分析
ArrayBlockingQueue ArrayBlockingQueue 能解决什么问题?什么时候使用 ArrayBlockingQueue? 1)ArrayBlockingQueue 是底层由数组 ...
用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现
快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性通过ret数组中的title计算到的所以我们要在singer.vue组件中将数据传入到l ...
jmeter之三种参数化
前言:总结并记录几种jmeter比较有用的元件 1.接口文档 2.参数化 3.断言 1.接口文档 a.拿到接口文档接口地址:http://localhost:8080/jpress/admin/lo ...

垂直口风琴菜单3（jquery）

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

随机推荐

热门专题