Mobiles Menü funktioniert nicht richtig
Joergi
Mobiles Menü funktioniert nicht richtig
Joergi
Matthias ScharwiesHallo zusammen,
ich versuche zur Zeit, ein mobile Menü für meine Homepage zu erstellen. Dazu habe ich den untenstehenden freien Code gefunden und entsprechend modifiziert. Auf einem normalen Heimcomputer funktioniert das ganze auch einwandfrei. Wenn man z.B. über "Dropdown 1" mit der Maus fährt, öffnet sich das Untermenü. Beim Verlassen schließt es sich wieder.
Auf mobilien Geräten ist das anders. Da muss man auf den entsprechenden Untermenüpunkt klicken. Dieser öffnet sich auch problemlos. Jedoch können die dann nachfolgenden Menüpunkte nicht mehr korrekt angewählt. Klickt man z.B. nach dem Öffnen von Dropdown 1 auf Drowdown 2, schließt sich Dropdown 1 und die Datei "9.htm" wird ausgeführt. Normalerweise sollte sich aber dann nur Dropdown 2 öffnen. Gibt es eine Möglichkeit, das zu beheben? Vielen Dank im voraus für Eure Hilfe. Hier der Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
max-width:400px;
z-index:9999;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
</style>
</head>
<body>
<div style="position:fixed; width:100%; z-index:8000;">
<div class="topnav" id="myTopnav">
<a href="1.htm" class="active">Home</a>
<a href="2.htm">News</a>
<a href="3.htm">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown 1 ▼
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="4.htm">Link 1</a>
<a href="5.htm">Link 2</a>
<a href="6.htm">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown 2 ▼
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="7.htm">Link 4</a>
<a href="8.htm">Link 5</a>
<a href="9.htm">Link 6</a>
</div>
</div>
<a href="10.htm">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
</div>
<div style="padding-top:50px;">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
-
Herzlich willkomen bei SELFHTMl,
ich versuche zur Zeit, ein mobile Menü für meine Homepage zu erstellen.
Sehr gut!
normalerweise würde ich bei so langen Code-Abschnitten das hier posten:
Warum online-Beispiele besser als das Posten von Code sind!
Dazu habe ich den untenstehenden freien Code gefunden und entsprechend modifiziert. Auf einem normalen Heimcomputer funktioniert das ganze auch einwandfrei.
Jein, hast Du Dir Dein Menü einmal vorlesen lassen? - Es gibt eine Konvention, wie ein Menü aufgebaut werden sollte und warum man z.B. nicht auf die aktuelle Seite verlinkt:
Wenn man z.B. über "Dropdown 1" mit der Maus fährt, öffnet sich das Untermenü. Beim Verlassen schließt es sich wieder.
Auf mobilien Geräten ist das anders. Da muss man auf den entsprechenden Untermenüpunkt klicken. Dieser öffnet sich auch problemlos. Jedoch können die dann nachfolgenden Menüpunkte nicht mehr korrekt angewählt. Klickt man z.B. nach dem Öffnen von Dropdown 1 auf Drowdown 2, schließt sich Dropdown 1 und die Datei "9.htm" wird ausgeführt. Normalerweise sollte sich aber dann nur Dropdown 2 öffnen. Gibt es eine Möglichkeit, das zu beheben?
Ja, aber unser Tutorial hat das auch (noch) nicht ganz hingekriegt! 😟
Hier ist das Ergebnis:
Könntest du hier mal den Beta-Tester spielen?
Problem war nach dem Aufklappen mit der Tastatur wieder eine parallele :hover-Funktionalität herzubringen.
Aus einer PN an meinen Kollegen:
Ich glaube, ich hab's gelöst:
HTML:
li a button aria-expanded ulCSS
nav li:hover > ul { visibility: visible; height: auto; } nav li button:hover ~ ul { visibility: hidden; height: 0; } nav li button:hover ~ ul.visible, .visible { visibility: visible; height: auto; }nav li:hover > ul ist der klassische Umschalter für li:hover, wenn man auf a, aber auch auf li >ul hovert.
Ohne :has() und ohne :not() schaltet nav li button:hover ~ ul das wieder aus, wenn auf dem button gehovert wird. Ich hatte da mit anderen Positionen des Button nach der ul experimentiert.
Wenn ich jetzt die ul mit Button aufklicke, muss ich nav li button:hover ~ ul.visible wieder auf visible schalten. Den ersten und dritten Regelsatz kann ich später zusammenfassen.
Das dazugehgörige Tutorial
ist imho aufschlussreich, enspricht aber in manchen Erklärungen aber noch nicht dem verbesserten Beispiel.
Was fehlt
Wenn man mehrere Ebenen hat, bzw. vom letzten Menüpunkt aus Submenüs öffnet, müssten die sich nach links öffnen. Dort müsste man mit ein bisschen JS testen, wo sich das Menü befindet und entsprechend umschalten.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.