如何制作带有动画三行的下拉移动菜单? [英] How to make dropdown mobile menu with animated three lines?
本文介绍了如何制作带有动画三行的下拉移动菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我没有找到这个问题的答案，有人可能已经回答了这个问题，但是:
I do not found the answer to this question, someone may have answered to this question yet, but:
例如，如何使下拉菜单变为该动画菜单:从三行菜单到跨行的动画转换
how can I make dropdown menu for example to this animated menu: Animated transform from three lines menu to cross
我想要类似的东西，但是需要上面的动画菜单: https ://www.w3schools.com/howto/tryit.asp?filename = tryhow_js_mobile_navbar
I would want something like this, but with the above animated menu: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_mobile_navbar
感谢答案！
推荐答案
如此简单，您可以尝试从您给我的链接中使用此代码:
Its so easy you can try to use this code from the link that you gave i took this for you :
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
$(document).ready(function () {
$(document).on('click', ".lines-button", function () {
$('#overlay').show();
$('.lines-button').addClass('close');
});
$(document).on('click', ".lines-button.close", function () {
$('#overlay').hide();
$('.lines-button').removeClass('close');
});
});
body {
font-family: Arial, Helvetica, sans-serif;
}
body {
background: #000;
}
.lines-button {
position: relative;
float:right;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 50px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.lines-button:focus {
outline: none;
}
.lines-button span {
display: block;
position: absolute;
left: 18px;
right: 18px;
height: 8px;
background: white;
border-radius: 0.57143rem;
}
.lines-button span::before, .lines-button span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #fff;
border-radius: 0.57143rem;
content:"";
}
.lines-button span::before {
top: -15px;
}
.lines-button span::after {
bottom: -15px;
}
.lines {
background: none;
}
.lines span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.lines span::before, .lines span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.lines span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.lines span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
.lines.close {
background: none;
}
.lines.close span {
background: none;
}
.lines.close span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.lines.close span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.lines.close span::before, .lines.close span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon,.topnav button.icon{
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
<!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">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<button class="icon lines-button lines" onclick="myFunction()"> <span></span>
</button>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
<!-- End smartphone / tablet look -->
</div>
</body>
</html>
这篇关于如何制作带有动画三行的下拉移动菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
