[英]How to add transition effect onclick in navigation menu w3
我正在尝试在导航菜单上使用 javascript 平滑过渡 onclick(通过单击汉堡按钮在移动设备中响应)。 基于W3的导航。 链接在这里。 但是,为什么我不能点击菜单,以及如何平滑过渡 onclick,使用新的 javascript 或只添加一些 css 进行过渡?
这是我的代码,我刚刚从 w3 替换了 javascript。
//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()">☰</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>
JS代码:-
$(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">☰</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;
}
}
笔记:-
.animate()
而不是.slidUp()
和.slidDown()
因为.slidUp()
最终会使元素隐藏,在这种情况下我们不希望这样做。css
,在JS中我们只需添加css
8CBA22E28EB17B5F5C6AE2A266AZ class 只能通过类似于我在这里建议的动画max-height
来使用 css
基本上默认样式是
max-height: 0;
overflow: hidden;
transition: all .15s ease;
和 hover
max-height: 100px; /* the height of the shortest dropdown at least */
演示
<,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()">☰:</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.