學習内容
- 水準導航菜單
- 垂直導航菜單
- 下拉式導航菜單
能力目标
- 制作tab标簽導航菜單
- 制作帶箭頭的導航菜單
- 制作帶資訊提示的導航菜單
- 制作垂直下拉導航菜單
- 制作水準下拉導航菜單
本章簡介
上一章節中講解了 background 屬性的用法，以及兩種主流的背景特效——頁面圖檔整合技術以及滑動門技術，設計師可以使用這兩種技術制作出多種頁面背景特效，如平滑投票、Tab 導航菜單等。
在Web 應用中，除了布局設計外，頁面導航欄的設計也是站點設計中的一個重要組成部分，網站中的頁面導航欄用于使使用者在浏覽時有明确的方向，可以快速地連結到相關内容頁面，進而節省使用者查找頁面的時間，提高通路效率。是以，頁面設計時需要選擇合适的導航菜單，進而使頁面的視覺效果更加清晰，操作更加友善、快捷。頁面導航的形式主要包括水準導航菜單、垂直導航菜單以及下拉式導航菜單等，本章内容即将詳細地講解上述導航菜單的制作過程。
核心技能部分
5.1 水準導航菜單
門戶網站中主導航菜單通常使用水準導航菜單，這是因為門戶網站中的内容比較多，而且每個頻道都有不同的樣式差別。是以在頁面的頂部設計一個風格而且不占用過多空間的水準導航菜單是最理想的選擇。水準導航菜單分為橫向文本導航和tab導航兩種風格。
5.1.1 橫向文本導航
橫向文本導航适用于頁面頻道豐富且風格多樣的大型網站，如網易、騰訊、MSN等，圖 5.1.1即為網易首頁。
橫向文本導航實作思路：
使用 div搭建導航架構。網易的導航菜單主要分為站标和内容兩部分，站标區不覆寫其他文字，可直接使用 img标簽插入網易站标。使用 ul和 li搭建内容部分，ul 中使用兩個 li方法分行顯示内容塊，再使用若幹超連結定義菜單。
實作步驟：
（1） 使用 div和ul搭建導航菜單架構，代碼如下：
<div class="globalMenu">
<div class="title">
網站logo
</div>
<div class="content">
<div class="menu s1 stroke">
<ul>
<li>第一欄第一行</li>
<li class="lineH">第一欄第二行</li>
</ul>
</div>
<div class="menu s1 stroke">
<ul>
<li>第二欄第一行</li>
<li class="lineH">第二欄第二行</li>
</ul>
</div>
</div>
</div>
（2） 向結構中添加内容，代碼片斷如下：
<ul>
<li>
<ahref="#" class="tip">新聞</a>
<ahref="#">軍事</a>
<ahref="#">圖檔</a>
<a href="#">評論</a>
</li>
<liclass="lineH">
<ahref="#" class="tip">體育</a>
<ahref="#">籃球</a>
<ahref="#">足球</a>
<ahref="#">跳水</a>
</li>
</ul> （3） 定義每個組成部分的樣式規則。globalMenu為導航欄容器樣式，采用 ul 和 li将其分隔兩行；title 為網站 logo樣式；content為導航内容樣式。其樣式代碼如下
<style type="text/css">
body {margin-top:250px;font-size:12px; }
div,img,ul,ol{margin: 0; padding: 0; border: 0; }
/* 超連結樣式 */
a:link {color: #1f3a87;text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 導航容器*/
.globalMenu{
margin:0auto;
width:550px;
height:45px;
background:#fff;
border:1pxsolid #CBCBCB;
}
/*導航Logo部分*/
.globalMenu .title{
float:left;
width:140px;
padding:6px0 0;
text-align:center;
}
/*導航内容部分*/
.globalMenu .content{
float:left;
width:400px;
margin:5px0 0;
}
/*定義菜單欄樣式*/
.globalMenu .content .menu{
float:left;
overflow:hidden;
height:36px;
width:150px;
border-right:1pxsolid #ccc;/*定義菜單欄目的右邊框*/
}
.globalMenu .content .menu li{
text-align:left;
padding:2px0 0 10px;
list-style-type:none;
}
.globalMenu .content .lineH{
line-height:22px;
}
.globalMenu .content .tip{
font-weight:bold;
}
</style> 5.1.1 Tab導航
導航菜單文本内容較少時，建議使用tab導航。這樣可以強化頁面視覺效果，拍拍購物網站即采用該導航形式，如圖 5.1.3所示。
實作思路：
使用 div搭建菜單容器，采用無序清單ul 和 li标簽實作菜單結構，a标簽定義内容；使用float屬性定義 li标簽為浮動元素，display屬性結合width、height定義超連結大小。
（1） 定義導航菜單結構，代碼如下：
<body>
<div id="navlist">
<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>
</body> （2） 定義無序清單樣式規則，代碼如下：
<style type="text/css">
#navlist ul{
list-style-type:none;
}
#navlist li{
float: left;
}
#navlist li a{
color: #000000;
text-decoration: none;
display: block;
padding-top: 4px;
width: 97px;
height: 22px;
text-align: center;
background-color: #ECECEC;
margin-left: 2px;
}
#navlist li a:hover{
background-color: #BBBBBB;
color: #FFFFFF;
}
</style>
5.1 垂直導航菜單
垂直導航是網站導航的另一種重要形式，它是指将導航菜單安放于頁面左右兩側并進行自上而下排列的導航形式。一些大型購物網站如當當網、淘寶網等采用該導航形式進行商品分類，如圖5.1.5所示。
垂直導航菜單形式多樣，以下列舉兩種常見的垂直導航：箭頭導航和提示資訊導航。
5.1.1 箭頭導航
箭頭導航的主要優點在于導航的直覺性，如圖 5.1.6、圖 5.1.7所示。
在 CSS 中，設定 span标簽的寬度和高度為 0；加粗邊框，設定上下邊框的顔色為白色，左右邊框的顔色為深色，實作代碼如下。
5.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>箭頭效果</title>
<style type="text/css">
span{
display:block;/*設定為塊級元素*/
position:absolute;/*使用絕對定位*/
height:0;
width:0;
border:solid50px #fff;/*設定預設的邊框樣式*/
overflow:hidden;/*隐藏超出範圍的内容*/
border-left-color:#f00;/*左邊框的顔色*/
border-right-color:#f00;/*右邊框的顔色*/
}
</style>
</head>
<body>
<span></span>
</body>
</html>
箭頭導航由若幹超連結構成，每個超連結文本前後添加絕對定位的 span标簽，以設定左右箭頭span标簽在連結狀态下隐藏、懸停狀态下顯示。
實作步驟：
（1） 制作導航菜單結構，代碼如下：
<body>
<div id="menu">
<a href="#"><spanclass="left"></span>首頁<span class="right"></span></a>
<a href="#"><spanclass="left"></span>相冊<span class="right"></span></a>
<ahref="#"><span class="left"></span>日志<spanclass="right"></span></a>
<a href="#"><spanclass="left"></span>留言<span class="right"></span></a>
<a href="#"><spanclass="left"></span>朋友<span class="right"></span></a>
</div>
</body>
（2） 編寫span和a标簽樣式規則，代碼如下：
<style type="text/css">
#menu {
font-family:Arial;
font-size:16px;
width:140px;
margin:0 auto;
border: 3px double #ccc;
}
#menu a {
text-decoration:none;/*文字無下劃線*/
text-align:center;/*文字水準居中對齊*/
display:block;/*設定為塊級元素*/
padding:4px;/*内邊距*/
background-color:#fff;
border:1px solid #fff;
position:relative;/*使用相對定位*/
width:130px;
}
#menu a span {
display:none;
}
#menu a:hover span {
display:block; /*設定為塊級元素*/
position:absolute;/*使用絕對定位*/
height:0;/*高度為0*/
width:0; /*寬度為0*/
border:solid 8px #fff;/*設定預設的邊框樣式*/
top:4px;/*豎直方向的定位*/
overflow:hidden;
}
#menu a:hover span.left {
border-left-color:#00f;
left:8px;
}
#menu a:hover span.right {
border-right-color:#00f;
right:8px;
}
</style> 上述代碼中，連結要求設定為相對定位，為絕對定位的span标簽提供定位參考，效果如圖 5.1.8所示；否則，span标簽就近尋找包含塊為基準進行定位，如本例中超連結沒有設定為相對定位，span标簽将以body為基準定位
帶提示資訊導航
#menu a:hover span.intro {
font-size:12px;
display:block;
position:absolute; /*絕對定位*/
left:150px;
top:0px;
padding:5px;
width:100px;
height:auto;
background-color:#eee;
color:#000;
border:1px dashed #234;
}
注意：提示框不能擠壓其他元素，制作方式應與箭頭類似；采用絕對定位，并保證脫離标準文檔。
5.1 下拉式導航菜單
當頁面版式比較緊湊時，頁面設計适合使用下拉式導航菜單。該菜單形式充分利用現有空間并分類顯示頁面内容，如娃哈哈企業網等采用該菜單形式，如圖 5.1.11所示。
5.1.1 垂直清單下拉導航
垂直清單下拉導航如圖 5.1.12所示。ily:"Times New Roman";mso-hansi-font-family:"Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>所示。
垂直清單下拉導航采用無序清單嵌套定義的方式實作，嵌套ul作為二級子菜單；一級菜單中定義li為浮動元素且向左浮動，并保證在一條水準線上。
（1） 定義垂直清單下拉導航結構，代碼如下：
<div class="menu">
<ul>
<li><a href="#" >首頁</a></li>
<li><a href="#" >新聞</a>
<ul>
<li><a href="#">國際新聞</a></li>
<li><a href="#">國内新聞</a></li>
<li><a href="#">體育新聞</a></li>
</ul>
</li>
<li><a href="#" id="current">财經</a>
<ul>
<li><a href="#">股票市場</a></li>
<li><a href="#">證券行情</a></li>
<li><a href="#">保險代理</a></li>
</ul>
</li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
（2） 定義一級菜單樣式規則，代碼如下：
.menu{
border:none;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(menu-bg.gif)top left repeat-x;
height:43px;
list-style:none;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
}
（3） 定義二級菜單樣式規則，代碼如下：
.menu li ul{
background:#e0e0e0;
border-left:2pxsolid #0079b2;
border-right:2pxsolid #0079b2;
border-bottom:2pxsolid #0079b2;
display:none;
height:auto;
position:absolute;
width:130px;
z-index:200;
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
width:130px;
}
.menu li ul a{
display:block;
font-size:12px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
}
當滑鼠懸停于一級菜單時，使用display：block；顯示嵌套的無序清單。
（4） 設定目前選中菜單樣式，代碼如下：
.menu #current{
background:url(current-bg.gif)top left repeat-x;
color:#ffffff;
} 5.1.1 水準清單下拉導航
水準清單下拉導航
水準清單下拉導航在垂直清單導航菜單基礎上實作，使用float:left；設定嵌套 li 為浮動元素，并保證所有li元素水準顯示。
（1） 水準清單下拉導航結構與垂直清單下拉導航菜單的結構相同。
（2） 定義嵌套ul 的樣式規則，代碼如下：
.menu li ul{
background:#e0e0e0;
border-left:2pxsolid #0079b2;
border-right:2pxsolid #0079b2;
border-bottom:2pxsolid #0079b2;
display:none;
height:auto;
position:absolute;/*絕對定位*/
width:225px;
z-index:200;
}
.menu li:hover ul{
display:block;/*塊狀顯示*/
width:auto;/*寬度自适應*}
.menu li ul li {
float:left;
border-left:1pxsolid white;
line-height:1.5em;/*設定高度為1.5個字寬*/
} 定義嵌套ul 的樣式規則時，需要設定ul為絕對定位，并脫離标準文檔流，否則一級菜單寬度将被改變
本章總結
在這一章裡制作2個垂直方向的導航菜單。需要讀者特别注意的有幾個CSS基礎知識和技巧。
（1） 相鄰盒子的margin的垂直方向相遇的“塌陷”現象，水準方向則沒有該現象。
（2） 在一些列盒子排列之後，如何對頭尾盒子進行單獨的樣式設定，可以為它們單獨設定類别，或者是僞類，但需要注意浏覽器對僞類的支援情況。
（3） 通過粗邊框的顔色設定可以産生出斜角效果，如果充分利用可以産生有趣的效果。
（4） 為了防止滑鼠指針經過時造成邊框的跳動，可以在通常狀态添加與背景色相同的邊框。
（5） 相對定位的含義是以自身原來所在的位置為基準進行偏移。
（6） “包含塊”的定義方法，絕對定位是以包含塊為基準進行偏移。
為了使某個盒子絕對定位，它的上一級元素可以設為相對定位，進而變成“包含塊”。
任務實訓部分
實訓任務1：雙豎線菜單
訓練技能點
Ø 利用border-left：和border-right制作雙豎線菜單
需求說明
實作思路
（1） 每個菜單的左右兩個邊都有一條豎線，當滑鼠指針劃過時，豎線由灰色變為黑色。
（2） 菜單文字變為紅色。
代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>雙豎線菜單</title>
</head>
<style type="text/css">
#menu
{
width:120px;
background:#ccc;
font-family:Arial;
font-size:14px;
padding:8px;
margin:0 auto;
}
#menu a,#menu a:visited
{
display:block;
background-color:#fff;
padding:4px 8px;
color:#000;
text-decoration:none;
margin:8px 0;
border-left:8px solid #9ab;
border-right:8px solid #9ab;
}
#menua#first,#menu a#last
{
margin:0px;
}
#menua:hover
{
color:#f00;
border-left:8px solid #000;
border-right:8px solid #000;
}
</style>
<body>
<div id="menu">
<a href="#"id="first"> Home </a>
<a href="#"> Contact</a>
<a href="#"> Web Dev</a>
<a href="#"> WebDesign</a>
<a href="#"id="last"> Map</a>
</div>
</body>
</html> 實訓任務2：雙斜角橫線菜單
Ø 使用相對流動定位設定頁面元素位置
Ø 使用background-position屬性定位背景
Ø 使用background-repeat屬性設定平鋪效果
雙斜角橫線菜單
（1） 與上一個案例不同之處在于，這裡為了使菜單的文字之間有一定空白，并且使文字在菜單項中垂直居中，沒有采用padding來實作。
關鍵代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>雙斜角橫線菜單</title>
</head>
<style type="text/css">
#menu
{
width:9em;
margin:0auto;
font-family:Arial;
font-size:14px;
border:solid 1px #aaa;
}
#menu a,#menu a:visited
{
display:block;
text-decoration:none;
color:#000;
line-height:1.4em;
border:0.5em solid #fff;
}
#menu a:hover
{
color:#fff;
background-color:#aaa;
border-color:#ddd #aaa;
}
</style>
<body>
<div id="menu">
<ahref="#"> Home</a>
<ahref="#"> Contact Us</a>
<ahref="#"> Web Dev</a>
<ahref="#"> Web Design</a>
<ahref="#"> Map</a>
</div>
</body>
</html> 實訓任務3：立體菜單
Ø 使用DIV+UL搭建垂直菜單架構
立體菜單，效果如圖��;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:"Times New Roman"'>使用background-position屬性定位背景
（1） 使用DIV+CSS搭建頁面架構。
（2） 使用DIV+UL搭建導航菜單架構。
（3） 使用<div style=”clear:both”></div>實作浮動清除。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>立體菜單</title>
</head>
<style type="text/css">
#menu
{
font-family:Arial;
font-size:14px;
}
#menu a,#menu a:visited
{
text-decoration:none;
text-align:center;
color:#fff;
display:block;
width:10em;
padding:0.25em;
margin:0.5em auto;
background-color:#8ab;
border:2px solid #fff;
position:relative;
}
#menu a:hover
{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</style>
<body>
<divid="menu">
<a href="#"> Home</a>
<a href="#"> ContactUs</a>
<a href="#"> Web Dev</a>
<a href="#"> WebDesign</a>
<ahref="#"> Map</a>
</div>
</body>
</html> 實訓任務4：制作淘寶商城二級菜單
完成淘寶商城二級菜單/b>
提示：
（1） 搭建二級菜單架構，代碼如下：
<ulclass="menu">
<li>
<strong>珠寶飾品</strong>
<div class="subcontent" style="z-index:199; top:-20px;color:#C3C;">
<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>
<li><a href="#">18K黃金/18k白金</a></li>
<li><a href="#">寶石/紅寶石/藍寶石</a></li>
<li><a href="#">鉑金/钯金</a></li>
<li><a href="#">飾品/流行首飾/日韓貨</a></li>
</ul>
<b style="top:25px;"></b>
</div>
</li>
<li><strong>運動護衛</strong></li>
<li><strong>手機數位</strong></li>
<li><strong>家居生活</strong></li>
<li><strong>家紡床品</strong></li>
<li><strong>家電家具</strong></li>
<li><strong>圖書音像</strong></li>
<li><strong>服飾鞋包</strong></li>
<li><strong>絲質衣服</strong></li>
<li><strong>綢緞衣服</strong></li>
<li><strong>時尚經典</strong></li>
<li><strong>黑色世界</strong></li>
<li><strong>紫色藍寶</strong></li>
</ul> （2） 定義subcontent的樣式規則，參考代碼如下：
/*二級菜單樣式*/
.subcontent {
font-size:12px;
width:200px;
display:none;
position:absolute;/*絕對定位，是subcontent脫離标準文檔流*/
left:146px;
top:-6px;
background-color:#FFF ;/*灰色*/
border:2pxsolid #e27687;/*紅色*/
z-index:200;
} （3） 定義b标簽的樣式規則，覆寫subcontent的左邊框，使subcontent産生箭頭效果，代碼如下：
/*覆寫subcontent的左邊框 使subcentent産生箭頭效果*/
.subcontent b{
background:url(images/sc.png)no-repeat -620px -150px;
display:block;
height:17px;
left:-7px;
position:absolute;
top:5px;
width:18px;
} （4） 定義滑鼠懸停樣式，滑鼠懸停時顯示subcontent，代碼如下：