Javascript 集成一个'；汉堡包'；带有导航菜单
我有一个工作汉堡包。我有一份工作菜单 有人能把两者结合起来吗 当我点击汉堡包时，我希望我的菜单显示淡入状态 再次单击时，我希望我的菜单淡出 下面是我的两段代码（顺便说一句，我的编码不是很流利） 谢谢Javascript 集成一个'；汉堡包'；带有导航菜单,javascript,html,css,Javascript,Html,Css,我有一个工作汉堡包。我有一份工作菜单 有人能把两者结合起来吗 当我点击汉堡包时，我希望我的菜单显示淡入状态 再次单击时，我希望我的菜单淡出 下面是我的两段代码（顺便说一句，我的编码不是很流利） 谢谢 汉堡包 <style> .buttons-container { margin: 100px auto; text-align: center; } button { display: inline-block; margin: 0 0.5em; border:
汉堡包
<style>
.buttons-container {
margin: 100px auto;
text-align: center;
}
button {
display: inline-block;
margin: 0 0.5em;
border: none;
background: none;
}
button span {
display: block;
}
.grid-button {
padding: 1rem;
cursor: pointer;
user-select: none;
}
.grid-button .grid {
width: 0.5rem;
height: 0.5rem;
background: #ecf0f1;
color: #ecf0f1;
/* Not in use when the colors are specified below */
transition: 0.3s;
}
.grid-button.close .grid {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
}
.grid-button.rearrange .grid {
box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}
.grid-button.rearrange.close .grid {
box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem;
}
.grid-button.collapse .grid {
box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}
.grid-button.collapse.close .grid {
box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
}
/* ====================== lines button ==================================================*/
.lines-button {
padding: 1rem 0.5rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.285715rem;
/* */
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}
.lines {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: relative;
}
.lines:before, .lines:after {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.142855rem center;
transform-origin: 0.142855rem center;
}
.lines:before {
top: 0.5rem;
}
.lines:after {
top: -0.5rem;
}
.lines-button:hover .lines:before {
top: 0.57143rem;
}
.lines-button:hover .lines:after {
top: -.57143rem;
}
.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
top: 0;
width: 1.11111rem;
}
.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
-webkit-transform: none;
transform: none;
top: 0;
width: 2rem;
}
</style>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div class="buttons-container">
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus">
<span class="lines"></span>
</button>
</div>
</section>
<footer>
</footer>
<script>
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
}
});
</script>
</body>
</html>
.按钮容器{
保证金：100像素自动；
文本对齐：居中；
}
钮扣{
显示：内联块；
边缘：0.5 em；
边界：无；
背景：无；
}
按钮跨度{
显示：块；
}
.网格按钮{
填充：1rem；
光标：指针；
用户选择：无；
}
.网格按钮.网格{
宽度：0.5雷姆；
高度：0.5雷姆；
背景#ecf0f1；
颜色：#ecf0f1；
/*以下指定颜色时不使用*/
过渡：0.3s；
}
.grid-button.close.grid{
-webkit变换：旋转3D（0,0,1，-45度）缩放3D（0.8,0.8,0.8）；
变换：旋转3d（0,0,1，-45度）缩放3d（0.8,0.8,0.8）；
}
.grid-button.Reaginate.grid{
箱形阴影：-0.625rem-0.625rem，0-0.625rem，0.625rem-0.625rem，-0.625rem 0，0.625rem 0，-0.625rem 0.625rem，0.625rem 0.625rem；
}
.grid-button.Reaginate.close.grid{
盒子阴影：0-0.5雷姆，0-1雷姆，0.5雷姆0，-1雷姆0，1雷姆0，-0.5雷姆0，0-1雷姆，0-1雷姆；
}
.grid-button.collapse.grid{
箱形阴影：-0.625rem 0，-0.625rem 0.625rem 0，0.625rem-0.625rem，0-0.625rem，-0.625rem-0.625rem，0.625rem 0.625rem；
}
.grid-button.collapse.close.grid{
盒影：-0.5rem 0，0 0透明，0.5rem 0，0 0透明，0-0.5rem，0 0透明，0 0.5rem，0 0透明；
}
/*==================================行按钮==================================================*/
.线路按钮{
填充：1雷姆0.5雷姆；
过渡：.3s；
光标：指针；
用户选择：无；
边界半径：0.285715雷姆；
/* */
}
.行按钮：悬停{
不透明度：1；
}
.行按钮：活动{
过渡期：0；
}
.台词{
显示：内联块；
宽度：2em；
高度：0.285715雷姆；
背景：#FF0000；
边界半径：0.142855雷姆；
过渡：0.3s；
位置：相对位置；
}
.行：之前，.行：之后{
显示：内联块；
宽度：2em；
高度：0.285715雷姆；
背景：#FF0000；
边界半径：0.142855雷姆；
过渡：0.3s；
位置：绝对位置；
左：0；
内容：''；
-webkit变换原点：0.142855rem中心；
变换原点：0.142855rem中心；
}
.台词：之前{
顶部：0.5雷姆；
}
.台词：之后{
顶部：-0.5雷姆；
}
.行按钮：悬停。行：在{
顶部：0.57143rem；
}
.行按钮：悬停。行：之后{
顶部：-.57143rem；
}
.line-button.close{
-webkit转换：scale3d（0.8,0.8,0.8）；
变换：scale3d（0.8,0.8,0.8）；
}
.lines-button.arrow.close.行：之前，.lines-button.arrow.close.行：之后{
排名：0；
宽度：1.11111雷姆；
}
.lines-button.减号.close.lines:之前，.lines-button.减号.close.lines:之后{
-webkit转换：无；
转化：无；
排名：0；
宽度：2em；
}
var anchor=document.querySelectorAll（'button'）；
[]forEach.call（锚定，函数（锚定）{
var open=false；
anchor.onclick=函数（事件）{
event.preventDefault（）；
如果（！打开）{
this.classList.add（'close'）；
开放=真实；
}
否则{
这个.classList.remove（'close'）；
开=假；
}
}
});
#垂直导航{宽度：220px；高度：100%；显示：块；边距：0；填充：0}
#垂直导航ul{边距：0；填充：0；背景：透明；列表样式：无；溢出：隐藏}
#垂直导航ul li{宽度：100%；显示：块；背景：透明；文本对齐：左；填充：0；溢出：隐藏；填充：0；边距：0；边框底部：0px实心#}
#垂直导航ul li:最后一个子项{边框底部：0}/*在最后一项上已删除边框底部*/
#垂直导航ul li a{位置：相对；框大小：边框框；显示：块；背景：透明；文本装饰：无；填充：4px 10px；字体：14px Arial，无衬线；颜色：#B3；背景：透明}
#垂直导航ul li a：悬停{颜色：#FF0000；填充：4px 30PX}
#垂直导航ul li a：悬停：在{显示：块；位置：绝对；左侧：10px；顶部：8px；内容：''；宽度：3px；高度：9px；背景：#FF0000}之前
-webkit转换：{0.3s all；-moz转换：0.3s all；转换：0.3s all}
.fadeIn-1{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
.fadeIn-2{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
.fadeIn-3{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
.fadeIn-4{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
.fadeIn-5{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
.fadeIn-6{
-webkit动画：fadeIn轻松2秒；
-moz动画：fadeIn ease in 2s；
-o-动画：fadeIn轻松2秒；
动画：fadeIn轻松2秒；
}
@-webkit关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@-moz关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@-o-关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
- 堆栈溢出不是为您做作业或家庭作业的。不要问
- 堆栈溢出不是代码编写服务。请不要要求我们为您编写代码
- 堆栈溢出不是调试服务。请不要要求我们发现简单的bug和错误
<nav id="vertical-nav"> <ul> <li class="fadeIn-1"><a href="#">Home</a></li> <li class="fadeIn-2"><a href="#">1</a></li> <li class="fadeIn-3"><a href="#">2</a></li> <li class="fadeIn-4"><a href="#">3</a></li> <li class="fadeIn-5"><a href="#">4</a></li> <li class="fadeIn-6"><a href="#">5</a></li> </ul> </nav> <style type="text/css"> #vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0} #vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden} #vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #} #vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */ #vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent} #vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX} #vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000} -webkit-transition: {0.3s all;-moz-transition: 0.3s all;transition: 0.3s all} .fadeIn-1 { -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } .fadeIn-2 { -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } .fadeIn-3{ -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } .fadeIn-4{ -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } .fadeIn-5{ -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } .fadeIn-6{ -webkit-animation:fadeIn ease-in 2s; -moz-animation:fadeIn ease-in 2s; -o-animation:fadeIn ease-in 2s; animation:fadeIn ease-in 2s; } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } </style><button id="shower" name="buttonOne">Show</button> <div id="menu"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Portfolio</a></li> </u> </div>li { list-style-type:none; } a { text-decoration:none; } ul { padding:0; } #menu { display:none; animation:fadeIn 1s; } #buttonss { height:50px; width:50px; background-color:red; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }$(document).ready(function() { $('#shower').click(function() { if( $("#menu").css('display') == 'block') { $('#menu').css('display', 'none'); } else { $('#menu').css('display', 'block'); } }); });