JavaScript を使用してナビゲーションバーのサンプルコード共有を実装する方法-jsチュートリアル-php.cn

JavaScript を使用してナビゲーションバーのサンプルコード共有を実装する方法

黄舟

リリース： 2017-07-25 09:22:18

オリジナル

2207 人が閲覧しました

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 サイトの他の関連記事を参照してください。