以下是 CSS3实现多层次图标导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<title>CSS3实现多层次图标导航</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<ul id="nav">
<li><a href="#"><img src="images/home.png" />Home</a></li>
<li>
<a href="#"><span><img src="images/top1.png" />HTML/CSS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
<li>
<a href="#"><span><img src="images/top3.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 41</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 42</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 43</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 44</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 46</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 47</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 48</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#"><span><img src="images/top2.png" /> jQuery/JS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><img src="images/top3.png" /> PHP</a></li>
<li><a href="#"><img src="images/top4.png" /> MySQL</a></li>
<li><a href="#"><img src="images/top5.png" /> XSLT</a></li>
</ul>
</div>
</body>
</html>
CSS代码(layout.css):
*{margin:0;padding:0;}
body{background-color:#bababa;background-image:url("../images/metal_tilt.png");color:#fff;font:14px/1.3 Arial,sans-serif;}
footer{background-color:#212121;bottom:0;box-shadow:0 -1px 2px #111111;display:block;height:70px;left:0;position:fixed;width:100%;z-index:100;}
footer h2{font-size:22px;font-weight:normal;left:50%;margin-left:-400px;padding:22px 0;position:absolute;width:540px;}
footer a.stuts,a.stuts:visited{border:none;text-decoration:none;color:#fcfcfc;font-size:14px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;}
footer .stuts span{font-size:22px;font-weight:bold;margin-left:5px;}
.container{margin:20px auto;position:relative;width:720px;height:720px;background:url("../images/metal_bg.png") no-repeat 11px 22px;}
CSS代码(menu.css):
ul#nav{display:block;float:left;font-family:Trebuchet MS,sans-serif;font-size:0;padding:5px 5px 5px 0;background:-moz-linear-gradient(#f5f5f5,#c4c4c4);/* FF 3.6+ */
background:-ms-linear-gradient(#f5f5f5,#c4c4c4);/* IE10 */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f5f5),color-stop(100%,#c4c4c4));/* Safari 4+,Chrome 2+ */
background:-webkit-linear-gradient(#f5f5f5,#c4c4c4);/* Safari 5.1+,Chrome 10+ */
background:-o-linear-gradient(#f5f5f5,#c4c4c4);/* Opera 11.10 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#c4c4c4');/* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#c4c4c4')";/* IE8+ */
background:linear-gradient(#f5f5f5,#c4c4c4);/* the standard */
}
ul#nav,ul#nav ul{list-style:none;margin:0;}
ul#nav,ul#nav .subs{background-color:#444;border:1px solid #454545;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;}
ul#nav .subs{background-color:#fff;border:2px solid #222;display:none;float:left;left:0;padding:0 6px 6px;position:absolute;top:100%;width:300px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;}
ul#nav li:hover>*{display:block;}
ul#nav li:hover{position:relative;}
ul#nav ul .subs{left:100%;position:absolute;top:0;}
ul#nav ul{padding:0 5px 5px;}
ul#nav .col{float:left;width:50%;}
ul#nav li{display:block;float:left;font-size:0;white-space:nowrap;}
ul#nav>li,ul#nav li{margin:0 0 0 5px;}
ul#nav ul>li{margin:5px 0 0;}
ul#nav a:active,ul#nav a:focus{outline-style:none;}
ul#nav a{border-style:none;border-width:0;color:#181818;cursor:pointer;display:block;font-size:13px;font-weight:bold;padding:8px 18px;text-align:left;text-decoration:none;text-shadow:#fff 0 1px 1px;vertical-align:middle;}
ul#nav ul li{float:none;margin:6px 0 0;}
ul#nav ul a{background-color:#fff;border-color:#efefef;border-style:solid;border-width:0 0 1px;color:#000;font-size:11px;padding:4px;text-align:left;text-decoration:none;text-shadow:#fff 0 0 0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
ul#nav li:hover>a{border-style:none;color:#fff;font-size:13px;font-weight:bold;text-decoration:none;text-shadow:#181818 0 1px 1px;}
ul#nav img{border:none;margin-right:8px;vertical-align:middle;}
ul#nav span{background-position:right center;background-repeat:no-repeat;display:block;overflow:visible;padding-right:0;}
ul#nav ul span{background-image:url("../images/arrow.png");padding-right:20px;}
ul#nav ul li:hover>a{border-color:#444;border-style:solid;color:#444;font-size:11px;text-decoration:none;text-shadow:#fff 0 0 0;}
ul#nav > li >a{background-color:transpa;height:25px;line-height:25px;border-radius:11px;-moz-border-radius:11px;-webkit-border-radius:11px;}
ul#nav > li:hover > a{background-color:#313638;line-height:25px;}
分享到QQ
分享到微博
微信扫一扫
