許多企業門戶網站幾乎都有導航欄,各種風格,看起來很炫,這里將接一下如何用CSS+DOM操作實現一個精美的導航欄,數據在HTML中展示,這里采用無序列表<li>標簽進行數據展示.
代碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>導航-下拉菜單</title> </head> <body> <ul id="nav"> <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="#">基金理財</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="#">基財客服</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="#">校園招聘</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> </body> </html>
此時的效果圖如下:
接下來為HTML頁面添加CSS樣式布局+Javascript代碼進行DOM節點操作.代碼比較簡單直接貼了,
<style> *{ margin:0; padding:0; } body{ font-size:12px; } a{ display:block; color:white; width:185px; text-align:center; text-decoration:none; } a:hover{ color:white; background:#C00; } /*主菜單樣式*/ #nav{ line-height:40px; list-style-type:none; background-color:#404040; margin-left:100px; } /*一級菜單樣式*/ #nav li{ float:left; width:185px; font-family:"微軟雅黑","Times New Roman",Georgia,Serif; font-size:14px; border-right:1px solid gray; background:#404040; } /*二級菜單列表的樣式*/ #nav li ul{ line-height:35px; position:absolute; left:-1000px; list-style-type:none; text-align:center; width:185px; /*很有趣的屬性,該屬性可以改變下拉列表顯示方式,185為寬度表示單位寬 185*2時則下拉列表列為2顯示*/ } /*二級菜單項的樣式*/ #nav li ul li{ background:#CCC; border:0px solid white; } /*二級菜單項中的超鏈接*/ #nav li ul a{ width:185px; text-align:center; font-size:12px; color:#F6F6F6; } /*鼠標移動到一級菜單后應用的樣式*/ #nav li.mouseover ul{ left:auto; } </style> <script> function createMenu(){ var items= document.getElementById("nav").getElementsByTagName("li"); for(var i=0; i<items.length; i++){ items[i].onmouseover = function(){ this.className="mouseover"; } items[i].onmouseout = function(){ this.className=""; } } } </script>
保存,然后通過瀏覽器解析,即可得到如下漂亮的效果圖.
當然,這樣的下拉列表是單個的,我們在有些情況下見到的下拉列表中可能並排顯示.因為實例中我們定義的列表寬度為185px,所以我們可以通過修改二級欄目的CSS屬性的寬度值實現下拉列表並排顯示的效果.
需要修改的代碼如下:
/*二級菜單列表的樣式*/
#nav li ul{
line-height:35px;
position:absolute;
left:-1000px;
list-style-type:none;
text-align:center;
width:370px; /*很有趣的屬性,該屬性可以改變下拉列表顯示方式,185為寬度表示單位寬 185*2時則下拉列表列為2顯示*/
}
此時達到的效果將是下圖所示：
至此,我們漂亮的導航欄就制作完成啦！謝謝捧場！
轉載請注明出處:[http://www.cnblogs.com/dennisit/archive/2013/03/20/2971431.html]
