ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してナビゲーション バーのサンプル コード共有を実装する方法
JavaScript を使用してナビゲーション バーのサンプル コード共有を実装する方法
- 黄舟オリジナル
- 2017-07-25 09:22:182165ブラウズ
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 サイトの他の関連記事を参照してください。