Antwort an „Joergi“ verfassen

Mobiles Menü funktioniert nicht richtig

Joergi 26.02.2024 03:57

Hallo 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&nbsp;&nbsp;&#9660
            <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&nbsp;&nbsp;&#9660
            <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>