首頁 > web前端 > js教程 > JS實現仿京東淘寶豎排二級導航_javascript技巧

JS實現仿京東淘寶豎排二級導航_javascript技巧

WBOY
發布: 2016-05-16 16:28:22
原創
1977 人瀏覽過

程式碼很簡單,就不多廢話了,直接奉上程式碼:

複製程式碼 程式碼如下:






標題>




    函數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;
    }



   
   

   

   

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板