纯CSS排列呈弧形布局的导航菜单

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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" content="text/html; charset=gb2312" />
<title>弧形排列的可折叠二级导航</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; 
}
#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>
	<ul id="ul_nav">
		<li>
			<h3><span>洗护系列</span></h3>
			<ul>
				<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>
			</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>
			</ul>
		</li>
		<li>
			<h3><a href="/">VIDEO</a></h3>
		</li>
	</ul>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

纯CSS排列呈弧形布局的导航菜单

分类

表格图层

描述

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