您的位置：首页 > Web前端 > > 正文

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

更多时间：2022-01-23 02:27:19 类别：Web前端浏览量：711

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 > li {
    width: 100%;
}
.ribbon_rail > li:before,
    .ribbon_rail > li: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 > li:before {
    right: 100%;
    border-left-color: transparent;
    margin-right: -10px;
}
.ribbon_rail > li: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>
<li 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>
            <li class="ribbon_wrap">
                <li class="ribbon_rail">
                    <li></li>
                </li>
            </li>
        </ul>
    </section>
    <li 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>
</li>
</li>
</body>
</html>

2、效果

css实现隐藏菜单（利用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>
<li 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>
</li>
<li class="kePublic">
<!--效果html开始-->
<li 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>
</li>
<!--效果html结束-->
<li class="clear"></li>
</li>

</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, li, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
li {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}</p> <p>@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.jpg" alt="css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）" border="0" /> 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: 'FontAwesome';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: 'Droid Sans', 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('images/arrows-down.jpg" alt="css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）" border="0" />

3、效果：

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

三、立体动感菜单

1、代码：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的动感菜单</title>

<style type="text/css">

* { 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.jpg" alt="css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）" border="0" />

2、效果：

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

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

1、代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3手风琴菜单</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<li 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>
</li>
  <ul>
    <li class="block">
        <input type="checkbox" name="item" id="item1" />   
        <label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label>
        <ul class="options">
            <li><a href="#"><i aria-hidden="true" class="icon-search"></i> Find New Friends</a></li>
            <li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>
            <li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>
        </ul>
    </li>
    <li class="block">
        <input type="checkbox" name="item" id="item2" />   
        <label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label>
        <ul class="options">
            <li><a href="#"><i aria-hidden="true" class="icon-movie"></i> My Videos <span>7</span></a></li>
            <li><a href="#"><i aria-hidden="true" class="icon-download"></i> My Downloaded Videos <span>3</span></a></li>
            <li><a href="#"><i aria-hidden="true" class="icon-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li>
        </ul>
    </li>
    <li class="block">
        <input type="checkbox" name="item" id="item3" />   
        <label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label>
        <ul class="options">
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-deviantart"></i> My Deviant Art</a></li>
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-dribbble"></i> Latest Dribbble Images</a></li>
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-flickr"></i> Sample Flickr Stream</a></li>
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-picassa"></i> Sample Picasa Stream</a></li>
        </ul>
    </li>
    <li class="block">
        <input type="checkbox" name="item" id="item4" />   
        <label for="item4"><i aria-hidden="true" class="icon-microphone"></i> Podcasts <span>1</span></label>
        <ul class="options">
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-music"></i> CSS-Tricks</a></li>
        </ul>
    </li>
    <li class="block">
        <input type="checkbox" name="item" id="item5" />   
        <label for="item5"><i aria-hidden="true" class="icon-android"></i> Robots <span>3</span></label>
        <ul class="options">
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-eye"></i> Hal 9000</a></li>
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-cloud"></i> Skynet</a></li>
            <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-reddit"></i> Johnny 5</a></li>
        </ul>
    </li>
</ul>

</body>

</html>

2、效果：

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

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

1、代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>纯CSS3垂直动画菜单</title>

  <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://puertokhalid.com/up/demos/puerto-Mega_Menu/css/normalize.css'>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <li class="container">
<nav>
        <ul class="mcd-menu">
            <li>
                <a href="">
                    <i class="fa fa-home"></i>
                    <strong>Home</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="" class="active">
                    <i class="fa fa-edit"></i>
                    <strong>About us</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa.jpg" alt="css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）" border="0" />

2、效果：

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

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

1、代码：

<!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 3D 垂直多级菜单 可筛选菜单</title>

<link href="css/jquery-accordion-menu.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />

<style type="text/css">
*{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%;
}
</style>

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/jquery-accordion-menu.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){    
    //顶部导航切换
    $("#demo-list li").click(function(){
        $("#demo-list li.active").removeClass("active")
        $(this).addClass("active");
    })    
})    
</script>
</head>
<body>
<li 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>
</li>
<li class="content">

    <li id="jquery-accordion-menu" class="jquery-accordion-menu red">
        <li class="jquery-accordion-menu-header" id="form"></li>
        <ul id="demo-list">
         
           <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li>
            <li><a href="#"><i class="fa fa-glass"></i>Events </a></li>
            <li><a href="#"><i class="fa fa-file-image-o"></i>Gallery </a><span class="jquery-accordion-menu-label">
                12 </span></li>
            <li><a href="#"><i class="fa fa-cog"></i>Services </a>
                <ul class="submenu">
                    <li><a href="#">Web Design </a></li>
                    <li><a href="#">Hosting </a></li>
                    <li><a href="#">Design </a>
                        <ul class="submenu">
                            <li><a href="#">Graphics </a></li>
                            <li><a href="#">Vectors </a></li>
                            <li><a href="#">Photoshop </a></li>
                            <li><a href="#">Fonts </a></li>
                        </ul>
                    </li>
                    <li><a href="#">Consulting </a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-home"></i>系统管理 </a></li>
            <li><a href="#"><i class="fa fa-suitcase"></i>Portfolio </a>
                <ul class="submenu">
                    <li><a href="#">Web Design </a></li>
                    <li><a href="#">Graphics </a><span class="jquery-accordion-menu-label">10 </span>
                    </li>
                    <li><a href="#">Photoshop </a></li>
                    <li><a href="#">Programming </a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-user"></i>About </a></li>
            <li><a href="#"><i class="fa fa-envelope"></i>Contact </a></li>
           
        </ul>
        <li class="jquery-accordion-menu-footer">
            Footer
        </li>
    </li>
</li>

<script type="text/javascript">
(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 = $("<form>").attr({
        "class":"filterform",
        action:"#"
    }), input = $("<input>").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);    
</script>

<script type="text/javascript">

    jQuery("#jquery-accordion-menu").jqueryAccordionMenu();
    
</script>

</body>
</html>

2、效果：

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

总结

其实还有很多很多，这里就不一一列举出来了，还有这里的代码可能不全面，有问题的话大家可以留言交流，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，谢谢大家对开心学习网的支持。

标签：菜单栏 css

上一篇：linux下安装nginx常见问题（Linux安装Nginx步骤详解）

下一篇：phpdate函数使用方法（PHP中strtr与str_replace函数运行性能简单测试示例）

您可能感兴趣

css实现隐藏菜单（利用CSS实现几款不错的菜单栏实例代码）

css实现隐藏菜单

热门推荐

排行榜