JS實現仿京東淘寶豎排二級導航_javascript技巧
- WBOY原創
- 2016-05-16 16:28:221934瀏覽
程式碼很簡單，就不多廢話了，直接奉上程式碼：
複製程式碼 程式碼如下:
標題>
函數hoversee(){
var list = document.getElementById('nav');
var zu = list.getElementsByTagName("li");
for(var i=0;i {
zu[i].onmouseover = function(){
this.getElementsByTagName('dl')[0].style.display = "block";
}
zu[i].onmouseout = function(){
this.getElementsByTagName('dl')[0].style.display = "none";
}
}
}
window.onload=hoversee;
腳本>
*{
字型系列：微軟雅黑；
邊距：0；
填入：0；
}
正文{寬度:100%;}
ul{列表樣式：無;}
a{文字裝飾：無;}
#標題{
高度：50px；
行高：50px;
背景：#455A6E;
}
#標題 h2,#標題 h3{
字體粗細：500；
}
#標題 h2{
顏色：#fff;
字體大小：18px;
寬度：180px；
文字對齊：置中；
背景：#0D2E49;
}
#header h3{顏色：#fff;字體大小：16px;}
.mycenter{
寬度：900px；
邊距：0 自動；
}
#header div.mycenter{
/*相對定位*/
位置：相對；
}
#nav {
寬度：180px；
背景:rgba(0, 102, 173, 0.5);
z 索引：999；
}
#nav李{
高度：40px；
左內邊距：40px;
行高：40px；
位置：相對；
}
#nav h3{高度:40px;}
#nav li dl{
位置：相對；
左：140px;
上方：-40px；
寬度：150px；
背景：#fff;
顯示：無；
內邊距：8px 10px;
}
#nav dt{
寬度：150px；
行高：30px；
高度：30px；
背景：#36C1AF;
顏色：#fff;
文字對齊：置中；
}
#nav dd a{
顯示：塊；
高度：30px；
寬度：150px；
font-size:14px;
color:#858585;
}
#nav dd a:hover{
text-decoration: underline;
}
#content{
background:#E95200;
height:500px;
}
後台管理選單
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn