您現在的位置是:電腦技術吧?>? 編程技術 ??>??網頁菜單設計,網頁二級菜單怎么設置??>??正文詳情

網頁菜單設計,網頁二級菜單怎么設置

支心香2019-11-06 08:51:27 人圍觀
簡介網頁二級菜單設計首先,看下面的例子(鼠標向上):link 1 link 2 link 3 link n菜單示例與這個類似于windows的下拉菜單類似,在Internet上很常瀏覽器文件菜單在哪

首先看這下面的例子(鼠標移上去):  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 1br  nbsp;Link 2br  nbsp;Link 3br  nbsp;br  nbsp;Link Nbr  /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菜單效果  上面兩例都用了灰色,你當然可以改成你自己喜歡的顏色。

這兩例也是比較常見的效果,這里提供給大家也算是拋磚引玉。

相信開動你的腦筋、合理的運用掌握的技術,會做出更漂亮的效果!  通過前三篇文章的講解,現在我們已經可以實現一個基本的菜單了。

這一章,我們來討論一下定位的問題。

  在前幾章講的例子中,定位都是相對于整個網頁的左上角。

在有一些時候,我們可能需要它相對于網頁中某個元素定位,這樣做在某些時候是非常有必要的,比如不會出現那種因窗口大小的改變而致使菜單與網頁中的一些元素的相對位置發生變化。

在第一章的最初,筆者所給的例子中就是這樣做的。

  在那里我們很方便把就把這個菜單插入到了網頁中,而菜單不會相對菜單按鈕的位置發生變化。

下面我們就看看如何來實現。

  在第一章,我們講過position,當它取值absolute的時候,即絕對定位。

既然是定位,就要有參照物。

一般來講,這個定位的參照物是body(即整個網頁)的左上角,但如果其父級元素中有設置了position:absolute的元素,那么它的參照物就是該元素。

知道了這樣一個特性,我們就可以很容易的來實現了。

  另外,有一點在這里必須要著重說明一下,前面同時也講過,當position的值為relative時,就是相對定位,為什么不用它來實現呢?

我們必須要正確理解這里所謂的相對定位:它是指相對于原來在HTML中的位置所發生的偏移,而它仍占據原來在HTML中所占據的位置。

而我們現在的菜單需要懸浮在網頁元素之上,而這只有當position設為absolute時才可以做到。

  通過上面的講述,我們應該可以大致的了解其實現的原理了。

下面就看看剛才在上面看到的那個菜單的代碼(注意里面的注釋會幫你加深理解)。

  -------------------------------------------------------------------------------  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   !--注意上面的DIV,設置了position:absolute,但是并沒有設置left/top,  所以這時它仍與一個普通的HTML元素一樣,出現在它應該出現的位置。

--  div id=myMenu   !--它的定位是相對于前一個DIV而不是Body,  因為前一個DIV設置了position:absolute--  Link 1br  Link 2br  Link 3br  br  Link Nbr  /div  /div  菜單實例  /div-------------------------------------------  請仔細理解上面的代碼,相信大家對用CSS進行絕對定位會有一個更深層次的認識!  這里說一句題外話:這種定位可以用Dreamweaver來實現(這對于對JS不是很熟的朋友來講的確很方便),而事實上這樣做生成的代碼的原理與上面講的相同的。

把上面講的原理弄清楚了,使用起來會更靈活。

版權聲明:本文由 支心香 整理編輯。

原標題:菜單,網頁菜單

