CSS3实现黑色带图标导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现黑色带图标导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3实现黑色带图标导航</title>
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
body {
	margin: 5px;
	
}
ul.menu {
	margin: 50px auto 0 auto;
}
</style>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<ul class="menu">
  <li><a href="http://www.baidu.com">首页</a></li>
  <li><a href="http://www.baidu.com">标题</a></li>
  <li><a href="http://www.baidu.com">站长之家</a>
    <ul>
      <li><a href="http://www.baidu.com" class="documents">Jquery知识</a></li>
      <li><a href="http://www.baidu.com" class="messages">div+css</a></li>
      <li><a href="http://www.baidu.com" class="signout">javascript</a></li>
    </ul>
  </li>
  <li><a href="http://www.baidu.com">资料库</a>
    <ul>
      <li><a href="http://www.baidu.com" class="documents">Jquery教程</a></li>
      <li><a href="http://www.baidu.com" class="messages">html5</a></li>
      <li><a href="http://www.baidu.com" class="signout">css3</a></li>
    </ul>
  </li>
  <li><a href="http://www.baidu.com">标题</a></li>
</ul>
</body>
</html>

CSS代码(style.css):

/* Reset */
*{margin:0;padding:0;border:none;outline:none;}
/* Menu */
.menu{height:40px;width:505px;background:#4c4e5a;background:-webkit-linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);background:-moz-linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);background:-o-linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);background:-ms-linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);background:linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.menu li{position:relative;list-style:none;float:left;display:block;height:40px;}
/* Links */
.menu li a{display:block;padding:0 14px;margin:6px 0;line-height:28px;text-decoration:none;border-left:1px solid #393942;border-right:1px solid #4f5058;font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:13px;color:#f3f3f3;text-shadow:1px 1px 1px rgba(0,0,0,.6);-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;}
.menu li:first-child a{border-left:none;}
.menu li:last-child a{border-right:none;}
.menu li:hover > a{color:#8fde62;}
/* Sub Menu */
.menu ul{position:absolute;top:40px;left:0;opacity:0;background:#1f2024;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:opacity .25s ease .1s;-moz-transition:opacity .25s ease .1s;-o-transition:opacity .25s ease .1s;-ms-transition:opacity .25s ease .1s;transition:opacity .25s ease .1s;}
.menu li:hover > ul{opacity:1;}
.menu ul li{height:0;overflow:hidden;padding:0;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;}
.menu li:hover > ul li{height:36px;overflow:visible;padding:0;}
.menu ul li a{width:100px;padding:4px 0 4px 40px;margin:0;border:none;border-bottom:1px solid #353539;}
.menu ul li:last-child a{border:none;}
/* Icons */
.menu a.documents{background:url(../img/docs.png) no-repeat 6px center;}
.menu a.messages{background:url(../img/bubble.png) no-repeat 6px center;}
.menu a.signout{background:url(../img/arrow.png) no-repeat 6px center;}

附件:下载该文件资源,减少时间成本(增值服务)