Of Stack

javascript Mouse Sliding Displays Secondary Menu Effects

  • 2021-07-06 10:05:35
  • OfStack

In this paper, we share the javascript mouse sliding display level 2 menu effect for your reference, the specific contents are as follows

1. Key code: Use switch or if judgment statement to change the corresponding level 2 menu display mode to block or none 


function selectTabMenu(i){
  　  　  switch(i){
   　  　    　  　   case 71:  
    　  　    　  　     　  　   document.getElementById("TabMenuCon71").style.display="block";
   document.getElementById("TabMenuCon72").style.display="none";
   document.getElementById("TabMenuCon73").style.display="none";
   document.getElementById("TabMenuCon74").style.display="none";
   document.getElementById("TabMenuCon75").style.display="none";
   document.getElementById("TabMenuCon76").style.display="none";
   break;
   　  　    　  　     　  ...
  　  　  }
}

2. Leading navigation binding events

< ul class="nav" >
　　 < li > < a href="#" onmouseover="selectTabMenu(71)" > Home page < /a > < /li >

3. Level 2 menu 


<ul id="TabMenuCon71" class="TabMenuCon">
 　　 <li><a href="#"> Announcement </a></li>
 　　 <li><<a href="#"> Information </a></li>
</ul>

4. Complete code 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Horizontal navigation -2 Level menu </title>
 <style type="text/css">
 *{
  padding:0px;
  margin: 0px;
 }
 .navBar{
  height: 30px;
  background-color: #2B383E;
  text-align: center;
 }
 ul{
  list-style: none;
 }
 .nav li{
  float: left;
 
 }
 .nav li a{
  display: block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
 }
 .nav li a:hover{
  background-color: #fff;
  color: #4DB6E7
 }
 .TabMenuCon{
  clear: both;
  display: none;
 }
 .TabMenuCon li{
  display: inline-block;
 }
 </style>

 <script type="text/javascript">
 function selectTabMenu(i){
  switch(i){
  case 71: 
  document.getElementById("TabMenuCon71").style.display="block";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 72:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="block";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 73: 
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="block";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 74:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="block";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 75:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="block";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 76:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="block";
  break; 
  }
 }
 </script>
</head>
<body>
 <div class="navBar">
 <ul class="nav">
  <li><a href="#" onmouseover="selectTabMenu(71)"> Home page </a></li>
  <li><a href="#" onmouseover="selectTabMenu(72)"> About associations </a></li>
  <li><a href="#" onmouseover="selectTabMenu(73)"> Association dynamics </a></li>
  <li><a href="#" onmouseover="selectTabMenu(74)"> Association activities </a></li>
  <li><a href="#" onmouseover="selectTabMenu(75)"> Member </a></li>
  <li><a href="#" onmouseover="selectTabMenu(76)"> Resource space </a></li>
 </ul>
 
 </div>
 <div id="TabMenuCon">
 <ul id="TabMenuCon71" class="TabMenuCon">
  <li><a href="#"> Announcement </a></li>
  <li><<a href="#"> Information </a></li>
 </ul>
 <ul id="TabMenuCon72" class="TabMenuCon">
  <li> Brief introduction of the association </li>
  <li> Organizational structure </li>
  <li> Articles of Association </li>
 </ul>
 <ul id="TabMenuCon73" class="TabMenuCon">
  <li> Association news </li>
  <li> Activity Preview </li>
  <li> Job hunting and recruitment </li>
 </ul>
 <ul id="TabMenuCon74" class="TabMenuCon">
  <li> Compulsory maintenance month </li>
  <li> Graphic design activities </li>
  <li> Programming activities </li>
  <li> Outdoor expansion </li>
 </ul>
 <ul id="TabMenuCon75" class="TabMenuCon">
  <li> Member login </li>
  <li> Membership registration </li>
  <li> Payment of membership dues </li>
  <li> Member information management </li>
  <li> Change password </li>
 </ul>
 <ul id="TabMenuCon76" class="TabMenuCon">
  <li>PS Tutorials </li>
  <li> Front end design </li>
  <li>Flash Tutorials </li>
 </ul>
 </div>
</body>
</html>

The above is the whole content of this paper, hoping to help everyone's study.

Related articles: