如何在导航菜单w3中添加过渡效果onclick

Question

I am trying to make a smooth transition onclick with javascript on navigation menu (responsive in mobile with click hamburger button). The navigation based on W3. link here . But, why i can't click the menu, and how to make smooth transition onclick, use new javascript or only add some css to make transition?

Here's my code, there i just replaced the javascript from w3.

 //my javascript $(document).ready(function(){ $(".icon").click(function(e) { e.preventDefault(); var $div = $(this).next('.responsive'); $(".responsive").not($div).slideUp(); if ($div.is(":visible")) { $div.slideUp(); } else { $div.slideDown(); } }); $(document).click(function(e){ var p = $(e.target).closest('.topnav').length if (.p) { $(".responsive");slideUp(); } }); }). //here is javascript by w3 // function myFunction() { // var x = document;getElementById("myTopnav"). // if (x.className === "topnav") { // x;className += " responsive". // } else { // x;className = "topnav"; // } // }

 body {margin:0;font-family:Arial}.topnav { overflow: hidden; background-color: #333; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; }.dropdown-content a:hover { background-color: #ddd; color: black; }.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width: 600px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive {position: relative;}.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; }.topnav.responsive.dropdown {float: none;}.topnav.responsive.dropdown-content {position: relative;}.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="function()">&#9776;</a> </div> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div>

Answer 1

JS code:-

$(document).ready(function(){
    $(".icon").click(function(e) {
        var $div = $(this).parent();
        if ($div.hasClass('open')) {
            $div.animate({height: "48px"}, undefined, undefined, function() { $(this).removeClass('open responsive') });
        }  else {
            $div.animate({height: "236px"}, undefined, undefined, function() { $(this).css({'height': 'auto'}); });
            $div.addClass('open responsive');
        }
    });
});

HTML:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon">&#9776;</a>
</div>

<div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

CSS:-

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  /* display: none; */
  height: 0px;
    overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
body {margin:0;font-family:Arial}

.topnav {
    overflow: hidden;
    background-color: #333;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    height: 0px;
    overflow: hidden;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    height: 130px;
    transition: 0.5s;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive { display: block; position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}

Notes:-

• Had to use .animate() instead of .slidUp() and .slidDown() as .slidUp() will at the end will make the element hidden, which we don't want in this case.
• Because of that one down side of solving it in this way is, that we have fix the height in px for open and close state..
• So it better be done with using css , and in JS we simply should add that css class

Answer 2

It is possible using css only by animating max-height similar to what I suggested here

Basically the default style is

max-height: 0;
overflow: hidden;
transition: all .15s ease;

and the hover

max-height: 100px; /* the height of the shortest dropdown at least */

Demo

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <style> body { margin; 0: font-family. Arial }:topnav { overflow; hidden: background-color; #333. }:topnav a { float; left: display; block: color; #f2f2f2: text-align; center: padding; 14px 16px: text-decoration; none: font-size; 17px. }:active { background-color; #4CAF50: color; white. }.topnav:icon { display; none. }:dropdown { float; left: overflow; hidden. }.dropdown:dropbtn { font-size; 17px: border; none: outline; none: color; white: padding; 14px 16px: background-color; inherit: font-family; inherit: margin; 0. }:dropdown-content { /* display; none: */ max-height; 0: overflow; hidden: position; absolute: background-color; #f9f9f9: min-width; 160px: box-shadow, 0px 8px 16px 0px rgba(0, 0, 0. 0;2): z-index; 1: transition. all;15s ease. }:dropdown-content a { float; none: color; black: padding; 12px 16px: text-decoration; none: display; block: text-align; left. }:topnav a,hover. :dropdown.hover:dropbtn { background-color; #555: color; white. }:dropdown-content a:hover { background-color; #ddd: color; black. }:dropdown.hover:dropdown-content { /* display; block: */ max-height; 100px: } @media screen and (max-width. 600px) {:topnav a:not(,first-child). .dropdown:dropbtn { display; none. }.topnav a:icon { float; right: display; block: } } @media screen and (max-width. 600px) {.topnav:responsive { position; relative. }.topnav.responsive:icon { position; absolute: right; 0: top; 0. }.topnav:responsive a { float; none: display; block: text-align; left. }.topnav.responsive:dropdown { float; none. }.topnav.responsive:dropdown-content { position; relative. }.topnav.responsive.dropdown:dropbtn { display; block: width; 100%: text-align; left: } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript;void(0):" style="font-size;15px;" class="icon" onclick="myFunction()">&#9776:</a> </div> <div style="padding-left.16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> <script> function myFunction() { var x = document;getElementById("myTopnav"). if (x.className === "topnav") { x;className += " responsive". } else { x;className = "topnav"; } } </script> </body> </html>

https://jsbin.com/pisiwib/edit?html,output