ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してナビゲーション バーのサンプル コード共有を実装する方法
js を使用して、単純なナビゲーション バーを実装します。 js を使用して特定の効果を実現する手順: 1. CSS レイアウトを実装する; 2: JS 実装の原則; 3. CSS コードを作成します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> ul { padding:0px; margin:0px; list-style:none; } a { text-decoration:none; background-color:#f1f1f1; display:block; width:50px; text-align:center; } .list { display:none; } ul ul{ width:140px; border:solid #000 1px; position:absolute; } ul ul li { text-align:center; } .item { position:relative; } </style> </head> <body> <ul> <li class="item" id="item"> <a href="#" id="link">微博</a> <ul class="list" id="list"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul></body><script> var link = document.getElementById("link"); var item = document.getElementById("item"); var list = document.getElementById("list"); item.onmouseover = show; item.onmouseout = hide; function show(){ list.style.display = "block"; link.style.background = "yellow"; } function hide(){ list.style.display = "none"; }</script></html>
ビューから要素を削除する JS メソッド:
(1)display:none;(ドキュメント フローを占有しない)
(2)visibility:hidden;(要素を非表示にするが、ドキュメント フローを占有する)
( 3 ) 透明度を 0 (opacity:0) に設定します (IE ブラウザでは、透明度は filter:alpha(opacity=0); のように設定できます)
(4) マージン値を設定します。たとえば、マージン値を設定します。負の値にします
( 5) オーバーフロー: 非表示と相対位置を使用して要素の位置を移動し、左側の値を変更します
(6) 白い p を使用して、それを覆っている p を削除します。
……
js のイベント: マウス イベント、キーボード イベント、システム イベント、フォーム イベント、カスタム イベントなど。一般的なマウス イベントには、onmouseover、onmouseout、onmousemove、onclick、onmounseup、mousedown などが含まれます。関数呼び出し方法: イベント呼び出し、匿名呼び出し、直接呼び出し。
以上がJavaScript を使用してナビゲーション バーのサンプル コード共有を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。