亚洲系列第一页,757午夜视频国产精品,免费AV无码久久一本通

主頁 > 知識庫 > CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單

CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單

下拉及彈出式菜單是網(wǎng)站設(shè)計中常用導(dǎo)航形式，這種菜單形式能夠充分利用頁面現(xiàn)在空間隱藏與顯示更多內(nèi)容，并能對內(nèi)容進(jìn)行合理的分類顯示，是一種非常優(yōu)秀的導(dǎo)航形式。
　　早期的下拉或彈出式菜單通過隱藏的layer或div來實現(xiàn)內(nèi)容的隱藏，通過JavaScript腳本來響應(yīng)用戶的操作，目前也采用JavaScript+div或其它元素的形式來制作此類導(dǎo)航，不同的是整個導(dǎo)航都將使用符合標(biāo)準(zhǔn)的css布局來打造，不再使用表格來制作菜單，下拉式菜單是上面提到的橫向?qū)Ш脚c縱向?qū)Ш降慕Y(jié)合，而且通過css對于屬性的眾多支持，同一個菜單不再需要多個div相互配合完成，使用css布局來制作下拉菜單元，甚至可以直接控制ul或li元素，現(xiàn)在來嘗試一個最簡單的下拉菜單的制作，需要補充的是，下拉式菜單的實現(xiàn)利用了很多JavaScript技術(shù)，在這里對JavaScript技術(shù)不作過多的語法上的綜合了解，只想通過現(xiàn)有的實例來告訴大家由于css元素屬性的靈活性，而使用制作網(wǎng)頁上的元素更加簡單方便。先看一下目前所設(shè)計的導(dǎo)航的XHTML部分代碼：

ul id="nav">
    li>a href="">文章/a>
        ul>
            li>a href="">CSS教程/a>/li>
            li>a href="">DOM教程/a>/li>
            li>a href="">XML教程/a>/li>
            li>a href="">FLASH教程/a>/li>
        /ul>
    /li>
    li>a href="">參考/a>
        ul>
            li>a href="">XHTML/a>/li>
            li>a href="">XML/a>/li>
            li>a href="">CSS/a>/li>
        /ul>
    /li>
    li>a href="">BLOG/a>
        ul>
            li>a href="">全部/a>/li>
            li>a href="">網(wǎng)頁技術(shù)/a>/li>
            li>a href="">UI技術(shù)/a>/li>
            li>a href="">FLASH技術(shù)/a>/li>
        /ul>
    /li>
/ul>
ul>
    li>a href="">搖滾/a>/li>
    li>a href="">純音樂/a>/li>
    li>a href="">古典金曲/a>/li>
    li>a href="">電影原聲/a>/li>
/ul>

　　一個標(biāo)準(zhǔn)的采用ul結(jié)構(gòu)的菜單構(gòu)成，但與前面所不同的是，這里的代碼結(jié)構(gòu)涉及嵌套，在第一層的li之間插入了另一個ul的結(jié)構(gòu)，這就是多級菜單的一個代碼構(gòu)成模式，XHTML代碼允許通過嵌套元素來實現(xiàn)想要的效果或是結(jié)構(gòu)。下一步，我們嘗試編寫一些簡單的css樣式讓菜單變成所希望的橫向式：

ul { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}

　　第一步，對導(dǎo)航系統(tǒng)熱熱鬧鬧有ul元素進(jìn)行基本設(shè)置，list-style:none屬性能夠幫助我們?nèi)サ魎l中的所有圓點標(biāo)識。list-style屬性擁有其它更豐富的使用方法，將在后面的列表元素中重點了解。
　　我們希望導(dǎo)航是橫向的通過對li設(shè)置float:left屬性，將所有的li向左浮動，形成了橫向的布局，并嘗試使用每個li的寬度為100px，繼續(xù)編寫代碼：

li ul { display:none; top:20px;}

　　li ul的定義在這里所指的是所有l(wèi)i下面的ul元素，除了頂級的ul元素外，所有l(wèi)i下面定義的ul元素都將受到這部分樣式的定義。在這里使用top屬性設(shè)置了整個ul的上邊距，并使用display:none讓這部分被了起來。css中的怕有元素基本上都可以使用display屬性來控制顯示還是隱藏。

li:hover ul,li.over ul { display:block;}

　　li:hover ul定義了li元素下的ul元素。通過逗號分隔，讓這兩種情況下都能使用display:block屬性，display:block屬性和display:none屬性剛好相反，一個是隱藏，一個是顯示，當(dāng)設(shè)置為display:block時，不僅其指派的元素將顯示，而且還顯示成一個塊狀，如果不進(jìn)行display:block時，元素只會按自己的內(nèi)容在屏幕上占有的區(qū)域進(jìn)行顯示，而使用display:block時，元素將自己形成一個廣塊作為自己的點位符，這種設(shè)置對于做大按鈕來說是非常方便的。

　　在最下邊的預(yù)覽內(nèi)代碼你可以看到，里邊加上了和段js代碼，它是用來控制在IE瀏覽器下顯示下拉菜單的，本來li:hover ul這句是可以的，但I(xiàn)E對css的支持還還完善，所以需要借助JS來控制。
　　下面我們嘗試給下拉菜單增加一些樣式：

ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}

　　css布局的下拉菜單控制重點在于對元素的隱藏與顯示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉及多級彈出式菜單www.aa25.cn</title> <script type="text/javascript"><![CDATA[//><!]]></script> <style> ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} li ul { display:none; top:20px;} li:hover ul,li.over ul { display:block;} </style> </head> <body> <ul id="nav">     <li>文章         <ul>             <li>CSS教程</li>             <li>DOM教程</li>             <li>XML教程</li>             <li>FLASH教程</li>         </ul>     </li>     <li>參考         <ul>             <li>XHTML</li>             <li>XML</li>             <li>CSS</li>         </ul>     </li>     <li>BLOG         <ul>             <li>全部</li>             <li>網(wǎng)頁技術(shù)</li>             <li>UI技術(shù)</li>             <li>FLASH技術(shù)</li>         </ul>     </li> </ul> <ul>     <li>搖滾</li>     <li>純音樂</li>     <li>古典金曲</li>     <li>電影原聲</li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

標(biāo)簽：樂山河南沈陽新疆滄州紅河上海長治

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單

QQ咨詢

電話咨詢