春風(fēng)博客

使用無(wú)序列表制作導(dǎo)航菜單

無(wú)序列表在Web頁(yè)面中的用途

除了Div，Table，F(xiàn)orm外，我們最常用的Html元素之一就是無(wú)序列表ul，使用它通常可以實(shí)現(xiàn)以下形式：
1.實(shí)現(xiàn)文本數(shù)據(jù)列表，這是無(wú)序列表的原始意圖。
2.嵌套使用無(wú)序列表，以實(shí)現(xiàn)樹(shù)狀結(jié)構(gòu)。
3.修改無(wú)序列表的樣式，將它作為菜單使用。相對(duì)于用表格制作的菜單項(xiàng)，它修改起來(lái)比較方便，樣式也很容易設(shè)置。
第三點(diǎn)就是本文的主要議題。

無(wú)序列表的原始形式

<ul>
  <li><a href='#'>菜單001</a></li>
  <li><a href='#'>菜單002</a></li>
  <li><a href='#'>菜單003</a></li>
  <li><a href='#'>菜單004</a></li>
  <li><a href='#'>菜單005</a></li>
  <li><a href='#'>菜單006</a></li>
  <li><a href='#'>菜單007</a></li>
  <li><a href='#'>菜單008</a></li>
</ul>

原始效果：


要將無(wú)序列表作為菜單使用需要修改的地方

由上圖可見(jiàn)，無(wú)序列表原始的形式是難以作為菜單的，如果想拿無(wú)序列表作為菜單，要修改的地方可能有：
1.列表項(xiàng)的圓點(diǎn)一定要去掉，否則影響視覺(jué)效果。
2.要能將縱向列表變成橫向，因?yàn)樵S多菜單是橫向的。
3.如果有必要，需要取消列表項(xiàng)的下劃線。

對(duì)UL進(jìn)行樣式設(shè)置以取消圓點(diǎn)

要取消無(wú)序列表左邊的圓點(diǎn)，我們可以使用CSS對(duì)UL進(jìn)行樣式設(shè)置，將其list-style-type屬性設(shè)置為none就可以了。示例代碼如下：

/**//* menuDiv里的橫向菜單*/
#menuDiv ul{}{
  margin:0;
  padding:0;
  list-style-type:none;
}
/**//* 類名為sideNav的div中的縱向菜單*/
.sideNav ul{}{
  margin:0;
  padding:0;
  list-style-type:none;
}

讓子項(xiàng)浮動(dòng)以修改列表項(xiàng)的方向

如果要將本為縱向的菜單改為橫向，可以將子項(xiàng)li的屬性float值改為left或是right，這樣子項(xiàng)就變成了向左浮動(dòng)或是向右浮動(dòng)，從縱向形式變成了橫向形式。示例如下：

/**//* menuDiv里的橫向菜單中的子項(xiàng)*/
#menuDiv li{}{
  float:left; 
  font-size: 16px; 
  color:#c49a8e;
    
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  margin-bottom:0px;
  
  padding-left:0px;
  padding-right:0px;
  padding-top:0px;
  padding-bottom:0px;
  
  border-right: 1px solid #000000; 
  border-top: 0px solid #000000; 
  border-left: 0px solid #000000; 
  border-bottom: 0px solid #000000;  
  
  background:url(../img/fadedarktdbg.jpg);
}

修改鏈接的text-decoration屬性以取消鏈接文字的下劃線
代碼如下：

#menuDiv li a{}{
 color:#c49a8e;
 text-decoration: none;
 background:url(../img/fadedarktdbg.jpg);
}

增加鏈接項(xiàng)的動(dòng)態(tài)背景效果

使用偽類選擇器，我們還可以給菜單項(xiàng)加上動(dòng)態(tài)效果，當(dāng)鼠標(biāo)掠過(guò)時(shí)能動(dòng)態(tài)變化菜單的背景色，這樣能使當(dāng)前菜單項(xiàng)更醒目。通過(guò)修改子項(xiàng)鏈接在平時(shí)和鼠標(biāo)掠過(guò)時(shí)給予不同的背景圖片就能辦到。

代碼示例如下：

/**//* 子項(xiàng)鏈接為淡黑背景*/
#menuDiv li a{}{
  color:#c49a8e;
  text-decoration: none;
  background:url(../img/fadedarktdbg.jpg);
}
/**//* 子項(xiàng)鏈接有鼠標(biāo)掠過(guò)時(shí)變成為深黑背景*/
#menuDiv li a:hover {}{
  color:#c49a8e;
  background:url(../img/darktdbg.jpg);
}

posted on 2008-09-27 11:57 sitinspring 閱讀(5740) 評(píng)論(4)  編輯  收藏 所屬分類: HTML,CSS&JS