0
menu barwill eine Schiebe- und zusammenklappbar Menü anzuzeigen
i ein Menü hinzufügen wollte, die unter Verwendung Hamburgere Übersetzung und Erweiterung zusammenklappbar ist, aber ich bin nicht in der Lage, dies zu tun. kann mir jemand helfen, dieses Menü zu erhalten.
$(".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>
Zu allererst Bitte fügen Sie JQuery als das fehlt. –
Ich habe diese jquery bereits hinzugefügt. es ist im ersten Code-Snippet. – mahi
Haben Sie versucht, Ihren obigen Code auszuführen? Sie müssen JQuery einschließen. Klicken Sie einfach auf "Code-Snippet ausführen" –