如何設(shè)計多級菜單列表

多級下拉菜單在一些企業(yè)網(wǎng)站應(yīng)用非常廣泛,它存在使用方便、占用空間小等特點(diǎn)。本節(jié)將介紹橫網(wǎng)頁設(shè)計中向?qū)Ш讲藛蔚亩壊藛蔚闹谱鞣椒ǎ瑥亩M(jìn)一步說明列表在制作導(dǎo)航菜單上的應(yīng)用。

【操作步驟】

第1步,啟動Dreamweaver,新建一個網(wǎng)頁,保存為index.html。

第2步,構(gòu)建網(wǎng)頁的基本結(jié)構(gòu)。本例中由兩層嵌套的<ul>標(biāo)簽定義了二級菜單。

<div class="menu">    

<ul>        

<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="#">查 看</a>            

<ul>                

<li><a href="#">工具欄</a></li>                

<li><a href="#">標(biāo) 尺</a></li>                

<li><a href="#">縮 放</a></li>            

</ul>        

</li>        

<li><a href="#">修 改</a>            

<ul>                

<li><a href="#">屬 性</a></li>                

<li><a href="#">樣 式</a></li>            

</ul>        

</li>        

<li><a href="#"> 窗 口</a>            

<ul>                

<li><a href="#">歷史記錄</a></li>                

<li><a href="#">顏 色</a></li>                

<li><a href="#">時間軸</a></li>            

</ul>        

</li>    

</ul>    

<div class="clear"> </div>

</div>

第3步,在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,定義網(wǎng)頁的menu容器樣式,并定義一級菜單中列表樣式。

.menu {/*menu樣式類*/    

font-family:"黑體";      /*定義整個menu容器中的字體為黑體*/    

width:440px;             /*menu容器寬度*/    

margin:0;                /*定義四周補(bǔ)白為0*/}

.menu ul {/*定義一級菜單中列表樣式*/    

padding:0;               /*一級菜單中列表的內(nèi)邊距為0*/    

list-style-type: none;   /*不顯示項目符號*/}

.menu ul li {    float:left;              /*使菜單項橫向顯示*/    

position:relative;       /*定義一級菜單中列表的定位方式為相對定位*/}

在以上代碼中,定義了一級菜單的樣式,其中<li>標(biāo)簽中,通過float:left語句使原來豎向顯示的列表項橫向顯示,并用position:relative語句設(shè)置其position屬性為相對定位。

第4步,設(shè)置一級菜單中的<a>標(biāo)簽的樣式和<a>標(biāo)簽在已訪問過時和鼠標(biāo)懸停時的樣式。

.menu ul li a, 

.menu ul li a:visited {         /*定義一級菜單中a對象樣式及a對象在已訪問過時的樣式*/    

display:block;                             /*定義為塊級元素*/    text-align:center;                         /*居中對齊*/

text-decoration:none;                      /*不顯示下劃線*/   

 width:104px;                               /*定義菜單的寬度*/    

height:30px;                               /*高寬*/    

color:#fff;                                /*字體顏色*/    border:1px solid #666;                     /*定義邊框*/    

background: #252525;                       /*背景顏色*/    

line-height:30px;                          /*行間距*/   

 font-size:14px;                            /*字體大小*/}

.menu ul li:hover a {/*鼠標(biāo)懸停時<a>標(biāo)簽樣式*/    

color:#fff;                                /*鼠標(biāo)懸停時改變字體顏色為#fff*/}

在以上代碼中,首先定義了a為塊級元素,border: 1px solid #fff語句雖然定義了網(wǎng)站建設(shè)中菜單項的邊框樣式,但是由于border-width:1px 1px 0 0的作用,所以在這里只顯示上邊框和右邊框,下邊框和左邊框由于寬度為0,所以不顯示任何效果。在這里值得注意的是,既定義了height:30px,又定義了line-height: 30px,兩者的區(qū)別在于height定義的是整個a塊的高度,而line-height定義的是文字的行高,在這里,line-height還有一個作用就是一行30個像素,文字會相對于這30個像素垂直居中顯示。

第5步,設(shè)置二級菜單樣式。

.menu ul li ul {/*二級菜單中ul樣式*/    display: none;                            /*將二級菜單設(shè)置為不顯示*/}

.menu ul li:hover ul {/*鼠標(biāo)劃過一級菜單的ul時,二級菜單才顯示*/    

display:block;                           /*定義為塊級元素 */    position:absolute;                       /*絕對定位*/    

top:31px;                                /*相對其父標(biāo)簽的位置*/    

left:0px;                                /*相對其父標(biāo)簽的位置*/   

 width:105px;                             /*寬度*/}

在以上代碼中,首先定義了二級菜單的<ul>標(biāo)簽樣式,display:none語句的作用是將其所有內(nèi)容隱藏,并且使其不再占用文檔中的空間;然后定義了一級菜單中<li>標(biāo)簽的偽類,當(dāng)鼠標(biāo)經(jīng)過一級菜單時,二級菜單開始顯示,這就實(shí)現(xiàn)了我們想要的效果,目前IE6只支持a的偽類,其他標(biāo)簽的偽類不支持。在menu ul li:hover ul中設(shè)置了posi-tion:absolute屬性,也就是絕對定位,它將脫離原來文檔流,以其父標(biāo)簽的原點(diǎn)為原點(diǎn)定位,其定位為top:31px;left:0px,為什么是31px呢,因?yàn)槠涓讣墭?biāo)簽的height屬性為30px,所以,在設(shè)計網(wǎng)頁時,如果想要在一級菜單下顯示,就應(yīng)該是31px的位置;width:105px,是由于一級菜單的width是104px,加上右邊框的1px,正好是105px。

第6步,設(shè)置二級菜單的鏈接樣式和鼠標(biāo)懸停時的效果。

.menu ul li:hover ul li a {/*二級菜單鏈接樣式*/    display:block;   

 background:#ff4321;  /*二級菜單背景色*/    color:#000;                                           /*二級菜單字體顏色*/}

.menu ul li:hover ul li a:hover {/*二級菜單的鼠標(biāo)懸停樣式*/    

background:#dfc184;                                   /*二級菜單的鼠標(biāo)懸停時背景色*/    

color:#000;                                           /*二級菜單的鼠標(biāo)懸停時的字體顏色*/}

在以上代碼中,設(shè)置了二級菜單的背景色、字體顏色和鼠標(biāo)懸停時的背景色、字體顏色。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)