第八章 利用CSS制作导航菜单

时间：2024-11-18 22:32:10

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

  导航对于一个网站来说，起到重要的引导作用。一个优着的清就这计可以使网站特长晰、有条理，让用户快速地找到所需，让用户清听明了地了解到网站的结构框架，能起到要的指引作用。
导航栏是网站设计中必不可少的一个模块。常见的网站导航有顶部水平导航、侧边筑角导航和底部导航等，区别于传统的表格布局，直接利用CSS，结合链接元素和列表元素来制作导航菜单，将大大简化设计的流程。

        水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。

8.1.1.1导航栏的创建

通常使用 HTML 的无序列表（<ul>）和列表项（<li>）来创建导航栏的基本结构。通过 CSS 对列表进行样式设置，去除默认的列表样式，如项目符号等，使其呈现为水平排列的导航栏

nav和ul搭配使用，表示一个导航栏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航栏</h3>
		</center>
		<hr />
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

 

8.1.1.2 列表样式的设计

设置列表的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的display: inline-block属性将列表项设置为水平排列，同时调整间距和对齐方式

8.1.1.3 超链接样式的设计

利用CSS为超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其 display 属性设置为 block，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
			}
			li{
				float: left;
			}
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航栏</h3>
		</center>
		<hr />
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

 

8.1.1.4 鼠标事件

