成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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

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

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

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

　　第一步，對導航系統熱熱鬧鬧有ul元素進行基本設置，list-style:none屬性能夠幫助我們去掉ul中的所有圓點標識。list-style屬性擁有其它更豐富的使用方法，將在后面的列表元素中重點了解。
　　我們希望導航是橫向的通過對li設置float:left屬性，將所有的li向左浮動，形成了橫向的布局，并嘗試使用每個li的寬度為100px，繼續編寫代碼：


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

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


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

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

　　在最下邊的預覽內代碼你可以看到，里邊加上了和段js代碼，它是用來控制在IE瀏覽器下顯示下拉菜單的，本來li:hover ul這句是可以的，但IE對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布局的下拉菜單控制重點在于對元素的隱藏與顯示。
下拉及多級彈出式菜單www.aa25.cn 文章 CSS教程 DOM教程 XML教程 FLASH教程 參考 XHTML XML CSS BLOG 全部 網頁技術 UI技術 FLASH技術 搖滾 純音樂 古典金曲 電影原聲
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

網頁