我想添加一个可折叠和扩展的菜单,通过使用汉堡包翻译,但我无法做到这一点。谁能帮我弄到这个菜单。
$(".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
,格式化了代码,并且它工作得很好:
$(".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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 - 想要显示滑动和可折叠的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44921517/