WEB入門.九 導航選單
學習內容
- 水平導航選單
- 垂直導航選單
- 下拉式導航選單
能力目標
- 製作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;
}
- Android——一個簡單的銀行系統
- 可以讓你寫到簡歷上的“網約車”專案,太讚了!!!
- git clone early EOF解決方法
- ES6(三) Promise 的基本使用方式
- Linux的哲學思想
- 為什麼阿里巴巴不建議 boolean 型別變數用 isXXX?
- 微信之夜,張小龍說視訊化表達將會成為下一個十年內容領域的主題
- WEB入門.九 導航選單
- 探索 .Net Core 的 SourceLink
- EdgeBERT:極限壓縮,比ALBERT再輕13倍!樹莓派上跑BERT的日子要來了? - 知乎
- shell 中if [ -e/d/f ..... ] 詳解
- 寫“好”程式碼的十九條準則
- 自學第三十五天
- 謝煙客---------二進位制安裝MariaDB,管理關係型資料庫的基本元件
- Egret之Sound壓縮方案
- Android studio 解決編譯速度慢 Download maven-metadata.xml速度很慢
- Flutter 中 BottomNavigationBar 定義底部導航條
- 肖四背背背
- nginx配置檔案
- yanghui三角形