js+css to realize three-level navigation menu

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

Recommend

Vue-CLI multi-page directory packaging steps record

Page directory structure Note that you need to mo...

Detailed explanation of html download function

The new project has basically come to an end. It ...

Vue implements two-way data binding

This article example shares the specific code of ...

Problems and solutions encountered when deploying a project when upgrading the Mysql database from version 5.6.28 to version 8.0.11

The problems and solutions encountered when deplo...

Detailed explanation of primitive values ​​and reference values ​​in ECMAScript

Table of contents Preface What are dynamic proper...

Detailed explanation of Docker Swarm service orchestration commands

1. Introduction Docker has an orchestration tool ...

Detailed explanation of nginx anti-hotlink and anti-crawler configuration

Create a new configuration file (for example, go ...

MySQL 5.7.18 installation and configuration tutorial under Windows

This article shares the installation and configur...

How to prevent event bubbling in JavaScript

What we need to pay attention to is that the char...

How to install setup.py program in linux

First execute the command: [root@mini61 setuptool...

Xhtml special characters collection

nbsp &#160; no-break space = non-breaking spa...

Detailed explanation of the practice of installing the Permeate range system using VMware

1. Background We do some internal training from t...

How to pop up a temporary QQ dialog box to chat online without adding friends

In fact, this is very simple. We add an a tag to ...

Detailed explanation of the meaning of N and M in the MySQL data type DECIMAL(N,M)

A colleague asked me what N and M mean in the MyS...

Pure HTML and CSS to achieve JD carousel effect

The JD carousel was implemented using pure HTML a...