How to use JavaScript to implement navigation bar sample code sharing-JS Tutorial-php.cn

How to use JavaScript to implement navigation bar sample code sharing

黄舟

Release： 2017-07-25 09:22:18

Original

2163 people have browsed it

Use js to implement a simple navigation bar. Steps to use js to achieve a certain effect: 1. Implement CSS layout; 2: JS implementation principle; 3. Write CSS code.

<!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>

Copy after login

JS method to remove an element from view:
(1)display:none;(does not occupy the document flow)
(2)visibility:hidden;(hide an element , still occupying the document flow)
(3) Set the transparency to 0, which is opacity:0; (In IE browser, the transparency can be set like this filter:alpha(opacity=0);)
(4) Setting Margin value, for example, set the margin value to a negative value
(5) Use overflow:hidden; and relative positioning, change the left, and top values to move the position of the element
(6) Cover this with a white p The p above is removed.
……
Events in js: mouse events, keyboard events, system events, form events, custom events, etc. Common mouse events include: onmouseover, onmouseout, onmousemove, onclick, onmounseup, mousedown, etc. Function calling methods: event calling, anonymous calling, direct calling.

The above is the detailed content of How to use JavaScript to implement navigation bar sample code sharing. For more information, please follow other related articles on the PHP Chinese website!