Web前端開發實戰4：導航菜單(一)
阿新 • • 發佈：2017-06-12
pan 解決 博文 xmlns 背景圖 20px mar 水平 經典
在前面的博文中我們提到橫向一級菜單，這裏我們來看看導航菜單。
導航菜單種類非常多，可是制作原理都是大同
小異的。這裏看的比二級下拉式菜單還簡單。
來看一些站點上的導航菜單：
垂直導航菜單：
水平導航菜單：
一垂直菜單
制作原理：(1)用無序列表構建菜單。(2)<a>標簽的設置：ul li a{display:block;}。
定義的關鍵是將<a>標簽設置為
塊元素。
代碼：
<!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">
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:200px;
width:90px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
/*設置的關鍵*/
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-bottom:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="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>
</ul>
</div>
</body>
</html>效果展示：
初始化狀態或鼠標離開的狀態：
鼠標放上去的狀態：
二水平菜單
制作原理：在垂直菜單的基礎上，將li元素進行左浮動設置。因為li元素浮動脫離原來的文檔流會失去寬和高，因
此一定要在a元素上使用display:block屬性將其變為塊級元素，然後進行寬和高的設置。
僅僅改變CSS樣式代碼：
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:40px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
/*設置的關鍵*/
.nav li{
float:left;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-right:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}效果展示：
三圓角菜單
制作原理：在水平菜單的基礎上我們進行CSS圓角屬性的設置，可是IE6,7,8瀏覽器並不支持這個屬性，制作一定
要考慮瀏覽器的兼容性，在這裏我們使用圓角屬性。解決不兼容的方法就是我們能夠裁剪圓角背景圖作為每一個li元素
的背景就可以。
完整的代碼：
<!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">
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:50px;
margin-top:20px;
margin-left:10px;
}
.nav ul{
list-style:none;
height:50px;
border-bottom:10px solid #FF6600;
padding-left:30px;
}
.nav li{
float:left;
margin-top:10px;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-left:1px;
/*設置圓角屬性,IE6,7,8不支持*/
border-top-left-radius:15px;
border-top-right-radius:15px;
}
.nav li a:hover,.nav li a.on{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a class="on" 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>
</body>
</html>
效果展示：
初始化狀態或鼠標離開的狀態：
鼠標移上去的狀態：
Web前端開發實戰4：導航菜單(一)