网页状态栏图标html代码,利用CSS实现几款不错的菜单栏实例代码

前言

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

一、滑动菜单

1、代码：

纯CSS3垂直菜单 菜单项滑动动画DEMO演示

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 > div {

width: 100%;

}

.ribbon_rail > div:before,

.ribbon_rail > div: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 > div:before {

right: 100%;

border-left-color: transparent;

margin-right: -10px;

}

.ribbon_rail > div: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;

}

• Steve Careless
• Hank Azarena
• Joan Rivals
• Johnny Dip
• Gwyneth Patron

2、效果

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

1、HTML代码：

jQuery左侧带小图标的多级下拉菜单DEMO演示

• 首页
• 服务
  • 二级导航
  • 二级导航
  • 二级导航
  • 二级导航
  • 二级导航
  • 二级导航
• 产品
  • 二级导航
  • 二级导航
  • 二级导航
    • 三级导航
    • 三级导航
    • 三级导航
      • 四级导航
      • 四级导航
      • 四级导航
      • 四级导航
    • 三级导航
  • 二级导航
  • 二级导航
• 关于我们
• 博客
• 导航
• 信息
• 团队
• 常见问题
• 案例
• 联系我们

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, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

div {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}

@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;

}

<