CSS下拉及多級(jí)彈出式菜單_Div+CSS教程
下拉及彈出式菜單是網(wǎng)站設(shè)計(jì)中常用導(dǎo)航形式,這種菜單形式能夠充分利用頁面現(xiàn)在空間隱藏與顯示更多內(nèi)容,并能對(duì)內(nèi)容進(jìn)行合理的分類顯示,是一種非常優(yōu)秀的導(dǎo)航形式。
早期的下拉或彈出式菜單通過隱藏的layer或div來實(shí)現(xiàn)內(nèi)容的隱藏,通過JavaScript腳本來響應(yīng)用戶的操作,目前也采用JavaScript+div或其它元素的形式來制作此類導(dǎo)航,不同的是整個(gè)導(dǎo)航都將使用符合標(biāo)準(zhǔn)的css布局來打造,不再使用表格來制作菜單,下拉式菜單是上面提到的橫向?qū)Ш脚c縱向?qū)Ш降慕Y(jié)合,而且通過css對(duì)于屬性的眾多支持,同一個(gè)菜單不再需要多個(gè)div相互配合完成,使用css布局來制作下拉菜單,甚至可以直接控制ul或li元素,現(xiàn)在來嘗試一個(gè)最簡單的下拉菜單的制作,需要補(bǔ)充的是,下拉式菜單的實(shí)現(xiàn)利用了很多JavaScript技術(shù),在這里對(duì)JavaScript技術(shù)不作過多的語法上的綜合了解,只想通過現(xiàn)有的實(shí)例來告訴大家由于css元素屬性的靈活性,而使用制作網(wǎng)頁上的元素更加簡單方便。先看一下目前所設(shè)計(jì)的導(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>
一個(gè)標(biāo)準(zhǔn)的采用ul結(jié)構(gòu)的菜單構(gòu)成,但與前面所不同的是,這里的代碼結(jié)構(gòu)涉及嵌套,在第一層的li之間插入了另一個(gè)ul的結(jié)構(gòu),這就是多級(jí)菜單的一個(gè)代碼構(gòu)成模式,XHTML代碼允許通過嵌套元素來實(shí)現(xiàn)想要的效果或者結(jié)構(gòu)。下一步,我們嘗試編寫一些簡單的css樣式讓菜單變成所希望的橫向式:
- ul { padding:0; margin:0; list-style:none;}
- li { float:left; width:100px;}
第一步,對(duì)導(dǎo)航系統(tǒng)所有ul元素進(jìn)行基本設(shè)置,list-style:none屬性能夠幫助我們?nèi)サ魎l中的所有圓點(diǎn)標(biāo)識(shí)。list-style屬性擁有其它更豐富的使用方法,將在后面的列表元素中重點(diǎn)了解。
我們希望導(dǎo)航是橫向的通過對(duì)li設(shè)置float:left屬性,將所有的li向左浮動(dòng),形成了橫向的布局,并嘗試使用每個(gè)li的寬度為100px,繼續(xù)編寫代碼:
- li ul { display:none;}
li ul的定義在這里所指的是所有l(wèi)i下面的ul元素,除了頂級(jí)的ul元素外,所有l(wèi)i下面定義的ul元素都將受到這部分樣式的定義。使用display:none讓這部分被隱藏起來。css中的的有元素基本上都可以使用display屬性來控制顯示還是隱藏。
- li:hover ul,.over ul { display:block;}
li:hover ul定義了li元素下的ul元素。通過逗號(hào)分隔,讓這兩種情況下都能使用display:block屬性,display:block屬性和display:none屬性剛好相反,一個(gè)是隱藏,一個(gè)是顯示,當(dāng)設(shè)置為display:block時(shí),不僅其指派的元素將顯示,而且還顯示成一個(gè)塊狀,如果不進(jìn)行display:block時(shí),元素只會(huì)按自己的內(nèi)容在屏幕上占有的區(qū)域進(jìn)行顯示,而使用display:block時(shí),元素將自己形成一個(gè)廣塊作為自己的點(diǎn)位符,這種設(shè)置對(duì)于做大按鈕來說是非常方便的。
在最下邊的預(yù)覽內(nèi)代碼你可以看到,里邊加上了一段js代碼,它是用來控制在IE瀏覽器下顯示下拉菜單的,本來li:hover ul這句是可以的,但I(xiàn)E對(duì)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布局的下拉菜單控制重點(diǎn)在于對(duì)元素的隱藏與顯示。
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 解決列高度自適應(yīng)的五種方法!
- DivCSS布局?jǐn)U展技巧和用法
- 標(biāo)準(zhǔn)下隔行換色的思考
- 標(biāo)題元素、段落和強(qiáng)制換行如何正確使用?
- WEB2.0標(biāo)準(zhǔn)教程:如何應(yīng)用WEB標(biāo)準(zhǔn)改善現(xiàn)有網(wǎng)站?
- 酷:你的標(biāo)記你作主,自定義標(biāo)記網(wǎng)頁布局!
- CSS兼容:如何兼容IE7和IE8
- CSS入門教程:縱向下拉及多級(jí)彈出式菜單
- DivCSS:并非所有內(nèi)容都必須要div做“容器”
- 十四個(gè)可以節(jié)省時(shí)間的CSS工具
猜你也喜歡看這些
- css javascript圖片自動(dòng)同比例縮小并且實(shí)現(xiàn)垂直居中
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- CSS表格樣式:CSS JS打造可伸縮的表格
- jquery模擬瀏覽器滾動(dòng)條效果
- CSS實(shí)例:無懈可擊的CSS圓角技術(shù)!
- CSS實(shí)例:常用的CSS隱藏文字的方法
- DIV CSS布局實(shí)例:半透明陰影效果的實(shí)現(xiàn)
- DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁效果
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- 一個(gè)非常棒的DIV CSS導(dǎo)航條效果!
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS下拉及多級(jí)彈出式菜單。