js+css to realize three-level navigation menu

This article example shares the specific code of js+css to implement the three-level navigation menu for your reference. The specific content is as follows

It is relatively easy to implement the navigation menu hover event with CSS. You only need to change the transparency. If you want the menu to have a gradient effect, unfortunately, transition does not support display, so using opacity to achieve the same effect.

Here is the complete code implemented in CSS:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Third 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;
}
#first {
 opacity: 0;
}
#firstli{
 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 #first{
 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="#" >Level 1</a>
     <ul id="first">
      <li id="nav_two" class="nav_two">
       <a href="#" >Second Level</a>
       <ul id="second">
        <li><a href="#" >Level 3</a></li>
        <li><a href="#" >Level 3</a></li>
        <li><a href="#" >Level 3</a></li>
       </ul>
      </li>
      <li class="nav_two"><a href="#" >Second level</a></li>
      <li class="nav_two"><a href="#" >Second level</a></li>
     </ul>
    </li> 
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
   </ul>
 </div>  
 </body>
</html>

The implementation of js is relatively troublesome, but it is also possible, replacing the 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(){
    first.style.opacity = "1";
    first.style.transition = "all 2s";
    first.style.WebkitTransition = "all 2s";
   }
   one.onmouseout = function(){
    first.style.opacity = "0";
    first.style.transition = "all 0.5s";
    first.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>-->

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js left three-level menu navigation example code
Three ways to implement the secondary drop-down menu in the navigation menu in JS
JS realizes the effect of highlighting the navigation bar after selecting the current menu
A js-controlled navigation menu example code
js to achieve horizontal scrolling menu navigation
Accordion effect navigation menu made by native js
JS navigation menu comparable to Flash
Native JS to achieve the effect of navigation drop-down menu
js method to realize multi-option switching navigation menu
A relatively classic and practical trigger-type navigation menu implemented with js

<<: Sample code for implementing rolling updates of services using Docker Swarm

>>: MySQL multi-table join introductory tutorial

js+css to realize three-level navigation menu

W3C Tutorial (7): W3C XSL Activities

Use of hasOwnProperty method of js attribute object

Vue/react single page application back without refresh solution

Detailed explanation of custom events of Vue components

How to use Zen coding in Dreamweaver

How to install mysql database in deepin 2014 system

Vue encapsulation component tool $attrs, $listeners usage

How to run Spring Boot application in Docker

Detailed explanation of CocosCreator Huarongdao digital puzzle

Detailed tutorial on installing Python 3 virtual environment in Ubuntu 20.04

Recommend

Introduction to major browsers and their kernels

How to install Linux flash

Vue implements DingTalk's attendance calendar

A MySQL migration plan and practical record of pitfalls

Vuex modularization and namespaced example demonstration

React useMemo and useCallback usage scenarios

Tutorial on installing MYSQL5.7 from OEL7.6 source code

Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

Detailed explanation of the front-end method of passing parameters between HTML pages

Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk

How to notify users of crontab execution results by email

Detailed analysis of the chmod command to modify file permissions under Linux

MySQL 8.0.12 installation and environment variable configuration tutorial under win10

Select web page drop-down list and div layer covering problem

Echarts tutorial on how to implement tree charts