轉載注明出處:http://www.dn9ww09s.icu/program/11250.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 內存條可以不同品牌嗎,內存條品牌

    內存條可以不同品牌嗎,內存條品牌 相關圖片國產內存條有什么品牌內存模塊是計算機的重要硬件,直接影響計算機的速度和穩定性內存越大,計算機就越快。我們都知道,存儲模塊的質量和穩定性對很多朋友來說不是很清楚很多...

  • 筆記本開不了機,筆記本電腦關不了機怎么解決

    筆記本開不了機,筆記本電腦關不了機怎么解決 相關圖片筆記本突然開不了機筆記本電腦也被稱為“便攜式電腦”,因為它的體積小,攜帶方便,深受廣大用戶的喜愛,但筆記本也有缺點,在使用過程中很容易出現問題,筆記本開不了機相信...

  • css行內元素,css元素分類

    css行內元素,css元素分類 相關圖片css元素選擇器一。可更換元件和不可更換元件根據各自的特點可分為可更換元件和不可更換元件a)替換元素替換元素是瀏覽器根據元素的標簽和屬性確定元素的具體顯示內容。例如,瀏...

  • 惠普筆記本好用嗎,惠普筆記本怎么樣

    惠普筆記本好用嗎,惠普筆記本怎么樣 相關圖片聯想和惠普根據小編的一項調查,用戶對惠普筆記本電腦的使用評價與其他品牌電腦相比相對較高。很多網友認為惠普的電腦性能比較好,但近年來,隨著越來越多的其他品牌電腦上市...

  • 光影涂鴉,光影涂鴉怎么拍

    光影涂鴉,光影涂鴉怎么拍 相關圖片手機拍攝光影涂鴉這種沒有繪畫的涂鴉很受歡迎它的魅力不僅體現在夜晚的輝煌,更體現在人們對一幅隨時都會幻滅的美麗圖畫的迷戀總之,在黑暗中,用手電筒對著相機,揮手拍照。...

  • 戴爾筆記本黑屏怎么辦,戴爾筆記本開機黑屏

    戴爾筆記本黑屏怎么辦,戴爾筆記本開機黑屏 相關圖片戴爾電腦黑屏我相信每個人都知道筆記本里有個叫戴爾的人。戴爾筆記本電腦是全球個人電腦銷售500強企業,因此戴爾筆記本電腦仍然深受用戶歡迎。而據網友反映,戴爾的售后服務也...

  • 漸隱用不了,漸隱

    漸隱用不了,漸隱 相關圖片ps怎么做漸隱問了很多,其實漸開線的方法很簡單一般來說,有兩種方法:一種是矩形填充另一種是矩形法(適用于大多數情況):1使用矩形工具繪制像素高度為的矩形2在面板上選擇“...

  • 怎樣給筆記本降溫,筆記本降溫

    怎樣給筆記本降溫,筆記本降溫 相關圖片筆記本降溫神器筆記本的便攜性贏得了大眾的青睞,筆記本的散熱一直保持著相對較高的關注度。專家認為,筆記本電腦的理想工作溫度比周圍環境高出30度,但事實上,這樣理想的工作...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用焰火來創建水晶般清晰的效果。讓我們學習以下內容。首先,看看最終效果圖:第一步是隨意創建一個新的畫布,填充背景色為000066,畫出鋼筆的...

  • 筆記本小鍵盤怎么切換,聯想筆記本小鍵盤切換

    筆記本小鍵盤怎么切換,聯想筆記本小鍵盤切換 相關圖片聯想筆記本小鍵盤怎么關閉筆記本電腦以其體積小、便攜性強等特點,成為目前最主流的個人電腦產品。越來越多的朋友在購買電腦時選擇筆記本作為首選,使用筆記本的問題也在不斷...

熱評文章

  • 電腦突然黑屏,電腦突然黑屏怎么辦

    電腦突然黑屏,電腦突然黑屏怎么辦 相關圖片電腦黑屏在使用計算機時,我們經常遇到一些計算機問題而不知所措例如,用戶經常會遇到黑屏的情況對于初學者來說,這似乎是一場電腦災難,無所適從其實,只要你明白原因,就不...

  • 葡萄酒酒瓶,紅酒瓶

    葡萄酒酒瓶,紅酒瓶 相關圖片紅酒開瓶器怎么用看上去精致漂亮的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀通過這些形狀的組合,我們可以得到一個瓶身然后...

  • n卡自帶幀數,n卡自帶幀數怎么開

    n卡自帶幀數,n卡自帶幀數怎么開 相關圖片n卡顯示幀數GeForce Experience可以通過提醒新的Divia運行和關閉,以及根據硬件配置優化游戲中的圖形設置來優化您的PC。這樣,您的計算機就可以保持最新,并n卡自帶fps...

  • 一鍵啟動怎么用,一鍵卸載大師

    一鍵啟動怎么用,一鍵卸載大師 相關圖片一鍵啟動正確用法圖解當我們使用計算機時,打開網頁的概率可以高達70-80%當我們打開互聯網時,我們可以使用高達80%的搜索功能但編輯近日發現,一些網友并不太擅長使用網頁的搜索...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符style type=text/css!--p{text indent:2em;/*em是相對單位,2em是當前一個單詞大小*/}--/stylep段落前面兩個各段落懸掛縮進2字符...

  • windows產品密鑰,windows7產品密鑰

    windows產品密鑰,windows7產品密鑰 相關圖片windows密鑰有些東西需要密鑰或密碼才能打開或使用Windows系統也是如此我們并不是說它可以在安裝后永久使用,但只能在使用Windows的產品密鑰激活后使用。今天,我要給你window7產品激活...

  • 如何創建站點,創建站點內容

    如何創建站點,創建站點內容 相關圖片站內站如何創建在開始之前,本教程假設您對HTML、CSS和JavaScript有一些基本的經驗假設您知道什么是html元素或標記,什么屬性表示,html標記的基本語法,webweb站點怎么創建...

  • 未來人類筆記本怎么樣,戴爾外星人筆記本

    未來人類筆記本怎么樣,戴爾外星人筆記本 相關圖片外星人筆記本隨著越來越多的筆記本電腦的出現,我們對筆記本電腦的要求也越來越高每個人都想要一個設備好、價格適中的筆記本。所以我們在購買時,應該仔細查看它的相關配置信...

  • qq8.0.8版本有什么功能,微信更新版本后的功能

    qq8.0.8版本有什么功能,微信更新版本后的功能 相關圖片QQ新版本功能Adobe Flash professional CS5軟件可用于創建精彩的交互,并可用于在幾乎任何大小和分辨率的個人計算機、移動設備和屏幕上提供持續呈現的迷人蘋果版本...

  • word2007產品密鑰在哪看,2010word產品密鑰

    word2007產品密鑰在哪看,2010word產品密鑰 相關圖片word產品密鑰office是我們在使用計算機時經常使用的一種軟件,因為它可以幫助我們處理表格、文字等。但是我們都知道,如果我們想永久使用office,就需要激活office,word2007激活密鑰...

關注微信

变脸官网查询