Of Stack

js+css Implementation of Three level Navigation Menu

  • 2021-11-13 00:33:45
  • OfStack

In this paper, we share the specific code of js + css to realize the three-level navigation menu for your reference. The specific contents are as follows

It is relatively easy to realize the navigation menu hover event with css, and only need to change the transparency. If you want the menu to have a gradient effect, it is a pity that transition does not support display, so the effect is exactly the same with opacity.

The following is the complete code implemented with css: 


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>3 Level navigation menu </title>
 </head>
 <style>
  *{
 margin: 0;
 padding: 0;
}
body{
 font-size: 16px;
 background-color:#EDEDED ;
 font-style: inherit;
 color:#757576 ;
}
.main{
 width: 1050px;
 margin: 0 auto;
}
.fl{
 float: left;
}
.fr{
 float: right;
}
a{
 text-decoration: none;
 outline: none;
 color:#757576 ;
}
ul,ol{
 list-style: none;
}
.clear{ 
 clear: both;
}
.clearfix{
 *zoom:1;
}
li{
 float: left;
 display: inline-block;
 width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
}
li a:hover{
 color: red;
}
#frist {
 opacity: 0;
}
#frist li{
 float: none;
 position: relative;
}
 li a:hover{
 color: red;
 transition: all 0.5s;
}
:hover{
 transition: all 2s; 
}
#second {
 opacity: 0;
 margin: -40px 0 0 80px;
 padding: 0px;
 position: absolute;
}
#nav_one:hover #frist{
 opacity:1;
 transition: all 2s;
}
#nav_two:hover #second{
 opacity:1;
 transition: all 2s;
}
 </style>
 
 <body>
  <div class="nav main">
   <ul id="nav">
    <li id="nav_one"><a href="#" >1 Grade </a>
     <ul id="frist">
      <li id="nav_two" class="nav_two">
       <a href="#" >2 Grade </a>
       <ul id="second">
        <li><a href="#" >3 Grade </a></li>
        <li><a href="#" >3 Grade </a></li>
        <li><a href="#" >3 Grade </a></li>
       </ul>
      </li>
      <li class="nav_two"><a href="#" >2 Grade </a></li>
      <li class="nav_two"><a href="#" >2 Grade </a></li>
     </ul>
    </li> 
    <li><a href="#" >1 Grade </a></li>
    <li><a href="#" >1 Grade </a></li>
    <li><a href="#" >1 Grade </a></li>
    <li><a href="#" >1 Grade </a></li>
   </ul>
 </div>  
 </body>
</html>

js is relatively troublesome to achieve 1 point, but it can also replace hover effect in css. 


<!--<script>
 window.onload = function(){
  var one = document.getElementById("nav_one");
  var frist = document.getElementById("frist");
  var second = document.getElementById("second");
   one.onmouseover = function(){
    frist.style.opacity = "1";
    frist.style.transition = "all 2s";
    frist.style.WebkitTransition = "all 2s";
   }
   one.onmouseout = function(){
    frist.style.opacity = "0";
    frist.style.transition = "all 0.5s";
    frist.style.WebkitTransition = "all 0.5s";
   }
  var two = document.getElementById("nav_two");
   two.onmouseover = function(){
    second.style.opacity = "1";
    second.style.transition = "all 2s";
    second.style.WebkitTransition = "all 2s";
   }
   two.onmouseout = function(){
    second.style.opacity = "0";
    second.style.transition = "all 0.5s";
    second.style.WebkitTransition = "all 0.5s";
   }
  }
</script>-->
Related articles: