搜索
首页web前端css教程利用CSS实现几款不错的菜单栏实例代码

利用CSS实现几款不错的菜单栏实例代码

高洛峰
高洛峰
Feb 18, 2017 am 10:24 AM
css菜单栏

这篇文章主要介绍了利用CSS实现的几款不错的菜单栏实例代码，文中包含滑动菜单、左侧带图标多级下拉菜单、立体动感菜单、可同时折叠的手风琴菜单、鼠标滑动展开二级菜单以及垂直多级菜单，显示未读数目和折叠，有需要的朋友可以参考。

前言

其实前端那些事蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！

一、滑动菜单

1、代码：


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3垂直菜单 菜单项滑动动画DEMO演示</title>
    <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
    <script type="text/javascript" src="http://www.w3cplus.com/demo/css3/prefixfree.min.js"></script>
    <style>
body {
    background-color:#282828;
}    
.demo {
    margin: 40px auto 0;
    width: 170px;
    text-align: center;
}
.menu {
    position: relative;
    width: 170px;
    padding: 5px 0;
    line-height: 35px;
    border-radius: 5px;
    background: -*-linear-gradient(top,#dbdbdb,#999);
}
.menu a {
    display: block;
    color: #484848;
    text-decoration: none;
    text-shadow: 0 1px 0 #e0e0e0;
    font-size: 14px;
}
.menu li:hover a,
    .menu li:first-child a {
    color: #980202;
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.menu li:hover a{
    color: #fff;
}
.menu li {
    position: relative;
    z-index: 2;
}
.ribbon_wrap {
    position: absolute;
    top: 8px;
    left: -20px;
    z-index: 1;
    transition: top 0.4s;
}
.ribbon_rail {
    position: relative;
    width: 170px;
    height: 30px;
    padding: 0 20px;
    color: #e3e3e3;
    text-shadow: 0 1px 0 #6b6b6b;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    background: -*-linear-gradient(top,#ff3f3f,#a50000);
}
.ribbon_rail:before,
    .ribbon_rail:after {
    position:absolute;
    content:"";
    top:100%;
    width:0;
    height:0;
    border: 5px solid transparent;
}
.ribbon_rail:before {
    left:0;
    border-color: #5d0f0f #5d0f0f transparent transparent;
}
.ribbon_rail:after { 
    right:0;
    border-color: #5d0f0f transparent transparent #5d0f0f;
}
.ribbon_rail > p {
    width: 100%;
}
.ribbon_rail > p:before,
    .ribbon_rail > p:after {
    content:"";
    position: absolute;
    top:10px;
    z-index: -1;
    width: 0;
    height:0;
    border-width: 14px;
    border-style: solid;
    border-color: #ff1515 #ff1515 #920000 #ff1515;
}
.ribbon_rail > p:before {
    right: 100%;
    border-left-color: transparent;
    margin-right: -10px;
}
.ribbon_rail > p:after {
    left: 100%;
    border-right-color: transparent;
    margin-left: -10px;
}
.menu li:nth-child(1):hover ~ .ribbon_wrap{ 
    top: 8px; 
}
.menu li:nth-child(2):hover ~ .ribbon_wrap{  
    top: 43px;
}
.menu li:nth-child(3):hover ~ .ribbon_wrap{  
    top: 78px; 
}
.menu li:nth-child(4):hover ~ .ribbon_wrap{
    top: 113px;
}
.menu li:nth-child(5):hover ~ .ribbon_wrap{
    top: 148px;
}
    </style>
</head>
<body>
<p class="page">
    <section class="demo">
        <ul class="menu unstyled">
            <li><a href="#" title=""><strong>Steve Careless</strong></a></li>
            <li><a href="#" title=""><strong>Hank Azarena</strong></a></li>
            <li><a href="#" title=""><strong>Joan Rivals</strong></a></li>
            <li><a href="#" title=""><strong>Johnny Dip</strong></a></li>
            <li><a href="#" title=""><strong>Gwyneth Patron</strong></a></li>
            <p class="ribbon_wrap">
                <p class="ribbon_rail">
                    <p></p>
                </p>
            </p>
        </ul>
    </section>
    <p style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</p>
</p>
</body>
</html>


2、效果

利用CSS实现几款不错的菜单栏实例代码

 二、左侧带图标多级下拉菜单

1、HTML代码：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery左侧带小图标的多级下拉菜单DEMO演示</title>
<link href="css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/google-maps.js"></script>
<script>$(document).ready(function(){$(".vertical-nav").verticalnav({speed: 400,align: "left"});});</script>
</head>
<body>
<p style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</p>
<p class="kePublic">
<!--效果html开始-->
<p class="content">
    <ul class="vertical-nav dark red">
        <li class="active"><a href="http://www.internetke.com/"><i class="icon-home"></i>首页</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-cogs"></i>服务
        <span class="submenu-icon"></span></a>
        <ul>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
        </ul>
        </li>
        <li><a href="http://www.internetke.com/"><i class="icon-briefcase"></i>产品
        <span class="submenu-icon"></span></a>
        <ul>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航<span class="submenu-icon"></span></a><ul>
                <li><a href="http://www.internetke.com/">三级导航</a></li>
                <li><a href="http://www.internetke.com/">三级导航</a></li>
                <li><a href="http://www.internetke.com/">三级导航 <span class="submenu-icon"></span>
                </a>
                <ul>
                    <li><a href="http://www.internetke.com/">四级导航</a></li>
                    <li><a href="http://www.internetke.com/">四级导航</a></li>
                    <li><a href="http://www.internetke.com/">四级导航</a></li>
                    <li><a href="http://www.internetke.com/">四级导航</a></li>
                </ul>
                </li>
                <li><a href="http://www.internetke.com/">三级导航</a></li>
            </ul>
            </li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
            <li><a href="http://www.internetke.com/">二级导航</a></li>
        </ul>
        </li>
        <li><a href="http://www.internetke.com/"><i class="icon-user"></i>关于我们</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-comments-alt"></i>博客</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-picture"></i>导航</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-info"></i>信息</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-group"></i>团队</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-question"></i>常见问题</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-bar-chart"></i>案例</a></li>
        <li><a href="http://www.internetke.com/"><i class="icon-envelope"></i>联系我们</a></li>
    </ul>
</p>
<!--效果html结束-->
<p class="clear"></p>
</p>

</body>
</html>


2、CSS代码：

复制代码

代码如下:


@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, p, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
p {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
.clear{height:0; overflow:hidden; clear:both}94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee@font-face {
 font-family: 'FontAwesome';
 src: url('font/fontawesome-webfont.eot?v=3.1.0');
 src: url('font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),
      url('font/fontawesome-webfont.woff?v=3.1.0') format('woff'),
      url('font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),
      url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
 font-weight: normal;
 font-style: normal;
}
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
 font-family: FontAwesome;
 font-weight: normal;
 font-style: normal;
 text-decoration: inherit;
 -webkit-font-smoothing: antialiased;
 *margin-right: .3em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
 text-decoration: inherit;
 display: inline-block;
 speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
 vertical-align: -10%;
 font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"],
a [class^="icon-"]:before,
a [class*=" icon-"]:before {
 display: inline;
}
/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
 display: inline-block;
 width: 1.2857142857142858em;
 text-align: center;
}
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
 width: 1.5714285714285714em;
}
ul.icons-ul {
 list-style-type: none;
 text-indent: -0.7142857142857143em;
 margin-left: 2.142857142857143em;
}
ul.icons-ul > li .icon-li {
 width: 0.7142857142857143em;
 display: inline-block;
 text-align: center;
}
[class^="icon-"].hide,
[class*=" icon-"].hide {
 display: none;
}
.icon-muted {
 color: #eeeeee;
}
.icon-light {
 color: #ffffff;
}
.icon-dark {
 color: #333333;
}
.icon-border {
 border: solid 1px #eeeeee;
 padding: .2em .25em .15em;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.icon-2x {
 font-size: 2em;
}
.icon-2x.icon-border {
 border-width: 2px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}
.icon-3x {
 font-size: 3em;
}
.icon-3x.icon-border {
 border-width: 3px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.icon-4x {
 font-size: 4em;
}
.icon-4x.icon-border {
 border-width: 4px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}
.icon-5x {
 font-size: 5em;
}
.icon-5x.icon-border {
 border-width: 5px;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}
.pull-right {
 float: right;
}
.pull-left {
 float: left;
}
[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
 margin-right: .3em;
}
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
 margin-left: .3em;
}
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
 display: inline;
 width: auto;
 height: auto;
 line-height: normal;
 vertical-align: baseline;
 background-image: none;
 background-position: 0% 0%;
 background-repeat: repeat;
 margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
 background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
 line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
 display: inline-block;
}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
 line-height: .9em;
}
.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
 margin-top: .18em;
}
.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
 line-height: .8em;
}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
 margin-top: .25em;
}
.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
 margin-top: 0;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
 margin-top: .05em;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
 margin-right: .2em;
}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
 margin-left: .2em;
}



复制代码

代码如下:


/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack {
 position: relative;
 display: inline-block;
 width: 2em;
 height: 2em;
 line-height: 2em;
 vertical-align: -35%;
}
.icon-stack [class^="icon-"],
.icon-stack [class*=" icon-"] {
 display: block;
 text-align: center;
 position: absolute;
 width: 100%;
 height: 100%;
 font-size: 1em;
 line-height: inherit;
 *line-height: 2em;
}
.icon-stack .icon-stack-base {
 font-size: 2em;
 *line-height: 1em;
}
/* Animated rotating icon */
.icon-spin {
 display: inline-block;
 -moz-animation: spin 2s infinite linear;
 -o-animation: spin 2s infinite linear;
 -webkit-animation: spin 2s infinite linear;
 animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
 0% {
   -moz-transform: rotate(0deg);
 }
 100% {
   -moz-transform: rotate(359deg);
 }
}
@-webkit-keyframes spin {
 0% {
   -webkit-transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(359deg);
 }
}
@-o-keyframes spin {
 0% {
   -o-transform: rotate(0deg);
 }
 100% {
   -o-transform: rotate(359deg);
 }
}
@-ms-keyframes spin {
 0% {
   -ms-transform: rotate(0deg);
 }
 100% {
   -ms-transform: rotate(359deg);
 }
}
@keyframes spin {
 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(359deg);
 }
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 -o-transform: rotate(270deg);
 transform: rotate(270deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
 -webkit-transform: scale(-1, 1);
 -moz-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 -o-transform: scale(-1, 1);
 transform: scale(-1, 1);
}
.icon-flip-vertical:before {
 -webkit-transform: scale(1, -1);
 -moz-transform: scale(1, -1);
 -ms-transform: scale(1, -1);
 -o-transform: scale(1, -1);
 transform: scale(1, -1);
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
  readers do not read off random characters that represent icons */
.icon-glass:before {
 content: "\f000";
}
.icon-music:before {
 content: "\f001";
}
.icon-search:before {
 content: "\f002";
}
.icon-envelope:before {
 content: "\f003";
}
.icon-heart:before {
 content: "\f004";
}
.icon-star:before {
 content: "\f005";
}
.icon-star-empty:before {
 content: "\f006";
}
.icon-user:before {
 content: "\f007";
}
.icon-film:before {
 content: "\f008";
}
.icon-th-large:before {
 content: "\f009";
}
.icon-th:before {
 content: "\f00a";
}
.icon-th-list:before {
 content: "\f00b";
}
.icon-ok:before {
 content: "\f00c";
}
.icon-remove:before {
 content: "\f00d";
}
.icon-zoom-in:before {
 content: "\f00e";
}
.icon-zoom-out:before {
 content: "\f010";
}
.icon-off:before {
 content: "\f011";
}
.icon-signal:before {
 content: "\f012";
}
.icon-cog:before {
 content: "\f013";
}
.icon-trash:before {
 content: "\f014";
}
.icon-home:before {
 content: "\f015";
}
.icon-file:before {
 content: "\f016";
}
.icon-time:before {
 content: "\f017";
}
.icon-road:before {
 content: "\f018";
}
.icon-download-alt:before {
 content: "\f019";
}
.icon-download:before {
 content: "\f01a";
}
.icon-upload:before {
 content: "\f01b";
}
.icon-inbox:before {
 content: "\f01c";
}
.icon-play-circle:before {
 content: "\f01d";
}
.icon-repeat:before,
.icon-rotate-right:before {
 content: "\f01e";
}
/* F020 doesn't work in Safari. all shifted one down */
.icon-refresh:before {
 content: "\f021";
}
.icon-list-alt:before {
 content: "\f022";
}
.icon-lock:before {
 content: "\f023";
}
.icon-flag:before {
 content: "\f024";
}
.icon-headphones:before {
 content: "\f025";
}
.icon-volume-off:before {
 content: "\f026";
}
.icon-volume-down:before {
 content: "\f027";
}
.icon-volume-up:before {
 content: "\f028";
}
.icon-qrcode:before {
 content: "\f029";
}
.icon-barcode:before {
 content: "\f02a";
}
.icon-tag:before {
 content: "\f02b";
}
.icon-tags:before {
 content: "\f02c";
}
.icon-book:before {
 content: "\f02d";
}
.icon-bookmark:before {
 content: "\f02e";
}
.icon-print:before {
 content: "\f02f";
}
.icon-camera:before {
 content: "\f030";
}
.icon-font:before {
 content: "\f031";
}
.icon-bold:before {
 content: "\f032";
}
.icon-italic:before {
 content: "\f033";
}
.icon-text-height:before {
 content: "\f034";
}
.icon-text-width:before {
 content: "\f035";
}
.icon-align-left:before {
 content: "\f036";
}
.icon-align-center:before {
 content: "\f037";
}
.icon-align-right:before {
 content: "\f038";
}
.icon-align-justify:before {
 content: "\f039";
}
.icon-list:before {
 content: "\f03a";
}
.icon-indent-left:before {
 content: "\f03b";
}
.icon-indent-right:before {
 content: "\f03c";
}
.icon-facetime-video:before {
 content: "\f03d";
}
.icon-picture:before {
 content: "\f03e";
}
.icon-pencil:before {
 content: "\f040";
}
.icon-map-marker:before {
 content: "\f041";
}
.icon-adjust:before {
 content: "\f042";
}
.icon-tint:before {
 content: "\f043";
}
.icon-edit:before {
 content: "\f044";
}
.icon-share:before {
 content: "\f045";
}
.icon-check:before {
 content: "\f046";
}
.icon-move:before {
 content: "\f047";
}
.icon-step-backward:before {
 content: "\f048";
}
.icon-fast-backward:before {
 content: "\f049";
}
.icon-backward:before {
 content: "\f04a";
}
.icon-play:before {
 content: "\f04b";
}
.icon-pause:before {
 content: "\f04c";
}
.icon-stop:before {
 content: "\f04d";
}
.icon-forward:before {
 content: "\f04e";
}
.icon-fast-forward:before {
 content: "\f050";
}
.icon-step-forward:before {
 content: "\f051";
}
.icon-eject:before {
 content: "\f052";
}
.icon-chevron-left:before {
 content: "\f053";
}
.icon-chevron-right:before {
 content: "\f054";
}
.icon-plus-sign:before {
 content: "\f055";
}
.icon-minus-sign:before {
 content: "\f056";
}
.icon-remove-sign:before {
 content: "\f057";
}
.icon-ok-sign:before {
 content: "\f058";
}
.icon-question-sign:before {
 content: "\f059";
}
.icon-info-sign:before {
 content: "\f05a";
}
.icon-screenshot:before {
 content: "\f05b";
}
.icon-remove-circle:before {
 content: "\f05c";
}
.icon-ok-circle:before {
 content: "\f05d";
}
.icon-ban-circle:before {
 content: "\f05e";
}
.icon-arrow-left:before {
 content: "\f060";
}
.icon-arrow-right:before {
 content: "\f061";
}
.icon-arrow-up:before {
 content: "\f062";
}
.icon-arrow-down:before {
 content: "\f063";
}
.icon-share-alt:before,
.icon-mail-forward:before {
 content: "\f064";
}
.icon-resize-full:before {
 content: "\f065";
}
.icon-resize-small:before {
 content: "\f066";
}
.icon-plus:before {
 content: "\f067";
}
.icon-minus:before {
 content: "\f068";
}
.icon-asterisk:before {
 content: "\f069";
}
.icon-exclamation-sign:before {
 content: "\f06a";
}
.icon-gift:before {
 content: "\f06b";
}
.icon-leaf:before {
 content: "\f06c";
}
.icon-fire:before {
 content: "\f06d";
}
.icon-eye-open:before {
 content: "\f06e";
}
.icon-eye-close:before {
 content: "\f070";
}
.icon-warning-sign:before {
 content: "\f071";
}
.icon-plane:before {
 content: "\f072";
}
.icon-calendar:before {
 content: "\f073";
}
.icon-random:before {
 content: "\f074";
}
.icon-comment:before {
 content: "\f075";
}
.icon-magnet:before {
 content: "\f076";
}
.icon-chevron-up:before {
 content: "\f077";
}
.icon-chevron-down:before {
 content: "\f078";
}
.icon-retweet:before {
 content: "\f079";
}
.icon-shopping-cart:before {
 content: "\f07a";
}
.icon-folder-close:before {
 content: "\f07b";
}
.icon-folder-open:before {
 content: "\f07c";
}
.icon-resize-vertical:before {
 content: "\f07d";
}
.icon-resize-horizontal:before {
 content: "\f07e";
}
.icon-bar-chart:before {
 content: "\f080";
}
.icon-twitter-sign:before {
 content: "\f081";
}
.icon-facebook-sign:before {
 content: "\f082";
}
.icon-camera-retro:before {
 content: "\f083";
}
.icon-key:before {
 content: "\f084";
}
.icon-cogs:before {
 content: "\f085";
}
.icon-comments:before {
 content: "\f086";
}
.icon-thumbs-up:before {
 content: "\f087";
}
.icon-thumbs-down:before {
 content: "\f088";
}
.icon-star-half:before {
 content: "\f089";
}
.icon-heart-empty:before {
 content: "\f08a";
}
.icon-signout:before {
 content: "\f08b";
}
.icon-linkedin-sign:before {
 content: "\f08c";
}
.icon-pushpin:before {
 content: "\f08d";
}
.icon-external-link:before {
 content: "\f08e";
}
.icon-signin:before {
 content: "\f090";
}
.icon-trophy:before {
 content: "\f091";
}
.icon-github-sign:before {
 content: "\f092";
}
.icon-upload-alt:before {
 content: "\f093";
}
.icon-lemon:before {
 content: "\f094";
}
.icon-phone:before {
 content: "\f095";
}
.icon-check-empty:before {
 content: "\f096";
}
.icon-bookmark-empty:before {
 content: "\f097";
}
.icon-phone-sign:before {
 content: "\f098";
}
.icon-twitter:before {
 content: "\f099";
}
.icon-facebook:before {
 content: "\f09a";
}
.icon-github:before {
 content: "\f09b";
}
.icon-unlock:before {
 content: "\f09c";
}
.icon-credit-card:before {
 content: "\f09d";
}
.icon-rss:before {
 content: "\f09e";
}
.icon-hdd:before {
 content: "\f0a0";
}
.icon-bullhorn:before {
 content: "\f0a1";
}
.icon-bell:before {
 content: "\f0a2";
}
.icon-certificate:before {
 content: "\f0a3";
}
.icon-hand-right:before {
 content: "\f0a4";
}
.icon-hand-left:before {
 content: "\f0a5";
}
.icon-hand-up:before {
 content: "\f0a6";
}
.icon-hand-down:before {
 content: "\f0a7";
}
.icon-circle-arrow-left:before {
 content: "\f0a8";
}
.icon-circle-arrow-right:before {
 content: "\f0a9";
}
.icon-circle-arrow-up:before {
 content: "\f0aa";
}
.icon-circle-arrow-down:before {
 content: "\f0ab";
}
.icon-globe:before {
 content: "\f0ac";
}
.icon-wrench:before {
 content: "\f0ad";
}
.icon-tasks:before {
 content: "\f0ae";
}
.icon-filter:before {
 content: "\f0b0";
}
.icon-briefcase:before {
 content: "\f0b1";
}
.icon-fullscreen:before {
 content: "\f0b2";
}
.icon-group:before {
 content: "\f0c0";
}
.icon-link:before {
 content: "\f0c1";
}
.icon-cloud:before {
 content: "\f0c2";
}
.icon-beaker:before {
 content: "\f0c3";
}
.icon-cut:before {
 content: "\f0c4";
}
.icon-copy:before {
 content: "\f0c5";
}
.icon-paper-clip:before {
 content: "\f0c6";
}
.icon-save:before {
 content: "\f0c7";
}
.icon-sign-blank:before {
 content: "\f0c8";
}
.icon-reorder:before {
 content: "\f0c9";
}
.icon-list-ul:before {
 content: "\f0ca";
}
.icon-list-ol:before {
 content: "\f0cb";
}
.icon-strikethrough:before {
 content: "\f0cc";
}
.icon-underline:before {
 content: "\f0cd";
}
.icon-table:before {
 content: "\f0ce";
}
.icon-magic:before {
 content: "\f0d0";
}
.icon-truck:before {
 content: "\f0d1";
}
.icon-pinterest:before {
 content: "\f0d2";
}
.icon-pinterest-sign:before {
 content: "\f0d3";
}
.icon-google-plus-sign:before {
 content: "\f0d4";
}
.icon-google-plus:before {
 content: "\f0d5";
}
.icon-money:before {
 content: "\f0d6";
}
.icon-caret-down:before {
 content: "\f0d7";
}
.icon-caret-up:before {
 content: "\f0d8";
}
.icon-caret-left:before {
 content: "\f0d9";
}
.icon-caret-right:before {
 content: "\f0da";
}
.icon-columns:before {
 content: "\f0db";
}
.icon-sort:before {
 content: "\f0dc";
}
.icon-sort-down:before {
 content: "\f0dd";
}
.icon-sort-up:before {
 content: "\f0de";
}
.icon-envelope-alt:before {
 content: "\f0e0";
}
.icon-linkedin:before {
 content: "\f0e1";
}
.icon-undo:before,
.icon-rotate-left:before {
 content: "\f0e2";
}
.icon-legal:before {
 content: "\f0e3";
}
.icon-dashboard:before {
 content: "\f0e4";
}
.icon-comment-alt:before {
 content: "\f0e5";
}
.icon-comments-alt:before {
 content: "\f0e6";
}
.icon-bolt:before {
 content: "\f0e7";
}
.icon-sitemap:before {
 content: "\f0e8";
}
.icon-umbrella:before {
 content: "\f0e9";
}
.icon-paste:before {
 content: "\f0ea";
}
.icon-lightbulb:before {
 content: "\f0eb";
}
.icon-exchange:before {
 content: "\f0ec";
}
.icon-cloud-download:before {
 content: "\f0ed";
}
.icon-cloud-upload:before {
 content: "\f0ee";
}
.icon-user-md:before {
 content: "\f0f0";
}
.icon-stethoscope:before {
 content: "\f0f1";
}
.icon-suitcase:before {
 content: "\f0f2";
}
.icon-bell-alt:before {
 content: "\f0f3";
}
.icon-coffee:before {
 content: "\f0f4";
}
.icon-food:before {
 content: "\f0f5";
}
.icon-file-alt:before {
 content: "\f0f6";
}
.icon-building:before {
 content: "\f0f7";
}
.icon-hospital:before {
 content: "\f0f8";
}
.icon-ambulance:before {
 content: "\f0f9";
}
.icon-medkit:before {
 content: "\f0fa";
}
.icon-fighter-jet:before {
 content: "\f0fb";
}
.icon-beer:before {
 content: "\f0fc";
}
.icon-h-sign:before {
 content: "\f0fd";
}
.icon-plus-sign-alt:before {
 content: "\f0fe";
}
.icon-double-angle-left:before {
 content: "\f100";
}
.icon-double-angle-right:before {
 content: "\f101";
}
.icon-double-angle-up:before {
 content: "\f102";
}
.icon-double-angle-down:before {
 content: "\f103";
}
.icon-angle-left:before {
 content: "\f104";
}
.icon-angle-right:before {
 content: "\f105";
}
.icon-angle-up:before {
 content: "\f106";
}
.icon-angle-down:before {
 content: "\f107";
}
.icon-desktop:before {
 content: "\f108";
}
.icon-laptop:before {
 content: "\f109";
}
.icon-tablet:before {
 content: "\f10a";
}
.icon-mobile-phone:before {
 content: "\f10b";
}
.icon-circle-blank:before {
 content: "\f10c";
}
.icon-quote-left:before {
 content: "\f10d";
}
.icon-quote-right:before {
 content: "\f10e";
}
.icon-spinner:before {
 content: "\f110";
}
.icon-circle:before {
 content: "\f111";
}
.icon-reply:before,
.icon-mail-reply:before {
 content: "\f112";
}
.icon-folder-close-alt:before {
 content: "\f114";
}
.icon-folder-open-alt:before {
 content: "\f115";
}
.icon-expand-alt:before {
 content: "\f116";
}
.icon-collapse-alt:before {
 content: "\f117";
}
.icon-smile:before {
 content: "\f118";
}
.icon-frown:before {
 content: "\f119";
}
.icon-meh:before {
 content: "\f11a";
}
.icon-gamepad:before {
 content: "\f11b";
}
.icon-keyboard:before {
 content: "\f11c";
}
.icon-flag-alt:before {
 content: "\f11d";
}
.icon-flag-checkered:before {
 content: "\f11e";
}
.icon-terminal:before {
 content: "\f120";
}
.icon-code:before {
 content: "\f121";
}
.icon-reply-all:before {
 content: "\f122";
}
.icon-mail-reply-all:before {
 content: "\f122";
}
.icon-star-half-full:before,
.icon-star-half-empty:before {
 content: "\f123";
}
.icon-location-arrow:before {
 content: "\f124";
}
.icon-crop:before {
 content: "\f125";
}
.icon-code-fork:before {
 content: "\f126";
}
.icon-unlink:before {
 content: "\f127";
}
.icon-question:before {
 content: "\f128";
}
.icon-info:before {
 content: "\f129";
}
.icon-exclamation:before {
 content: "\f12a";
}
.icon-superscript:before {
 content: "\f12b";
}
.icon-subscript:before {
 content: "\f12c";
}
.icon-eraser:before {
 content: "\f12d";
}
.icon-puzzle-piece:before {
 content: "\f12e";
}
.icon-microphone:before {
 content: "\f130";
}
.icon-microphone-off:before {
 content: "\f131";
}
.icon-shield:before {
 content: "\f132";
}
.icon-calendar-empty:before {
 content: "\f133";
}
.icon-fire-extinguisher:before {
 content: "\f134";
}
.icon-rocket:before {
 content: "\f135";
}
.icon-maxcdn:before {
 content: "\f136";
}
.icon-chevron-sign-left:before {
 content: "\f137";
}
.icon-chevron-sign-right:before {
 content: "\f138";
}
.icon-chevron-sign-up:before {
 content: "\f139";
}
.icon-chevron-sign-down:before {
 content: "\f13a";
}
.icon-html5:before {
 content: "\f13b";
}
.icon-css3:before {
 content: "\f13c";
}
.icon-anchor:before {
 content: "\f13d";
}
.icon-unlock-alt:before {
 content: "\f13e";
}
.icon-bullseye:before {
 content: "\f140";
}
.icon-ellipsis-horizontal:before {
 content: "\f141";
}
.icon-ellipsis-vertical:before {
 content: "\f142";
}
.icon-rss-sign:before {
 content: "\f143";
}
.icon-play-sign:before {
 content: "\f144";
}
.icon-ticket:before {
 content: "\f145";
}
.icon-minus-sign-alt:before {
 content: "\f146";
}
.icon-check-minus:before {
 content: "\f147";
}
.icon-level-up:before {
 content: "\f148";
}
.icon-level-down:before {
 content: "\f149";
}
.icon-check-sign:before {
 content: "\f14a";
}
.icon-edit-sign:before {
 content: "\f14b";
}
.icon-external-link-sign:before {
 content: "\f14c";
}
.icon-share-sign:before {
 content: "\f14d";
}



复制代码

代码如下:

.content,.content ul{margin:0!important}
.410000{clear: both}.410001:after{display: block;visibility: hidden;content: ".";clear: both;text-indent: -9999px;height: 0;}.410002{margin-right: 0 !important}#sdgagdgd10000{width: 660px;padding: 40px;background: #FFF;margin: 20px auto;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}.410003{background: none !important;width:740px !important;padding: 0px !important;}.vertical-nav{width: 200px;margin:0;padding:0;float: left;font-family: Segoe UI, Arial;position:relative;list-style: none;box-shadow: 0 1px 2px rgba(0,0,0,0.5);background: #fff;}#sdgagdgd10001{margin: 0 0 40px;font-size: 14px;color: #999;}.410004{display:block;margin:0 auto}.410005{float:right;margin:10px 0 10px 10px}.410006{float:left;margin:10px 10px 10px 0}.410007{float:left}.410008{float:right}.410009{text-align:center}.410010{text-align:right}.410011{text-align:left}.vertical-nav li{display: block;width: 100%;padding:0;float:left;font-size:14px;position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.410012{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;margin:10px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.410012 img{margin:0;padding:0;border:0 none;}.vertical-nav li a{width: 100%;display:block;padding:15px 20px 15px 19px;color: #888;text-decoration:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}.410012 p.410013{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;}.410014{margin:0 !important;max-height:1em;}.vertical-nav li:hover > a > i,.vertical-nav > li.active a > i{background: #95a5a6;color: #fff;}blockquote.410015{margin-right:20px;text-align:right;margin-left:0;width:33%;float:left;}blockquote.410016{margin-left:20px;text-align:left;margin-right:0;width:33%;float:right;}.410017 a{float: left;display: block;color: #666;margin-left: 5px;margin-bottom: 5px;padding: 3px 7px;line-height: 1em;background: #EEE;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.vertical-nav ul, .vertical-nav ul li ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;z-index: 999;width:100%;background: #fff;box-shadow: 0 1px 3px rgba(0,0,0,0.3);}.vertical-nav ul{top: 0;left: 100%;}.410018{float: left;}#sdgagdgd10002{width: 100%;}#sdgagdgd10002 caption{text-align: right;color: #333;font-size: 12px;margin-top: 10px;margin-bottom: 15px;}.vertical-nav ul li ul{top: 1px;}.vertical-nav ul li{clear: both;width: 100%;}.vertical-nav ul li a{padding: 15px 20px;text-decoration:none;display:inline-block;border:0 none;float:left;clear:both;}#sdgagdgd10002 thead{font-size: 10px;}#sdgagdgd10002 thead th{padding-bottom: 10px;}#sdgagdgd10002 tbody{color: #aaa;}#sdgagdgd10002 tbody td{background: #f5f5f5;border: 1px solid #fff;text-align: center;padding:8px;}#sdgagdgd10002 tbody td:hover{background: #fff;}#sdgagdgd10002 tbody .410019{background: none;}#sdgagdgd10002 tfoot #sdgagdgd10003{font-size: 10px;text-transform: uppercase;text-align: right;}#sdgagdgd10002 tfoot #sdgagdgd10004{font-size: 10px;text-transform: uppercase;padding-top: 10px;}.vertical-nav .submenu-icon{font-family: &#39;FontAwesome&#39;;font-size: 10px;float: right;margin-right: -10px;line-height: 24px;}.vertical-nav > li > a > .submenu-icon:before{content: "\f0c9";}.vertical-nav > li ul a .submenu-icon:before{content: "\f0c9";float: right;line-height: 23px;}#sdgagdgd10005{width: 740px;margin: 0 auto;position: relative;text-shadow: 1px 1px 1px #FFF;}#sdgagdgd10006{float: left;}#sdgagdgd10006 h2,#sdgagdgd10006 h1{margin: 0;line-height: 1em;font-size: 20px;font-weight: normal;font-style: normal;}#sdgagdgd10006 h2 a,#sdgagdgd10006 h1 a{color: #7B7B7B;text-decoration: none;}#sdgagdgd10006 h2 a:hover,#sdgagdgd10006 h1 a:hover{color: #000}#sdgagdgd10007{position: absolute;height: 48px;top: 4px;right: -15px;font-family: &#39;Droid Sans&#39;, arial, serif;}.410020,.410020 *{margin: 0;padding: 0;list-style: none;}.410020{line-height: 1.0}.410020 ul{position: absolute;top: -999em;width: 10em;}.410020 ul li{width: 100%}.410020 li:hover{visibility: inherit;}.vertical-nav > li i{line-height: 24px !important;margin: -16px 14px 0 -20px;font-size: 25px;float: left;border-right: solid 1px #dedede;padding-right: 10px;padding:14px 15px 12px 15px;width: 28px;text-align: center;-o-transition: background .3s ease-in-out;-webkit-transition: background .3s ease-in-out;-moz-transition: background .3s ease-in-out;transition: background .3s ease-in-out;}.410020 li{float: left;position: relative;}.410020 a{display: block;position: relative;}.410020 li:hover ul,.410020 li.410021 ul{left: 0;top: 3em;z-index: 99;background: #FFF;padding: 10px 0;border: 1px solid #DDD;border-top: none;}ul.410020 li:hover li ul,ul.410020 li.410021 li ul{top: -999em}ul.410020 li li:hover ul,ul.410020 li li.410021 ul{left: 10em;top: 0;}.vertical-nav > li.showhide{display: none;width: 100%;height: 50px;cursor: pointer;color:#888;border-bottom: solid 1px rgba(0, 0, 0, 0.1);background: #fff;}.vertical-nav > li.showhide span.title{margin: 16px 0 0 25px;float: left;}ul.410020 li li:hover li ul,ul.410020 li li.410021 li ul{top: -999em}ul.410020 li li li:hover ul,ul.410020 li li li.410021 ul{left: 10em;top: 0;}.410020{float: left;margin-bottom: 1em;}.410020 a{color: #666;padding: 0 15px;text-decoration: none;}.410020 a:focus,.410020 a:hover,.410020 a:active{color: #000;}.vertical-nav > li.showhide span.icon{margin: 17px 20px;float: right;}.vertical-nav > li.showhide .icon em{margin-bottom: 3px;display: block;width: 20px;height: 2px;background: #ccc;}.410022 a{color: #000;}.410020 ul a:focus,.410020 ul a:hover,.410020 ul a:active{color: #000 !important;}li.410021{color: #000}.410020 li li{text-transform: none;}.410020 li li li{background: #FFF}.410020 ul a{color: #999;padding: 1em 1.2em}.410022 ul a{color: #000 !important;}.vertical-nav.dark, .vertical-nav.dark ul, .vertical-nav.dark ul li ul{background: #222!important;}.vertical-nav.dark > li.showhide{background: #222;color: #fff !important;}.vertical-nav.dark > li.showhide .icon em{background: #fff;}.410020 a.410023{padding-right: 2.25em;min-width: 1px;}.410024{position: absolute;display: block;right: .75em;width: 9px;height: 5px;text-indent: -999em;overflow: hidden;background: url(&#39;images/arrows-down.png&#39;);}a > .410024{top: .4em;background-position: 0 -100px;}a:focus > .410024,a:hover > .410024,a:active > .410024,li:hover > a > .410024,li.410021 > a > .410024{background-position: -9px 0px;}.red li:hover > a > i, .red li.active > a > i{background: #e74c3c;color: #fff!important;}.red li:hover > a{color: #e74c3c;}.410020 ul .410024{top: 1em;width: 5px;height: 9px;background: url(&#39;images/arrows-side.png&#39;);}.410020 ul a > .410024{background-position: 0 0}.410020 ul a:focus > .410024,.410020 ul a:hover > .410024,.410020 ul a:active > .410024,.410020 ul li:hover > a > .410024,.410020 ul li.410021 > a > .410024{background-position: -5px 0;}#sdgagdgd10008{margin-bottom: 40px;}.410025{float: left;width: 290px;margin-right: 25px;text-align: center;}.410025 h2{font-size: 16px;font-weight: bold;margin-bottom: 20px;}#sdgagdgd10009 h2{font-size: 14px;font-style: normal;margin-bottom: 20px;}#sdgagdgd10010{}#portfolio-group{margin: 40px 0px;}#sdgagdgd10011{list-style: none;}#sdgagdgd10011 a{font-size: 10px;font-weight: bold;float: left;padding: 5px 10px;margin-right: 5px;margin-bottom: 5px;cursor: pointer;color: #969696;background: -moz-linear-gradient( top, #f2f2f2 0%, #dbdbdb);background: -webkit-gradient( linear, left top, left bottom, from(#f2f2f2), to(#dbdbdb));border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #CCC;text-shadow: 1px 1px 1px #FFF;}@media (max-width: 768px){.vertical-nav,.vertical-nav li{width: 100%;}.vertical-nav > li > a{padding-top:15px;padding-bottom:15px;padding-left: 25px;}.vertical-nav a{width: 100%;}.vertical-nav ul, .vertical-nav ul li ul{width: 100%;left: 0;border-left: none;position: static;}.vertical-nav ul li{background: #e9e9e9;}.vertical-nav.dark ul li{background: #333;}.vertical-nav ul li a{padding-top:10px;padding-bottom:10px;}.vertical-nav > li i{margin: -16px 14px 0 -25px;}.vertical-nav > li > ul > li > a{padding-left: 40px !important;}.vertical-nav > li > ul > li > ul > li > a{padding-left: 60px !important;}.vertical-nav > li > ul > li > ul > li > ul > li > a{padding-left: 80px !important;}.vertical-nav .submenu-icon{margin-right: 5px;}.vertical-nav ul .submenu-icon{display: none;}}#sdgagdgd10011 a:hover{background: #EEE;color: #666;}#sdgagdgd10011 a span{display: block;border-top: 1px solid #FFF;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}.410026{position: relative;float: left;width: 150px;margin-right: 20px;margin-bottom: 20px;cursor: pointer;}.410026 img{}.overlay{background: url(images/overlay-bg.png) repeat;width: 150px;height: 120px;position: absolute;display: none;left: 0;top: 0;}.410027 p{margin-top: 45px;margin-left: 40px;}.410028,.410029{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity: 0.60;-khtml-opacity: 0.60;opacity: 0.60;}.410028:hover,.410029:hover{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);-moz-opacity: 0.80;-khtml-opacity: 0.80;opacity: 0.80;}.410028{display: block;float: left;margin-right: 10px;text-indent: -99999px;width: 32px;height: 32px;background: url(images/overlay-image.png);}.410029{display: block;float: left;text-indent: -99999px;width: 32px;height: 32px;background: url(images/overlay-link.png);}#sdgagdgd10012{float: left;width: 200px;}#sdgagdgd10013{float: right;width: 400px;}#sdgagdgd10014{padding: 25px 0;}#sdgagdgd10015 a,#sdgagdgd10016 a{display:block;float: left;height:30px;width:30px;margin-right: 5px;background:url(images/bx-arrows.png) no-repeat}#sdgagdgd10016 a{background-position: -30px 0;}#sdgagdgd10015 a:hover{background-position: 0px -30px;}#sdgagdgd10016 a:hover{background-position:  -30px;}#sdgagdgd10017{position: relative;width: 660px;height: 350px;}.410030{position: relative}.410030 img{position: absolute;top: 0px;left: 0px;z-index: 6;}.410030 a.410031{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;border: 0;padding: 0;margin: 0;z-index: 6;display: none;}.410032{display: block;position: absolute;z-index: 5;height: 100%;}.410033{display: block;position: absolute;z-index: 5;}.410034{position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;width:100%;z-index:8;}.410034 p{padding:5px;margin:0;}.410034 a{display:inline !important;}.410035{display:none;}.410036 a{position: absolute;top: 45%;z-index: 9;cursor: pointer;}.410037{left: 0px}.410038{right: 0px}.410039 a{position: relative;z-index: 9;cursor: pointer;}.410039 a.410040{font-weight: bold}.410036 a{display: block;width: 20px;height: 40px;background: url(images/slider-arrows.png) no-repeat;text-indent: -9999px;border: 0;-webkit-transition: hover 0.2s ease-in-out;-moz-transition: hover 0.2s ease-in-out;-o-transition: hover 0.2s ease-in-out;-ms-transition: hover 0.2s ease-in-out;transition: hover 0.2s ease-in-out;}.410036 a:hover{background: url(images/slider-arrows-hover.png) no-repeat;}a.410038{background-position: -20px 0 !important;right: -20px;}a.410037{left: -20px}#sdgagdgd10018{}.post-entry{margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #EEE;}.410041{margin-bottom: 20px;}.410042{float: left;height: 150px;width: 150px;}.410043{float: right;width: 480px;}#sdgagdgd10018 ul,ol{margin-left: 50px;margin-bottom: 10px;}.410044,.410045{background: #F9F9F9;font-size: 11px;color: #999;padding: 5px;margin: 8px 0px;text-shadow: 1px 1px 1px #FFF;letter-spacing: 1px;}.410044 a,.410045 a,.410044 span,.410045 span{color: #000;}.410045{margin-bottom: 20px !important;}.410046{margin-right: 10px;margin-top: 30px;font-size: 12px;}.410046 a{margin-left: 5px;}#sdgagdgd10018 h1{margin-bottom: 0px}.410047 h2{line-height: 1.2em;margin: 0 !important;font-size: 21px;}.410047 h2 a{text-decoration: none;}.410048{margin-bottom: 20px !important;}#sdgagdgd10019{font-size: 14px;padding: 20px 0px;margin-bottom: 40px;border-bottom: 1px dotted #CCC;}#sdgagdgd10019 p{margin: 0;padding: 0;}#sdgagdgd10020{margin-bottom: 20px;}#sdgagdgd10021{float: left;width: 50%;}#sdgagdgd10022{float: right;width: 50%;text-align: right;}#sdgagdgd10021 a{float: left;}#sdgagdgd10022 a{float: right !important;}#sdgagdgd10023{background: #F9F9F9;margin: 30px 0px;padding: 20px;border-top: 1px solid #EEE;border-bottom: 1px solid #EEE;}#sdgagdgd10024{float: left;width: 70px;}#sdgagdgd10024 img{padding: 3px;border: 1px solid #CCC;}#sdgagdgd10025{float: right;width: 540px;}#sdgagdgd10023 h4{margin-top: 0px;margin-bottom: 5px;}#sdgagdgd10026{margin: 20px 0;padding-bottom: 20px;border-bottom: 1px solid #EEE;color: #999;}.410049{margin-bottom: 20px}.410050{float: left;width: 60px;margin-right: 20px;}.410050 img{padding: 3px;border: 1px solid #EEE;}.410051{float: right;width: 580px;}#sdgagdgd10026 h3{margin: 0 0 20px}#sdgagdgd10026 h4{font-size: 12px;font-style: normal;margin-top: 0px;margin-bottom: 5px;}#sdgagdgd10026 h4 a:hover{text-decoration: none;}#sdgagdgd10027{}#commentsbox{margin-top: 30px}#sdgagdgd10028 ol,#sdgagdgd10028 ul{list-style: none;margin-left: 0 !important;}#sdgagdgd10028 li{margin-bottom: 30px}.410052{list-style: none;margin: 30px 0 0;text-indent: 0;}.410052 li.410053{margin: 0 0 0px 50px}.410052 li.410054{margin: 0 0 0px 50px}.410052 li.410055{margin: 0 0 0px 50px}.410052 li.410056{margin: 0 0 0px 50px}.410057{background: #FFF;position: relative;padding: 20px;border-bottom: 1px dashed #E3E3E3;}#sdgagdgd10028 .410058{float: left;margin-right: 30px;}.410059{font-size: 12px;color: #000;line-height: 1em;margin-bottom: 5px;}.410060{display: none}.410061 a{margin-bottom: 10px;font-size: 10px;font-style: italic;color: #666;}.410062{font-size: 10px;position: absolute;bottom: -10px;right: 0;border: 1px solid #E3E3E3;padding: 0 8px;background: #EEE;color: #666;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}.410063 a{color: #F00;line-height: 20px;height: 20px;}.410063 a:hover{text-decoration: underline;}#sdgagdgd10029{margin: 40px 0 15px}#sdgagdgd10030{margin: 0 0 10px;padding: 0;clear: both;}#sdgagdgd10031 label{display: block;font-size: 11px;}#sdgagdgd10031 input{margin-bottom: 10px;width: 40%;}#sdgagdgd10031 textarea{margin-top: 10px;display: block;width: 70%;}#sdgagdgd10031 input#sdgagdgd10032,#sdgagdgd10031 input#sdgagdgd10033,#sdgagdgd10031 input#sdgagdgd10034,#sdgagdgd10031 textarea{background: #FFF;position: relative;padding: 5px;border: 1px solid #E3E3E3;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}#sdgagdgd10031 input#sdgagdgd10032:focus,#sdgagdgd10031 input#sdgagdgd10033:focus,#sdgagdgd10031 input#sdgagdgd10034:focus,#sdgagdgd10031 textarea:focus{-moz-box-shadow: 3px 3px 0px #EEE;-webkit-box-shadow: 3px 3px 0px #EEE;box-shadow: 3px 3px 0px #EEE;}#sdgagdgd10035{cursor: pointer;font-size: 12px;color: #969696;padding: 5px 0px;width: 100px !important;background: -moz-linear-gradient( top, #f2f2f2 0%, #dbdbdb);background: -webkit-gradient( linear, left top, left bottom, from(#f2f2f2), to(#dbdbdb));border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #CCC;}#sdgagdgd10035:hover{background: #EEE !important}.410064{position: absolute;left: 0;bottom: 0;color: #EEE;}body{margin: 0;padding: 0;background: #dedede url(img/back.png) repeat;}.content{margin: 10px 50px 0 50px;}.panel{position:relative;top:0;width:auto;margin:40px 0;}.panel a{display: inline-block;width:20px;margin: 0;height:20px;outline:none;border-radius:2px;}.panel a:nth-child(1){background: #95a5a6;}.panel a:nth-child(2){background: #3498db;}.panel a:nth-child(3){background: #075395;}.panel a:nth-child(4){background: #2ecc71;}.panel a:nth-child(5){background: #299a0b;}.panel a:nth-child(6){background: #e74c3c;}.panel a:nth-child(7){background: #a90329;}.panel a:nth-child(8){background: #9b59b6;}.panel a:nth-child(9){background: #ff5db1;}.panel a:nth-child(10){background: #f39c12;}.panel a:nth-child(11){background: #ca4a00;}.panel a:nth-child(12){background: #ffcf41;}.vertical-nav{margin: 20px 0 0 0;}

3、效果：

利用CSS实现几款不错的菜单栏实例代码

三、立体动感菜单

1、代码：


76c82f278ac045591c9159d381de2c57
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7纯CSS3实现的动感菜单6e916e0f7d1e588d4f442bf645aedb2f

46d5fe1c7617e3914f214aaf043f4ccf

* { margin:0;
    padding:0;
}

html {height: 100%;}

body{
    position: relative;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));

}

.navbox {
    position: relative;
    float: left;
}

ul.nav {
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    top: 100px;
    left: 100px;
    padding: 60px 0 60px 0;
    background: url(images/shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
}

li {
    margin: 5px 0 0 0;
}

ul.nav li a {
    -webkit-transition: all 0.3s ease-out;
    background: #cbcbcb url(images/border.png) no-repeat;
    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 10px;
     -webkit-border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
    background: #ebebeb url(images/border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}

531ac245ce3e4fe3d50054a55f265927

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

2e6f147cf20d74c29d94b85ca47a9b8b
9a2d986b0a01d0ca882b4d7eaaacb8b8
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cXHTML5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cC++5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cMootools5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cHTML55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cCSS5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cjQuery5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cAjax5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cPHP5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cPerl5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
94b3e26ee717c64999d7867364b1b4a3

2e6f147cf20d74c29d94b85ca47a9b8b
9a2d986b0a01d0ca882b4d7eaaacb8b8
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cXHTML5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cHTML55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cCSS5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cjQuery5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cAjax5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cPHP5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
94b3e26ee717c64999d7867364b1b4a3

2e6f147cf20d74c29d94b85ca47a9b8b
9a2d986b0a01d0ca882b4d7eaaacb8b8
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cXHTML5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cHTML55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cCSS5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e


2、效果：

利用CSS实现几款不错的菜单栏实例代码

四、可同时折叠的手风琴菜单

1、代码：


76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

  a80eb7cbb6fff8b0ff70bae37074b813

  b2386ffb911b14667cb8f0f91ea547a7CSS3手风琴菜单6e916e0f7d1e588d4f442bf645aedb2f

    36952127f277482c9572f32ca18df48d

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
e3eeb1d186a9e4c7b11c5a63ac0e3e27
25df52310f9bc09f959b9809e995a0b42cacc6d41bbb37262a98f745aa00fbf0
5651e80008736cbc7be5d90639cf1d372cacc6d41bbb37262a98f745aa00fbf0
94b3e26ee717c64999d7867364b1b4a3
  ff6d136ddc5fdfeffaf53ff6ee95f185
    f8fe0e5f6a583f9c5eae19f51d183c54
        0a640adf6ad753f11c4c1aa34cce7a1b   
        fc5ded0c58c940656db21ecb5557dfbaeb1db1a387ad34a7c4e9fbe6b0335beb72ac96585ae54b6ae11f849d2649d9e6 Friends 45a2772a6b6107b401db3c9b82c049c212454bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
        886af71058ee51f47759f2540030bbee
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812fa43a36296e324e12d8bebf08ffbc90272ac96585ae54b6ae11f849d2649d9e6 Find New Friends5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812c79e2d4e18bec4bc93efed674de0b13772ac96585ae54b6ae11f849d2649d9e6 Poke A Friend5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812c08e31480af70cf4f6a247d152b8389a72ac96585ae54b6ae11f849d2649d9e6 Incinerate Existing Friends5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    bed06894275b65c1ab86501b08a632eb
    f8fe0e5f6a583f9c5eae19f51d183c54
        6849028d014c696a535c4b01cb1e7d45   
        c161d7fd0a8d4dd417c8488fb59c4ec9063582220be975b95194698e6e3571bd72ac96585ae54b6ae11f849d2649d9e6 Videos 45a2772a6b6107b401db3c9b82c049c21,03454bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
        886af71058ee51f47759f2540030bbee
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812eb249aad8615847aba7d14b6f7f9ceec72ac96585ae54b6ae11f849d2649d9e6 My Videos 45a2772a6b6107b401db3c9b82c049c2754bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8122a858fc22f5bbf3cfa15ed2da1f0c75d72ac96585ae54b6ae11f849d2649d9e6 My Downloaded Videos 45a2772a6b6107b401db3c9b82c049c2354bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812ced1e8a3c2d3e18d680adebe49efef1872ac96585ae54b6ae11f849d2649d9e6 My Well Dodgy Videos 45a2772a6b6107b401db3c9b82c049c21,02454bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    bed06894275b65c1ab86501b08a632eb
    f8fe0e5f6a583f9c5eae19f51d183c54
        12e45a8fbfd5acc5ec4f98fd3bd59e2f   
        34e6f4ad56ee2db702dcfef8ebac5a09c9ca71804febfdf94fc9a322f6eb9f5a72ac96585ae54b6ae11f849d2649d9e6 Galleries 45a2772a6b6107b401db3c9b82c049c2454bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
        886af71058ee51f47759f2540030bbee
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca73108631737f9abc07ca18e60d99928054edae72ac96585ae54b6ae11f849d2649d9e6 My Deviant Art5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca7310864178c70e04c793fb5f8e1cde8a0dabc972ac96585ae54b6ae11f849d2649d9e6 Latest Dribbble Images5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca731086be5281fa537c94853610b485bedf6a1072ac96585ae54b6ae11f849d2649d9e6 Sample Flickr Stream5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca73108675af91e846faa814baccfc29ffea633372ac96585ae54b6ae11f849d2649d9e6 Sample Picasa Stream5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    bed06894275b65c1ab86501b08a632eb
    f8fe0e5f6a583f9c5eae19f51d183c54
        3666a41c96ecf0185a8f5a4ff65898b3   
        b1d58d4d1b95aa60f66aa7a492a36fad1b81ad311aa49d92411d8bc8b8448d5d72ac96585ae54b6ae11f849d2649d9e6 Podcasts 45a2772a6b6107b401db3c9b82c049c2154bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
        886af71058ee51f47759f2540030bbee
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca731086b1867d9d83036104d60eaf77dcfeb42772ac96585ae54b6ae11f849d2649d9e6 CSS-Tricks5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    bed06894275b65c1ab86501b08a632eb
    f8fe0e5f6a583f9c5eae19f51d183c54
        096f80851ecddc82174617856d6e70b5   
        fedfce7db445165d4e70d87004df0a61481ee687da572184e87dd6dd64c0a85e72ac96585ae54b6ae11f849d2649d9e6 Robots 45a2772a6b6107b401db3c9b82c049c2354bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
        886af71058ee51f47759f2540030bbee
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca731086aa9b1942f6f5677577c15f9d6a9cf7ef72ac96585ae54b6ae11f849d2649d9e6 Hal 90005db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca731086f4d742863a9df1d25626d66ebb8b02bb72ac96585ae54b6ae11f849d2649d9e6 Skynet5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c64ef30f6579264e6178d2706aca7310867a51d45a317de07a99ad004e3577284172ac96585ae54b6ae11f849d2649d9e6 Johnny 55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e


2、效果：

利用CSS实现几款不错的菜单栏实例代码

五、鼠标滑动展开二级菜单

1、代码：


76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

  a80eb7cbb6fff8b0ff70bae37074b813

  b2386ffb911b14667cb8f0f91ea547a7纯CSS3垂直动画菜单6e916e0f7d1e588d4f442bf645aedb2f

  16ce861090243002c1e38e571c4f24a4
44eb427a78bc6d84ae441348e56f004c

    36952127f277482c9572f32ca18df48d

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

  e8f5c74c2e445a663d1be11ec1ea30fb
c787b9a589a3ece771e842a6176cf8e9
        f9bd9c5062fd92a7136b6acf72f0410e
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    7b2098fd96b2e89e3f2f533e52c5fb6b72ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143Home128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85sweet home7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                c9f449c1a01ccf0887dc83f90ca26c4b
                    28f4dd2af4a15f40a9a505f6799b022172ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143About us128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85sweet home7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    fae6243a50e93f44f4e400ba8bca200072ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143Features128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85sweet home7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    07f4321e492283cd6cc5c946157b327772ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143News128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85sweet home7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    bfe73e20f85e4a383e19bb753e4cc09372ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143Blog128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85what they say7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
                ff6d136ddc5fdfeffaf53ff6ee95f185
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81207f4321e492283cd6cc5c946157b327772ac96585ae54b6ae11f849d2649d9e6Mission5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6
                        f1b3ba8846c179e65eb68da95b01a812c4d1df2dcf45d27d109ee922b9cf14dc72ac96585ae54b6ae11f849d2649d9e6Our Team5db79b134e9f6b82c0b36e0489ee08ed
                        ff6d136ddc5fdfeffaf53ff6ee95f185
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812d4e0eff559efa30c1b8b803c2631ba0d72ac96585ae54b6ae11f849d2649d9e6Leyla Sparks5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                            25edfb22a4f469ecb59f1190150159c6
                                f1b3ba8846c179e65eb68da95b01a8120a934318c9066add5de869141569dd3a72ac96585ae54b6ae11f849d2649d9e6Gleb Ismailov5db79b134e9f6b82c0b36e0489ee08ed
                                ff6d136ddc5fdfeffaf53ff6ee95f185
                                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812738fe8f086471f308b826ced166e3c0572ac96585ae54b6ae11f849d2649d9e6About5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8128d3db53556148a8a9ef35ab4c8816aa572ac96585ae54b6ae11f849d2649d9e6Skills5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                                929d1f5ca49e04fdcb27f9465b944689
                            bed06894275b65c1ab86501b08a632eb
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812d4e0eff559efa30c1b8b803c2631ba0d72ac96585ae54b6ae11f849d2649d9e6Viktoria Gibbers5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                        929d1f5ca49e04fdcb27f9465b944689
                    bed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8121ce59e0355b5da01665fcaa5747fbe1372ac96585ae54b6ae11f849d2649d9e6Rewards5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8129b481c4e311463306fcca6bd2302f7c772ac96585ae54b6ae11f849d2649d9e6Certificates5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                929d1f5ca49e04fdcb27f9465b944689
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    fab4202c3cbbb0b7a4610ebb5f040b3b72ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143Portfolio128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85sweet home7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                6170e8999ab19ec641e0422470b16d5c
                    fd3f65f42a5fd8920926694e4265129272ac96585ae54b6ae11f849d2649d9e6
                    8e99a69fbe029cd4e2b854e244eab143Contacts128dba7a3a77be0113eb0bea6ea0a5d0
                    d015d241ae6d34c34210679b5204fe85drop a line7552a991a706bdbcb00625c14ce34064
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            22e5fc4f2459826d9b31f0b9686e680b
                60aa0aa155664eca67124e35ff2b660c
                    344fde6c1e80515067f6165cc3316df0
                    bb9345e55eb71822850ff156dfde57c8c0c1599719c55f6d9aca1a8f4a72458b72ac96585ae54b6ae11f849d2649d9e665281c5ac262bf6d81768915a4a77ac0
                5db79b134e9f6b82c0b36e0489ee08ed
                e6fc4a9ce011898b14288a4eaf70c609
                    c0c1599719c55f6d9aca1a8f4a72458b72ac96585ae54b6ae11f849d2649d9e6
                5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    44f9630a3d507ae7532760da37622b0f
94b3e26ee717c64999d7867364b1b4a3
e3eeb1d186a9e4c7b11c5a63ac0e3e27
25df52310f9bc09f959b9809e995a0b42cacc6d41bbb37262a98f745aa00fbf0
5651e80008736cbc7be5d90639cf1d372cacc6d41bbb37262a98f745aa00fbf0
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e


2、效果：

利用CSS实现几款不错的菜单栏实例代码

六、垂直多级菜单，显示未读数目和折叠

1、代码：


76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
4d0d87937f6c83b675e896c64d3eb7c9
afa271de0f8545efce87a5ab56237fe8
b2386ffb911b14667cb8f0f91ea547a7jQuery 3D 垂直多级菜单 可筛选菜单6e916e0f7d1e588d4f442bf645aedb2f

e6c792fa0046f8d700ca40b0c9e8ff76
2d37abb941102c73710b1023e95df5e0

46d5fe1c7617e3914f214aaf043f4ccf
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
body{background:#f0f0f0;}
.content{width:260px;margin:20px auto;}
.filterinput{
    background-color:rgba(249, 244, 244, 0);
    border-radius:15px;
    width:90%;
    height:30px;
    border:thin solid #FFF;
    text-indent:0.5em;
    font-weight:bold;
    color:#FFF;
}
#demo-list a{
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
}
531ac245ce3e4fe3d50054a55f265927

a54d6f3cd66a5f267c89212c8ec77db12cacc6d41bbb37262a98f745aa00fbf0
543b28bcdff009c5347912cbd6e0a0ce2cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a

$(function(){    
    //顶部导航切换
    $("#demo-list li").click(function(){
        $("#demo-list li.active").removeClass("active")
        $(this).addClass("active");
    })    
})    
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e3eeb1d186a9e4c7b11c5a63ac0e3e27
25df52310f9bc09f959b9809e995a0b42cacc6d41bbb37262a98f745aa00fbf0
5651e80008736cbc7be5d90639cf1d372cacc6d41bbb37262a98f745aa00fbf0
94b3e26ee717c64999d7867364b1b4a3
bf6874f3abc615a5ee665c11de5510df

    269d3f8d6710bf65722ad5fa1a750623
        8b5205463d00efbffd5b014d8456953f94b3e26ee717c64999d7867364b1b4a3
        4c87a93b5fdda0e3ddc3fdfe6e642cd8
         
           6072cf9f6bd7b20ca2e4e430b3e487adf1b3ba8846c179e65eb68da95b01a8127b2098fd96b2e89e3f2f533e52c5fb6b72ac96585ae54b6ae11f849d2649d9e6Home 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81255d15f7758dec86b44829b1ed6d4d25972ac96585ae54b6ae11f849d2649d9e6Events 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812ee17244bfca1d4940f0d8f28f250375072ac96585ae54b6ae11f849d2649d9e6Gallery 5db79b134e9f6b82c0b36e0489ee08ed52aded8fb1fa41b8d5be006d56e04cbe
                12 54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81258c4b73a5d81d3da4976a9d3ee3de84372ac96585ae54b6ae11f849d2649d9e6Services 5db79b134e9f6b82c0b36e0489ee08ed
                3bdd1160c5aebc301d23f58d2882750a
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Web Design 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Hosting 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Design 5db79b134e9f6b82c0b36e0489ee08ed
                        3bdd1160c5aebc301d23f58d2882750a
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Graphics 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Vectors 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Photoshop 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Fonts 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                        929d1f5ca49e04fdcb27f9465b944689
                    bed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Consulting 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                929d1f5ca49e04fdcb27f9465b944689
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8127b2098fd96b2e89e3f2f533e52c5fb6b72ac96585ae54b6ae11f849d2649d9e6系统管理 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81245445184bcfd89da768ce111cd0625a072ac96585ae54b6ae11f849d2649d9e6Portfolio 5db79b134e9f6b82c0b36e0489ee08ed
                3bdd1160c5aebc301d23f58d2882750a
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Web Design 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Graphics 5db79b134e9f6b82c0b36e0489ee08ed52aded8fb1fa41b8d5be006d56e04cbe10 54bdf357c58b8a65c66d7c19c8e4d114
                    bed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Photoshop 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Programming 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
                929d1f5ca49e04fdcb27f9465b944689
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812ef421a915f6358da86344abad698a92672ac96585ae54b6ae11f849d2649d9e6About 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812fc9252562530a0dbc35699df62992d5c72ac96585ae54b6ae11f849d2649d9e6Contact 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
           
        929d1f5ca49e04fdcb27f9465b944689
        41eb599ee0a0fae6c543a3f777355a4d
            Footer
        94b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

8019067d09615e43c7904885b5246f0a
(function($) {
$.expr[":"].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(header, list) {
    //@header 头部元素
    //@list 无需列表
    //创建一个搜素表单
    var form = $("ff9c23ada1bcecdd1a0fb5d5a0f18437").attr({
        "class":"filterform",
        action:"#"
    }), input = $("d5fd7aea971a85678ba271703566ebfd").attr({
        "class":"filterinput",
        type:"text"
    });
    $(form).append(input).appendTo(header);
    $(input).change(function() {
        var filter = $(this).val();
        if (filter) {
            $matches = $(list).find("a:Contains(" + filter + ")").parent();
            $("li", list).not($matches).slideUp();
            $matches.slideDown();
        } else {
            $(list).find("li").slideDown();
        }
        return false;
    }).keyup(function() {
        $(this).change();
    });
}
$(function() {
    filterList($("#form"), $("#demo-list"));
});
})(jQuery);    
2cacc6d41bbb37262a98f745aa00fbf0

8019067d09615e43c7904885b5246f0a

    jQuery("#jquery-accordion-menu").jqueryAccordionMenu();
    
2cacc6d41bbb37262a98f745aa00fbf0

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e


2、效果：

利用CSS实现几款不错的菜单栏实例代码


更多利用CSS实现几款不错的菜单栏实例代码相关文章请关注PHP中文网！


声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
光标的下一个CSS样式光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIICSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放：走向理智的旅程感觉就像我没有释放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
显示更多

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7698
15
Java教程
1640
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1229
29
显示更多