【发布时间】：2017-12-08 20:15:45
【问题描述】：
我想通过使用汉堡翻译添加一个可折叠和扩展的菜单，但我无法做到这一点。任何人都可以帮我获得这个菜单。
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu a {
display: block;
width: 100%;
height: 100%;
}
.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
-webkit-transition: 250ms all;
transition: 250ms all;
}
.menu-opener {
cursor: pointer;
height: 64px;
position: absolute;
top: 2%;
left: 0%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 64px;
}
.menu-opener:hover, .menu-opener.active {
background: #f1c40f;
}
.menu-opener-inner {
background: #fff;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
background: white;
content: '';
display: block;
height: .5rem;
width: 2.5rem;
}
.menu-opener-inner::before {
-webkit-transform: translateY(-0.75rem);
-ms-transform: translateY(-0.75rem);
transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
-webkit-transform: translateY(0.25rem);
-ms-transform: translateY(0.25rem);
transform: translateY(0.25rem);
}
.menu-opener-inner.active {
background: transparent;
}
.menu-opener-inner.active::before {
-webkit-transform: translateY(0rem) rotate(-45deg);
-ms-transform: translateY(0rem) rotate(-45deg);
transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
-webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
-ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}
.menu {
background: #ededee;
color: #000;
height: 64px;
position: absolute;
top: 2%;
left: 1%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 0rem;
z-index: -1 ;
}
.menu.active {
width: -webkit-calc(100% - 2rem);
width: calc(100% - 2rem);
}
.menu.active .menu-link {
color: white;
}
.menu-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 100%;
list-style-type: none;
margin: 0;
margin-left: 4rem;
padding: 0;
}
.menu-link {
color: transparent;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 2rem;
font-weight: 100;
height: 100%;
text-align: center;
text-decoration: none;
}
.menu-link li {
margin: auto;
} <nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>HOME</li>
</a>
<a href="location.html" class="menu-link">
<li>LOCATION</li>
</a>
<a href="stay.html" class="menu-link">
<li>STAY</li>
</a>
<a href="eat.html" class="menu-link">
<li>EAT & DRINK</li>
</a>
<a href="relax.html" class="menu-link">
<li>RELAX & UNWIND</li>
</a>
<a href="events.html" class="menu-link">
<li>EVENTS</li>
</a>
<a href="gallery.html" class="menu-link">
<li>GALLERY</li>
</a>
<a href="contact.html" class="menu-link">
<li>CONTACT US</li>
</a>
<a href="#" class="menu-link">
<li><img src="images\common\logo.png" class="menu-link" alt="" height="25px" width="120px"></a></li>
</a>
</ul>
</nav>【问题讨论】：
-
首先，请添加缺少的JQuery。
-
我已经添加了那个 jquery。它在第一个代码 sn-p 中。
-
您是否尝试执行上述代码？您需要包含 JQuery。只需点击“运行代码 sn-p”
-
不，我没有……谢谢您的回复
标签： jquery html css menu collapsable