第8章 鏈接和導(dǎo)航-拓展知識
第8章 鏈接和導(dǎo)航拓展知識
一. 縱向二級菜單設(shè)計(jì)
對一些管理網(wǎng)站和購物網(wǎng)站，經(jīng)常在內(nèi)容主體區(qū)域設(shè)置縱向?qū)Ш讲藛?，菜單?xiàng)較多空間有限時，往往對菜單分類，設(shè)計(jì)成折疊菜單或鼠標(biāo)經(jīng)過時懸浮顯示下拉菜單。下面用CSS設(shè)計(jì)縱向的折疊菜單或鼠標(biāo)經(jīng)過時懸浮顯示下拉菜單。
1.?縱向?qū)Ш秸郫B菜單
【例tz8-1】縱向的折疊菜單，初始狀態(tài)顯示效果如圖1所示，鼠標(biāo)經(jīng)過時如圖2所示。???
??
圖1 縱向的折疊菜單初始狀態(tài)? ? ? ? ? ? ??
??圖2 鼠標(biāo)經(jīng)過縱向的折疊菜單時狀態(tài)
折疊的網(wǎng)頁縱向?qū)Ш讲藛斡汕短椎臒o序列表實(shí)現(xiàn)。一級菜單的li元素中嵌套無序列表，對嵌套的無序列表設(shè)計(jì)CSS樣式實(shí)現(xiàn)折疊的下拉菜單。默認(rèn)狀態(tài)下，嵌套的子菜單隱藏不顯示，鼠標(biāo)經(jīng)過一級菜單時對應(yīng)的子菜單顯示。
頁面文件和CSS樣式的代碼如下。?
<head>
????<meta charset="UTF-8">
????<title>縱向?qū)Ш秸郫B菜單</title>
????<style>
????????*{? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? }
????????li{? ? ? ? ? ? list-style: none;? ? ? ? }
???????/*縱向?qū)Ш讲藛魏凶拥臉邮蕉x*/
????????.menu{
????????????width: 200px;
????????????height: auto;
????????????margin: 40px auto;
????????}
????????.item{
????????????width: 100%;
????????????height: auto; ? ?
????????}
????????/*一級菜單樣式定義*/
????????.item ?h3{
????????????height: 50px;
????????????line-height: 50px;
????????????background-color:#ddd;
????????????color: #444;
????????????border-bottom: 2px solid #fff;
????????????padding-left: 20px; ?
????????}
???????/*折疊子菜單盒子的樣式定義*/
????????.item ?.itembox{ ?
????????????width: 100%;
????????????height: 0px;
????????????overflow: hidden; ?/*元素溢出時隱藏*/
????????}
????????/*子菜單無序列表的樣式定義*/
??????.item ?.itembox ?ul{
????????????width: 100%;
????????????height: auto;
????????????background-color:#eee; ???????
????????????box-sizing: border-box; ?/*設(shè)置盒模型的類型*/
????????}
/* 折疊子菜單顯示樣式 */
??.item ?.itembox ?ul li{
?? ?line-height: 40px;
?border-bottom: 1px solid #fff;
?padding-left: 40px;
}
/* 鼠標(biāo)經(jīng)過菜單時折疊子菜單顯示樣式 */
????????.item:hover .itembox{ ?
????????????height: auto;
????????}
?/* 鼠標(biāo)經(jīng)過子菜單項(xiàng)時樣式 */
???.item ?.itembox ?ul li a{?
???????color: #111;
??text-decoration: none;
}
?/*鼠標(biāo)經(jīng)過子菜單項(xiàng)時樣式定義?*/
??.item ?.itembox ?ul li a:hover{
color: red;
}?
????</style>
</head>
<body>
<div>
<ul>
????<li>
????????<h3>產(chǎn)品中心</h3>
????????<div>
????????<ul>
????????????<li><a href="#">折疊子菜單11</a></li>
????????????<li><a href="#">折疊子菜單12</a></li>
????????????<li><a href="#">折疊子菜單13</a></li>
????????????<li><a href="#">折疊子菜單14</a></li>
<li><a href="#">折疊子菜單15</a></li> ?
????????</ul>
????????</div>
????</li>
????<li>
????????<h3>工程案例</h3>
????????<div>
????????<ul>
??????????<li><a href="#">折疊子菜單21</a></li>
??????????<li><a href="#">折疊子菜單22</a></li>
??????????<li><a href="#">折疊子菜單23</a></li>
??????????<li><a href="#">折疊子菜單24</a></li> ????????
????????</ul>
????????</div>
????</li>
????<li>
????????<h3>新聞動態(tài)</h3>
????????<div>
????????<ul>
???????????<li><a href="#">折疊子菜單31</a></li>
???????????<li><a href="#">折疊子菜單32</a></li>
???????????<li><a href="#">折疊子菜單33</a></li>
???????????<li><a href="#">折疊子菜單34</a></li> ?
????????</ul>
????????</div>
????</li>
????<li>
????????<h3>招商加盟</h3>
????????<div>
????????<ul>
???????????<li><a href="#">折疊子菜單41</a></li>
???????????<li><a href="#">折疊子菜單42</a></li>
???????????<li><a href="#">折疊子菜單43</a></li>
???????????<li><a href="#">折疊子菜單44</a></li> ?
????????</ul>
????????</div>
????</li>
</ul>
</div>
</body> ???
2.縱向?qū)Ш绞髽?biāo)經(jīng)過懸浮顯示下拉菜單
縱向?qū)Ш讲藛蔚淖硬藛我部梢杂脩腋》绞斤@示，鼠標(biāo)經(jīng)過一級菜單時，對應(yīng)的子菜單懸浮顯示。
【例tz8-1】縱向?qū)Ш绞髽?biāo)經(jīng)過懸浮顯示下拉菜單，初始狀態(tài)顯示效果如圖1所示，鼠標(biāo)經(jīng)過時如圖3所示。
?圖3 鼠標(biāo)經(jīng)過懸浮顯示下拉菜單時狀態(tài)
本例文件的HTML頁面代碼和tz8-1相同，修改CSS樣式代碼，對嵌套的無序列表子菜單進(jìn)行絕對定位，初始狀態(tài)子菜單不顯示，鼠標(biāo)經(jīng)過時，子菜單在一級菜單右側(cè)懸浮顯示，如圖3所示。
tz8-2.html文件的CSS樣式代碼如下。?
?<style>
????????*{? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? }
????????li{? ? ? ? ? ? list-style: none;? ? ? ? }
????????.menu{
????????????width: 200px;
????????????height: auto;
????????????margin: 20px auto;
????????}
????????/*一級菜單相對定位*/
????????.item{
????????????width: 100%;
????????????height: auto;
???position: relative; /*相對定位*/ ?
????????}
???????.item ?h3{
???????????height: 50px;
???????????line-height: 50px;
???????????background-color:#ddd;
???????????color: #444;
???????????border-bottom: 2px solid #fff;
???????????padding-left: 10px;
??position: relative;??
??text-align: center;
???????}
????.item:hover h3{
background-color: antiquewhite;??/*鼠標(biāo)經(jīng)過加背景顏色*/
}
?????????/*子菜單盒子樣式*/
????????.item ?.itembox{
???position: absolute;???/*絕對定位*/
????????left: 200px;
???top: 10px;
????????????width: 100%;
????????????height: 0px;
????????????overflow: hidden; ?/*元素溢出時隱藏*/ ??????????
????????}
????????/*子菜單無序列表的樣式定義*/
????????.item ?.itembox ?ul{
????????????width: 100%;
????????????height: auto;
????????????background-color: #eee; ??????????
????????????box-sizing: border-box; ?/*設(shè)置盒模型的類型*/ ?
????????}
/* 折疊子菜單顯示樣式 */
??.item ?.itembox??ul??li{
?line-height: 40px;
?border-bottom: 1px solid #fff;
?padding-left: 20px;
}
???????/*對子菜單盒子絕對定位*/
???????.item:hover .itembox{
??position: absolute;????/*絕對定位*/
??left: 200px;
??top: 10px;
???????????height: auto;
????????}
/* 鼠標(biāo)經(jīng)過子菜單項(xiàng)時樣式 */
??.item ?.itembox ?ul li a{
color: #111;
text-decoration: none;
??}
/* 鼠標(biāo)經(jīng)過子菜單項(xiàng)時樣式 */
??.item ?.itembox ?ul li a:hover{
color: red;
}
??</style>?
【說明】對下拉菜單、懸浮菜單、折疊菜單等可以用JavaScript或jQuery實(shí)現(xiàn)。
?
?
