ホームページ > 記事 > ウェブフロントエンド > JS は京東淘宝_javascript スキルを模倣した垂直セカンダリ ナビゲーションを実装します
JS は京東淘宝_javascript スキルを模倣した垂直セカンダリ ナビゲーションを実装します
- WBOYオリジナル
- 2016-05-16 16:28:221967ブラウズ
コードは非常に単純なので、あまり意味のないことには触れず、コードだけを示します。
コードをコピー コードは次のとおりです:
<頭>
<メタ名="説明" コンテンツ="">
<メタ名="キーワード" コンテンツ="">
<スクリプトタイプ="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;