html1979 |
29.03.2022 13:42 |
Hi,
leider wars das nicht.
Ich vermute eher, dass das Menü nach dem Klick auf den Menübutton nicht sichtbar ist. Der Klick ansich funktioniert.
Ich hab jetzt mal das hier grob zusammengenagelt:
Code:
<!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;
min-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;
}
/* Navigation im Zustand ausgeklappt */
ul.topmenu{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
ul.topmenu li{
margin: 0 5px;
}
ul.topmenu 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;
}
ul.topmenu li a.active{
color: #111;
background: #fff;
}
ul.topmenu ul li a:hover {
background:#526788;
}
input#hamburg {display:none}
@media (max-width: 1200px) {
ul.topmenu{
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;
}
label.hamburg {
display: block;
background: #555;
width: 75px;
height: 50px;
margin-left: auto; margin-right: auto;
border-radius: 4px;
position:absolute;
right:20px;
}
.line {
position: absolute;
left:10px;
height: 4px; width: 55px;
background: #fff; border-radius: 2px;
display: block;
transition: 0.5s;
transform-origin: center;
}
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }
/* Linien zum Kreuz werden lassen */
#hamburg:checked + .hamburg .line:nth-child(1){
transform: translateY(12px) rotate(-45deg);
}
#hamburg:checked + .hamburg .line:nth-child(2){
opacity:0;
}
#hamburg:checked + .hamburg .line:nth-child(3){
transform: translateY(-12px) rotate(45deg);
}
#hamburg:checked ~ nav {
height:500px;
background-color: #9acd32;
}
#hamburg:checked ~ ul.topmenu {
left: 0;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="hamburg">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
<ul class="topmenu">
<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>
Hello world!
</body>
</html>
Ich hab für dieses Beispiel extra auch mal einen anderen Menübutton verwendet. Das Ergebnis: Man kann den Menübutton anklicken aber das Menü zeigt sich auf dem iphone / Safari nur minimalst.
Hier ein Screenshot vom Firefox (Windows 10).
http://www.basement-media.de/hamburger.png
Beim iphone spitzelt nur der rot umrandete Bereich raus.
Der Rest ist nicht sichtbar aber die Menüpunkte sind anklickbar.
|