coder_1979
Neues Mitglied
Hi zusammen,
der folgende Code funktioniert leider nicht einem alten iPhone 6 (Safari-Browser).
Das Menü klappt nicht auf.
Habt ihr ne Idee, was ich ändern müsste, damit der Safari da auch mit klar kommt.
Mein Fachwissen hört an der Stelle leider auf ;-(
Danke schon mal für eure Tipps
der folgende Code funktioniert leider nicht einem alten iPhone 6 (Safari-Browser).
Das Menü klappt nicht auf.
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Hamburger-Menü Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
body {
margin: 0;
font-size:100%;
background: #f6f8f9;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1c3464;
align-items: center;
padding: 0 50px 0 50px;
flex-wrap: wrap;
overflow: hidden;
position: fixed;
top: 0;
z-index:200000;
border-bottom: 4px solid #9acd32;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
nav ul li a.active{
color: #111;
background: #fff;
}
nav ul li a:hover {
background:#526788;
}
nav .menu-btn img{
color: #fff;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
@media (max-width: 1200px) {
nav{
padding: 0px 10px 0px 20px;
}
.menu-btn {
position:absolute;
right:20px;
}
nav .menu-btn img{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #173460;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
z-index:200000;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 1.3em;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=">
</label>
<ul>
<li><a href="/" class="active">Menu 1</a></li>
<li><a href="/">Menu 2</a></li>
<li><a href="/">Menu 3</a></li>
<li><a href="/">Menu 4</a></li>
</ul>
</nav>
</body>
Hello world!
</body>
</html>Habt ihr ne Idee, was ich ändern müsste, damit der Safari da auch mit klar kommt.
Mein Fachwissen hört an der Stelle leider auf ;-(
Danke schon mal für eure Tipps