纯CSS排列呈弧形布局的导航菜单_层和布局特效

纯CSS排列呈弧形布局的导航菜单，这个菜单对我们来说很特别，CSS布局中的难点，但是作者很有水平，能排成弧形，所以还是值得大家学习的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>弧形排列的可折叠二级导航-www.mb5u.com</title>
<style type="text/css"> 
* {margin: 0; padding: 0;}
li {list-style: none;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
 
body {
	font: 12px/1.2 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif;
	color: #ddd;
	background: black;
}

#dv_nav {
	padding-top: 30px;
	width: 500px;
	height: 540px;
	text-align: right;  /*各菜单项右对齐*/
	background: url(img/bg-1.jpg) no-repeat;
}
#dv_nav h2 {
	display: none;
}

#ul_nav li {
	padding-bottom: 24px;  /* www.mb5u.com */
}
#ul_nav li li {
	padding-bottom: 0px;  /* 清除上一条对二级菜单的影响 */
	margin-top: 10px;
}
/* 菜单项基本样式 */
#ul_nav h3 a,
#ul_nav h3 span {
	font-size: 16px;
	font-weight: 700;
	color: #aaa;
}
#ul_nav li li a {
	color: #999;
}
 #dv_placeholder div {
	_margin-left: -3px;  /* 应付3px bug @ IE6 */
	float: right; _display: inline;
	clear: right;
	font: 1px/1 serif;
}
#dv_placeholder .n1  {width: 185px; height: 10px;}
#dv_placeholder .n2  {width: 195px; height: 10px;}
#dv_placeholder .n3  {width: 200px; height: 10px;}
#dv_placeholder .n4  {width: 205px; height: 10px;}
#dv_placeholder .n5  {width: 210px; height: 10px;}
#dv_placeholder .n6  {width: 215px; height: 10px;}
#dv_placeholder .n7  {width: 220px; height: 10px;}
#dv_placeholder .n8  {width: 225px; height: 10px;}
#dv_placeholder .n9  {width: 230px; height: 10px;}
#dv_placeholder .n10 {width: 235px; height: 10px;}
#dv_placeholder .n11 {width: 240px; height: 10px;}
#dv_placeholder .n12 {width: 245px; height: 15px;}
#dv_placeholder .n13 {width: 250px; height: 10px;}
#dv_placeholder .n14 {width: 255px; height: 15px;}
#dv_placeholder .n15 {width: 260px; height: 10px;}
#dv_placeholder .n16 {width: 265px; height: 15px;}
#dv_placeholder .n17 {width: 270px; height: 15px;}
#dv_placeholder .n18 {width: 275px; height: 20px;}
#dv_placeholder .n19 {width: 280px; height: 20px;}
#dv_placeholder .n20 {width: 285px; height: 20px;}
#dv_placeholder .n21 {width: 290px; height: 20px;}
#dv_placeholder .n22 {width: 295px; height: 25px;}
#dv_placeholder .n23 {width: 300px; height: 35px;}
#dv_placeholder .n24 {width: 305px; height: 145px;}
#dv_placeholder .n25 {width: 300px; height: 30px;}
#dv_placeholder .n26 {width: 295px; height: 20px;}
#dv_placeholder .n27 {width: 290px; height: 15px;}
 
#ul_nav h3 {
	background: #555;
}
#ul_nav li li {
	background: #222;
}
#dv_placeholder div {
	background: yellow;
	opacity: 0.2; filter: Alpha(Opacity=20); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
}
 
</style>
</head>
 
<body>
<div id="dv_nav">
	<h2>导航</h2>
	
	<div id="dv_placeholder">
		<div class="n1"></div>
		<div class="n2"></div>
		<div class="n3"></div>
		<div class="n4"></div>
		<div class="n5"></div>
		<div class="n6"></div>
		<div class="n7"></div>
		<div class="n8"></div>
		<div class="n9"></div>
		<div class="n10"></div>
		<div class="n11"></div>
		<div class="n12"></div>
		<div class="n13"></div>
		<div class="n14"></div>
		<div class="n15"></div>
		<div class="n16"></div>
		<div class="n17"></div>
		<div class="n18"></div>
		<div class="n19"></div>
		<div class="n20"></div>
		<div class="n21"></div>
		<div class="n22"></div>
		<div class="n23"></div>
		<div class="n24"></div>
		<div class="n25"></div>
		<div class="n26"></div>
		<div class="n27"></div>
	</div>
	<!--www.mb5u.com->
	<ul id="ul_nav">
		<li>
			<h3><span>洗护系列</span></h3>
			<ul>
				<li><a href="/#">赋活水养</a></li>
				<li><a href="/">动感卷曲</a></li>
				<li><a href="/">模板无忧</a></li>
			</ul>
		</li>
		<li>
			<h3><span>造型系列</span></h3>
			<ul>
				<li><a href="/">珠光亮泽</a></li>
				<li><a href="/">酷炫凌乱</a></li>
				<li><a href="/">源码下载</a></li>
			</ul>
		</li>
		<li>
			<h3><a href="/">促销信息</a></h3>
		</li>
		<li>
			<h3><span>秀发护理小TIPS</span></h3>
			<ul>
				<li><a href="/">洗发知多少</a></li>
				<li><a href="/">护发怎么办</a></li>
				<li><a href="/">型发知多少</a></li>
			</ul>
		</li>
		<li>
			<h3><a href="/">VIDEO</a></h3>
		</li>
	</ul>
</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-11-17

[收藏][报错][返回列表]

纯CSS排列呈弧形布局的导航菜单_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些