JS は京東淘宝_javascript スキルを模倣した垂直セカンダリナビゲーションを実装します-jsチュートリアル-php.cn

JS は京東淘宝_javascript スキルを模倣した垂直セカンダリナビゲーションを実装します

WBOY

リリース： 2016-05-16 16:28:22

オリジナル

1933 人が閲覧しました

コードは非常に単純なので、あまり意味のないことには触れず、コードだけを示します。

コードをコピーコードは次のとおりです:

<頭>

<メタ名="説明" コンテンツ="">
<メタ名="キーワード" コンテンツ="">

<スクリプトタイプ="text/javascript">
    関数 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 = "ブロック";
        }
        zu[i].onmouseout = function(){
            this.getElementsByTagName('dl')[0].style.display = "none";
        }
    }
    }
    window.onload = hverseee;

<スタイル>
    *{
        フォントファミリー:Microsoft YaHei;
        マージン:0;
        パディング:0;
    }
    本文{幅:100%;}
    ul{リストスタイル: なし;}
    a{テキスト装飾: なし;}
    #header{
        高さ:50px;
        行の高さ:50px;
        背景:#455A6E;
    }
    #ヘッダー h2、#ヘッダー h3{
        フォントの太さ:500;
    }
    #ヘッダー h2{
        色:#fff;
        フォントサイズ:18px;
        幅:180px;
        text-align: 中央;
        背景:#0D2E49;
    }
    #ヘッダー h3{色:#fff;フォントサイズ:16px;}
    .mycenter{
        幅:900px;
        マージン:0 自動;
    }
    #header div.mycenter{
        /*相对定位*/
        位置:相対;
    }
    #nav {
        幅:180px;
        背景:rgba(0, 102, 173, 0.5);
        z-index:999;
    }
    #ナビリ{
        高さ:40px;
        パディング左:40px;
        行の高さ: 40px;
        位置:相対;
    }
    #nav h3{高さ:40px;}
    #nav li dl{
        位置:相対;
        左:140px;
        トップ:-40px;
        幅:150px;
        背景:#fff;
        表示:なし;
        パディング:8px 10px;
    }
    #ナビdt{
        幅:150px;
        行の高さ: 30px;
        高さ:30px;
        背景:#36C1AF;
        色:#fff;
        text-align: 中央;
    }
    #ナビ dd a{
        表示:ブロック;
        高さ:30px;
        幅:150px;
font-size:14px;
カラー:#858585;
}
#nav dd a:hover{
テキスト装飾: 下線;
}
#コンテンツ{
背景:#E95200;
高さ:500px;
}

& Lt; h2 & gt; & lt;/h2 & gt;

ホームページ管理

下部情報を変更

ニュース管理</dt>
                                                                                                              ニュースを公開
すべてのニュース管理</a>
シリーズを追加
ニュースシリーズ管理
                                                                                                                                                                                                                                      ＆lt; h3＆gt;フィードバック管理＆lt;/h3＆gt;
                                                                                                                                                                                                                                                                                                                                                                                                                                        ＆lt; a href = "＃"＆gt;すべてのフィードバック＆lt;/a＆gt;
を管理します                                                                                                                                                                                                                                      ＆lt; h3＆gt;エンタープライズ情報管理＆lt;/h3＆gt;

企業情報管理

会社概要

人材採用管理

すべてのアカウント権限を表示