萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 網頁菜單詳解

網頁菜單詳解

 首先看這下面的例子(鼠標移上去):

  Link 1

  Link 2

  Link 3

  Link N

  菜單實例

  類似這樣的仿Windows下拉菜單,在網上是比較常見的,最初出現在微軟網站上,之後被大量效仿。 事實上制作這樣一個模擬菜單也並不是一件很困難的事,比如上面的例子代碼如下:

  -------------------------------------------

  <!-- 樣式部分 -->

  <style type=text/css>

  td,div { font: normal 12px 宋體; }

  a  { color: #F8F8F8; text-decoration: none; }

  a:hover  { color: #F8F8F8; text-decoration: underline; }

  </style>

  <!-- 實現部分 -->

  <div

  

  onmouseout="myMenu.style.display='none'">

  <div >

  <div id=myMenu >

  &nbsp;Link 1<br>

  &nbsp;Link 2<br>

  &nbsp;Link 3<br>

  &nbsp;<br>

  &nbsp;Link N<br>

  </div>

  </div>

  菜單實例

  </div>

  -----------------------------------  那麼下面我們就由淺入深的對這種模擬菜單進行分析講解。

  在講解之前,有一點需要說明的是:筆者在後面講解的代碼都基於當前的主流浏覽器Microsoft Internet Explorer(即我們通常所說的IE)下的。筆者進行調試的浏覽器是IE 5.01。另外,這樣一個菜單體現的是HTML/CSS/javascript的綜合應用,這裡並不對一些細節進行詳細的講解,所以你至少應該有一點這方面的基礎。

  基本原理

  其實,這個菜單實現的原理簡單的說就是:設置頁面元素的CSS屬性,對其進行定位並設置其是否可見,然後通過激發一定的事件,用javascript來動態的改變這些屬性。

  看下面幾個CSS屬性:

  position:定位類型,取值static/absolute/relative,其代表的含義簡單的說即無定位/絕對定位/相對定位;

  left:距離左側的位置(具體的參照物與position的設置有關),單位為px或%;

  top:距離頂部的位置(具體的參照物與position的設置有關),單位為px或%。

  display:頁面元素的顯示狀態,如取值block表示做為塊狀元素顯示,none則為不顯示,還有其他一些取值(如inline等)這裡就不做詳解。

  比如上例中的“div id=myMenu myMenu.style.display='block'"”就是一個很普通的用法,其中myMenu即我們所看到的“菜單”的ID,它原來的display為none,即不顯示,當鼠標移上去時,變為block,即塊狀顯示。

  另外要提的是:前面只說了如何實現定位、如何動態控制,那麼定位的、控制的是什麼元素呢?原則上來講,大部分塊狀元素(如div、table)都可以,而在IE中,div標記(注意,在一些非IE浏覽器中,並不支持div標記)因其使用的靈活性和方便性而做為我們的首選。上例使用的就是div標記。

  好啦,基本的過程,上面大致已經說完了,在下一章,我們將看到使用上面提到的技術來實現一個簡單的菜單。

  模擬網頁下拉菜單中有幾個比較關鍵的CSS屬性:position、left、top、display,同時,他們也是style對象的屬性,今天我們就用這幾個基本屬性來實現一個簡單的網頁菜單。

  首先請大家看筆者已經做好的一個實例,然後我們對這個例子進行詳細代碼講解。

  為大家閱讀方便,這裡采用在代碼中加注釋的方式,紅色部分為注釋。

  代碼如下:

  ------------------------------------------------------

  <html>

  <head>

  <title>菜單實例</title>

  <style type=text/css>

  td,div  { font: normal 12px 宋體; }

  </style>

  </head>

  <body >

  <table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC>

  <tr>

  <td width=10> </td>

  <td width=80 align=center

  onmouseout="menuHide(menu01)">菜單實例</td>

  <!--

  上兩行為菜單中顯示的文字,注意這裡面的事件觸發:

   鼠標經過時顯示菜單;

  onmouseout="menuHide(menu01)" 鼠標移走時隱藏菜單。

  參數menu01即要顯示的菜單的id,將在接下來的代碼中看到。

  menuShow與menuHide分別為顯示、隱藏菜單方法,將在後面定義。

  -->

  <td> </td>

  </tr>

  </table>

  <div id=menu01

   onmouseout="menuHide(this)">

  <!--

  以上三行,定義了菜單的一些屬性,注意“id=menu01”,前面提到過。

  position、top、left、display四個CSS屬性即上一章講過的;

  width、height、background-color分別為寬度、高度、背景色。

  這裡再一次出現 onmouseout="menuHide(this)",

  就是說當鼠標從菜單按鈕上移開,如果是移到了菜單上,菜單仍然顯示。

  注意這裡參數是this而不是menu01,this即對象本身,在這裡就是指menu01,所以結果相同。

  在這裡筆者有意使用this,只是想告訴大家一個技巧,這在很多時候非常方便。

  -->

  <br>   菜單內容

  </div>

  <script language=javascript>

  function menuShow(menu) //定義顯示菜單的方法,參數menu即菜單的id。

  {

  menu.style.display='block';

  //注意這裡如何用javascript改變style對象的屬性來達到改變CSS屬性的目的。

  }

  function menuHide(menu) //定義隱藏菜單的方法,參數menu即菜單的id。

  {

  menu.style.display='none';

  //同上

  }

  </script>

  </body>

  </html>

  ------------------------------------------------------  這樣,一個簡單的菜單就實現了,只要你略有一些相關的基礎知識,反復體會一下我加的注釋,就應該可以理解了,是不是並不難?

  這個菜單現在看上去還有點簡陋,下次我們將對這個菜單進行進一步的修飾。

  這一章,我們就來討論如何美化它。

  美化主要表現在鼠標放到菜單上後(即鼠標懸停)的效果,這裡首先介紹幾個經常用到的CSS屬性:

  background-color:背景色,其值為一個顏色值,如“#FF0000”、“red”。

  border:邊框樣式,一個形如“寬度 樣式 顏色”的字符串,如“1px solid red”,即1px的紅色實線邊框。

  cursor:鼠標指針樣式,取值為表示鼠標指針樣式的字符串,如“hand”、“help”,即小手、幫助狀態。

  以上只是簡單的介紹了幾個在此類菜單中非常常見的CSS屬性,這裡也並未做很詳盡的解釋(畢竟這些並不是我們要講解的重點),欲了解更多可參閱相關資料。筆者在這裡想說的是:掌握更多的CSS屬性會對你有所幫助。

  前面說了,美化主要表現在鼠標放到菜單上後的效果,那麼如何用javascript來控制樣式的變化呢?或者你會想到前面講過的style對象,的確,用style可以達到目的,但是,很多時候,需要改變很多個CSS屬性,用style就顯得有些麻煩。我們再來介紹一個新的屬性:className。

  className屬性對應的就是CSS的class,也即所謂的偽類,比如在某個標記中設置class=myName,那麼這時該元素的className屬性就是myName。

  來看下面這個例子:

  --------------------------------------------

  <style type="text/css">

  .style_normal { color: gray; }

  .style_over  { color: red; }

  </style>

  <span class=style_normal

  onmouseout="this.className='style_normal'">

  鼠標移上來,通過className屬性改變這段文字的class,使文字顏色變成紅色;

  移走,又恢復原來的顏色。</span>

  ----------------------------------------------

  效果如下(把鼠標放到文字上):

  我們看到,在處理相對復雜的樣式變化的情況下,用className就方便得多了,至於樣式如何變化,就變成如何定義class的問題了。

  講到這裡,我想有一定CSS基礎的朋友應該已經清楚如何來修飾這個菜單了,即便你對CSS了解的還不多,前面已經介紹了幾個較常用的屬性。所以,這裡就不再多講了,最後提供兩個筆者做好的例子,希望你能從中受到啟發(查看源文件即可看到相應的代碼,相應位置加了注釋,在此就不另行給出)。

  1. 一個簡單的背景變化

  2. 仿office XP菜單效果

  上面兩例都用了灰色,你當然可以改成你自己喜歡的顏色。這兩例也是比較常見的效果,這裡提供給大家也

copyright © 萬盛學電腦網 all rights reserved