學習內容
- 水平導航菜單
- 垂直導航菜單
- 下拉式導航菜單
能力目標
- 製作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屬性定位背景
Ø 使用background-repeat屬性設置平鋪效果
需求說明
雙斜角橫線菜單
實現思路
（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>
Ø 使用background-repeat屬性設置平鋪效果
需求說明
雙斜角橫線菜單
提示：
（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，代碼如下：
#header #all-items .menu li:hover div{
display:block;
}