0
Ich habe Code zum Einschieben und Herausschieben des Menüs, das in Handys angezeigt wird. der Code funktioniert mit neuen Handys in Ordnung, aber in alten Handys in nicht rutschen, wenn ich der Website das Menü bereits aus öffnen und nicht in verschoben werden kann.Schieben Sie heraus und rutschte im Menü Sidebar html, css
der Code
$(function() {
$("#trigger").click(function() {
$(".mainMenu").toggleClass("active");
});
$("#trigger").click(function() {
$("#trigger").toggleClass("active");
});
});nav {
height: 40px;
width: 100%;
background: #1a001a;
font-size: 10pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #734088;
}
nav ul {
padding: 0;
margin-top: 0;
margin: left;
width: 700px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.mainMenu:before,
.mainMenu:after {
content: " ";
display: table;
}
.mainMenu:after {
clear: both;
}
.mainMenu {
*zoom: 1;
}
.Login:before,
.Login:after {
content: " ";
display: table;
}
nav a {
color: #fff;
display: inline-block;
width: 80px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #330010;
clear: both;
}
nav li a {
border-right: 1px solid #A28FA9;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #A28FA9;
}
.mainMenu li ul {
display: none;
position: absolute;
background-color: #1a001a;
height: auto;
}
.mainMenu li:hover ul {
display: block;
width: 150px;
}
.mainMenu li li {
list-style: none;
display: list-item;
}
.mainMenu li li a {
color: #fff;
display: inline-block;
width: 150px;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #330010;
clear: both;
}
.mainMenu li li a:hover {
background-color: #A28FA9;
}
#trigger {
display: none;
}
.firstList {
float: left;
width: 85%;
}
@media only screen and (max-width: 480px) {
nav {
background: #0d0d0d;
position: absolute;
font-size: 10pt;
padding: 0;
width: 50%;
height: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
z-index: 10;
transform: translate(-150%, 0px);
transition: all 0.75s ease-in-out;
}
nav li {
height: 100%;
float: none;
position: relative;
width: 100%;
}
nav ul {
margin: 16px 0;
padding: 0;
display: block;
color: white;
list-style: none;
width: 100%;
height: 100%;
float: left;
}
.mainMenu {
clear: left;
}
.Login {
clear: both;
}
nav ul li {
margin: 0;
transition: all 0.25s ease-in-out;
}
nav ul li:hover {
color: #bdc3c7;
cursor: pointer;
}
nav li a {
border-top: none;
border-bottom: 2px solid #1a1a1a;
border-right: none;
}
nav a {
text-align: left;
width: 100%;
text-indent: 20px;
display: block;
background-color: #0d0d0d;
line-height: 35px;
}
nav.active {
-webkit-transform: translate(0%, 0px);
transform: translate(0%, 0px);
transition: all 0.75s ease-in-out;
}
#trigger {
background-color: #1a001a;
width: 100%;
height: 35px;
color: #FFF;
display: inline-block;
position: relative;
}
.firstList {
float: left;
width: 100%;
}
}<nav class="mainMenu">
<div class="">
<div class="firstList">
<ul class="mainMenu">
<li><a href="#">link 1</a>
</li>
<li><a href="#">link 2</a>
</li>
<li><a href="#">link 3</a>
</li>
<li><a href="#">link 4</a>
<ul>
<li><a href="#">sublink 1</a>
</li>
<li><a href="#">sublink 2</a>
</li>
<li><a href="#">sublink 3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>