可以通过 JavaScript 或 CSS 的:active伪类来实现鼠标点击时的效果，如改变颜色、添加阴影等。同时，可以设置鼠标移入和移出时的过渡效果，使交互更加平滑

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 前面标点符号为无 */
			ul{
				list-style-type: none;
			}
			li{
				float: left;
			}
			a{
				/* 去掉下划线 */
				text-decoration: none;
				display:block;
				width: 100px;
				text-align:center;
			}
			/* 鼠标单击事件 */
			a:link,a:visited{
				background-color: darkred;
				color: black;
			}
			a:link,a:active{
				background-color: aquamarine;
				color: lightpink;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜档导航栏</h3>
		</center>
	<hr>
	<nav>
		<ul>
			<li><a href="#">前端</a></li>
			<li><a href="#">后台</a></li>
			<li><a href="#">移动引用</a></li>
			<li><a href="#">数据库</a></li>
			<li><a href="#">操作系统</a></li>
			<li><a href="#">服务器</a></li>
		</ul>
	</nav>
	</body>
</html>

 

8.1.2 下拉子菜单导航栏的设计与实现 

   下拉子菜单导航是网站设计中常见的子导航设计，一般适用于多级别、内容庞杂的网站。这种导航模式可以让整个网站设计更加整洁有序，现下大热的汉堡包导航也是采用这种隐藏式的导航设计

 

8.1.2.1导航栏的创建


与简单水平导航栏类似，使用无序列表和列表项创建基本结构。但需要在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单


8.1.2.2 列表样式的设计


除了设置主菜单的列表样式外，还需要对子菜单的列表样式进行设计。可以设置子菜单的显示位置、背景颜色、边框等属性

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ol,ul{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

 

8.1.2.3 二级菜单的隐藏和显示设计

通过 CSS 的display:none属性将子菜单初始设置为隐藏状态。当鼠标悬停在主菜单上时，使用:hover伪类将子菜单显示出来。可以使用 JavaScript 来实现更加复杂的交互效果，如延迟显示、动画效果等

 

​
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			ul,ol{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
			}
			/* , 谁谁谁和谁一样 */
			/* 空格是谁谁谁的下一级 */
			ul ol li{
				float: none;
			}
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display:none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				
				/* 下划线 */
				text-decoration: none;
				padding: 10px;
				width: 145px;
				display: block;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
		<ul>
				<li><a href="#">前端</a>
		<ol>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">Javascript</a></li>
		</ol>
		</li>
			   <li><a href="#">后台</a>
		<ol>
				<li><a href="#">Java</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Python</a></li>
		</ol>
			</li>
			<li><a href="#">移动应用</a>
		<ol>
			<li><a href="#">Android</a></li>
			<li><a href="#">IOS</a></li>
		</ol>
		</li>
			<li><a href="#">数据库</a>
		<ol>
			<li><a href="#">MySql</a></li>
			<li><a href="#">SqlServer</a></li>
		</ol>
		</li>
		<li><a href="#">操作系统</a>
		<ol>
			<li><a href="#">Linux</a></li>
			<li><a href="#">Unix</a></li>
			<li><a href="#">Windows</a></li>
		</ol>
		</li>
		<li><a href="#">服务器</a>
		<ol>
			<li><a href="#">Tomcat</a></li>
			<li><a href="#">WebSphere</a></li>
		<li><a href="#">WebLogicc</a></li>
		</ol>
		</li>
		</ul>
		</div>
		</nav>
	</body>
</html>
 
​

 

8.1.2.4 DIV样式的设计

        完成以上关键步骤后，对内容所处的div样式进行设置，包括宽度、高度、边框和对齐方式

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ol,ul{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				display: block;
				width: 100px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			ul li a{
				background-color: #ff0000;
				color: #ffffff;
				
			}
			ul li ol li a{
				background-color: #ffffff;
				color: #ff0000;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.1.2.5 超链接样式的设计

与简单水平导航栏类似，对主菜单和子菜单中的超链接进行样式设置，增加交互效果

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			ul,ol{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
			}
			/* , 谁谁谁和谁一样 */
			/* 空格是谁谁谁的下一级 */
			ul ol li{
				float: none;
			}
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display:none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				
				/* 下划线 */
				text-decoration: none;
				padding: 10px;
				width: 145px;
				display: block;
				text-align: center;
			}
			ul li a{
				background-color: darkred;
				color: black;
			}
			ul li ol li a{
				background-color: yellow;
				color: plum;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
		<ul>
				<li><a href="#">前端</a>
		<ol>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">Javascript</a></li>
		</ol>
		</li>
			   <li><a href="#">后台</a>
		<ol>
				<li><a href="#">Java</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Python</a></li>
		</ol>
			</li>
			<li><a href="#">移动应用</a>
		<ol>
			<li><a href="#">Android</a></li>
			<li><a href="#">IOS</a></li>
		</ol>
		</li>
			<li><a href="#">数据库</a>
		<ol>
			<li><a href="#">MySql</a></li>
			<li><a href="#">SqlServer</a></li>
		</ol>
		</li>
		<li><a href="#">操作系统</a>
		<ol>
			<li><a href="#">Linux</a></li>
			<li><a href="#">Unix</a></li>
			<li><a href="#">Windows</a></li>
		</ol>
		</li>
		<li><a href="#">服务器</a>
		<ol>
			<li><a href="#">Tomcat</a></li>
			<li><a href="#">WebSphere</a></li>
		<li><a href="#">WebLogicc</a></li>
		</ol>
		</li>
		</ul>
		</div>
		</nav>
	</body>
</html>

 

8.1.2.6 鼠标事件

        利用 CSS为无序列表选项li：hover和有序列表的a：hover进行样式设置。表示鼠标县停状态时的样式变化。

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ol,ul{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				display: block;
				width: 100px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			ul li a{
				background-color: #ff0000;
				color: #ffffff;
				
			}
			ul li ol li a{
				background-color: #ffffff;
				color: #ff0000;
			}
			/* 8.1.2.6 鼠标事件 */
			ul li a:hover{
				border-bottom: #aaddff solid 5px;
			}
			ul li ol li a:hover{
				border-bottom: none;
				background-color: #ffffff;
				color: #ff0000;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2 纵向侧边导航栏


8.2.1 简单纵向导航栏的设计与实现


8.2.1.1导航栏的创建

使用无序列表和列表项创建导航栏的基本结构。将列表设置为垂直排列，通过 CSS 的display:block属性实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<nav>
			<div>
				<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家具用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
				</ul>
			</div>
		</nav>
		
	</body>
</html>

 

8.2.1.2 DIV样式的设计 

 对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#"></a>家具用品</li>
					<li><a href="#"></a>手机数码</li>
					<li><a href="#"></a>家用电器</li>
					<li><a href="#"></a>厨卫工具</li>
					<li><a href="#"></a>汽车用品</li>
					<li><a href="#"></a>运动器材</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

 

8.2.1.3 列表样式的设计

设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
				color: aquamarine;
			}
		</style>
	</head>
	<body>
		<nav>
			<div>
				<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家具用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
				</ul>
			</div>
		</nav>
		
	</body>
</html>

 

8.2.1.4 超链接样式的设计 

利用CSS为超链接重新设置样式，对超链接的a:link和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a：hover和a： active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #dbdbf8;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffffff;
			}
			ul{
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #ffffff;
				color: #dbdbf8;
				
			}
			a:hover,a:active{
			/* 	background-color:#dbdbf8;
				color: #ffffff; */
				background-image: url(../img/bg.JPG);
			}
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家具用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2.2 出式子菜单导航栏的设计与实现


8.2.2.1 导航栏的创建

与简单纵向导航栏类似，使用无序列表和列表项创建基本结构。在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2.2 出式子菜单导航栏的设计与实现 

出式子菜单导航跟下拉子菜单导航一样，是网站设计中常见的子导航设计，只是出式子菜单多用于侧边纵向导航栏。这种子菜单适用于多级别、内容庞杂的网站，可以让整个网站设计更加整洁有序。

8.2.2.1 导航栏的创建

 在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
/* 			ul ol li{
				list-style-type: none;
			}
			ul{
				list-style-type: none;
			}
			a{
				text-decoration: none;
			}
			ul li ol li{
				display: none;
			}
			ul li:hover ol li{
				display: block;
			} */
			div{
				background-color: #dbdbf8;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffffff;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

 

 

8.2.2.2 DIV样式的设计

设置<div>标签的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的定位属性将导航栏固定在页面的侧边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			} 
	
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

 

8.2.2.3 二级菜单的隐藏和显示设计 

         为了使有序列表的二级菜单隐藏起来，需要设置display属性为none。
        为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。
        为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
/* 			ul ol li{
				list-style-type: none;
			}
			ul{
				list-style-type: none;
			}
			a{
				text-decoration: none;
			}
			ul li ol li{
				display: none;
			}
			ul li:hover ol li{
				display: block;
			} */
			div{
				background-color: #dbdbf8;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffffff;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2.2.5 超链接样式的设计

对主菜单和子菜单中的超链接进行样式设置，增加交互效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
				color: aquamarine;
			}
			a:link,a:visited{
				background-color:#eeeeee;
				color:#33cc00;
			}
			a:hover,a:active{
				background-image: url(img/bg.JPG);
			}
			ul,ol{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			ul li{
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li:hover ol{
				display: block;
			}
			ul li ol a:hover{
				background-color: brown;
				background-image: none;
				color: pink;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3 底部固定导航栏


8.3.1 导航栏的创建

  在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>配合列表选
项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3.2 列表样式的设计

设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				/* 标点 */
				list-style-type: none;
				/* 取消标点占位 */
				margin: 0%;
				padding: 0%;
			}
			li{
				float: left;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后端</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3.3 菜单固定底部的设计

为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航菜单固定于页面底部，需要设置位置属性position和各个方向的位置值。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
					ul{
							list-style-type: none;
							margin: 0;
							padding: 0;
						}
						li{
							float: left;
						}
							a{
										width: 80px;
										display: block;
										text-decoration: none;
										text-align: center;
									}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3.4 超链接样式的设计


对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				display: block;
				width: 200px;
				padding:20px;
				text-decoration:none;
				text-align: center;
			}
			a:link,a:visited{
				background-color: papayawhip;
				color: plum;
			}
			a:hover,a:active{
				background-color: brown;
				color: greenyellow;
			}
			ul{
				/* 标点 */
				list-style-type: none;
				/* 取消标点占位 */
				margin: 0%;
				padding: 0%;
			}
			li{
				float: left;
			}
			.fix-footer{
				position: fixed;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后端</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3.5 鼠标事件 

 利用CSS为a：hover和a：active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			a{
				width: 80px;
				display: block;
				text-decoration: none;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #ffff00;
				color: #330066;
			}
			a:hover,a:active{
				background-color: #330066;
				color: #ffff00;
			}
			.fix-footer{
				position: fixed;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.4 综合案例——优名养生馆 

 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(../img/bg.jpg);
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 25%;
				float: left;
				line-height: 50px;
			}
			img{
				margin-top: 70px;
				margin-right: 40px;
			}
			.footer{
				height: 50px;
				width: 100%;
				background-image: url(../img/footer-bg.jpg);
				border-top: 3px solid gray;
				text-align: center;
				z-index: 9998;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.footer-top{
				height: 90px;
				width: 90px;
				text-align: center;
				line-height: 90px;
				z-index: 9999;
				position: fixed;
				bottom: 0;
				left: 45%;
			}
			.footer-top a{
				border-radius: 90px;
			}
			.footer-top a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
				border-top: 3px solid gray;
				background-image: url(../img/footer-top-bg1.jpg);
			}
			.footer-top a:hover{
				background-image: url(../img/footer-top-bg2.jpg);
				color: white;
			}
			.footer a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
			}
			.footer a:hover{
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white;
				font-size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<marquee direction="right" scrollamount="20">
				<img src="../img/marquee1.jpg"/>
				<img src="../img/marquee2.jpg"/>
				<img src="../img/marquee3.jpg"/>
			</marquee>
		</div>
		<nav>
			<div class="footer-top">
				<a href="index.html">进入官网</a>
			</div>
			<div class="footer">
				<ul>
					<li><a href="#">奇幻世界</a></li>
					<li><a href="#">主题风采</a></li>
					<li><a href="#">加盟相关</a></li>
					<li><a href="#">友情推荐</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(./img/bg.jpg);
			}
			.all{
				margin: 0px auto;
				width: 900px;
			}
			.top{
				width: 900px;
				height: 225px;
				background-image: url(./img/top-bg.jpg);
			}
			.cent{
				width: 320px;
				margin-left: auto;
				margin-right: auto;
				font-size: 58px;
				font-family: "楷体";
				color: lemonchiffon;
				font-style: italic;
			}
			.nav{
				width: 200px;
				float: left;
				margin-top: 30px;
				font-size: 20px;
				font-weight: bold;
				color: saddlebrown;
			}
			.main{
				width: 700px;
				height: 300px;
				float: left;
				margin-top: 10px;
			}
			.footer{
				font-size: 14px;
				font-weight: bold;
				color: brown;
				text-align: center;
				clear: both;
				background-image: url(./img/footer-bg.jpg);
			}
			p{
				color: brown;
				font-size: 16px;
			}
			img{
				margin: 15px;
			}
			ul{
				list-style-type: none;
			}
			li{
				height: 22px;
			}
			a:link{
				font-size: 16px;
				text-decoration: none;
				color: brown;
			}
			a:hover{
				background-color: burlywood;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<br>
				<div class="cent">优名养生馆</div>
			</div>
			<nav>
				<div class="nav">
					<table>
						<tr>养生之道</tr>
						<tr>
							<ul>
								<li><a href="#">运动养生</a></li>
								<li><a href="#">四季养生</a></li>
								<li><a href="#">健康检测</a></li>
							</ul>
						</tr>
						<tr>中医养生</tr>
						<tr>
							<ul>
								<li><a href="#">经络养生</a></li>
								<li><a href="#">体质养生</a></li>
								<li><a href="#">特色疗法</a></li>
							</ul>
						</tr>
					</table>
				</div>
			</nav>
			<div class="main">
				<img src="img/main.jpg" align="left"/>
				<p>&emsp;&emsp;古人云：善养生者，上养神智、中养形态、下养筋骨。</p>
				<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以
调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期
达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p>
			</div>
			<hr />
			<div class="footer">版权所有&copy;优名养生馆</div>
		</div>
	</body>
</html>

 

 

相关文章