Wer weiß wie Dropdown Menu in meinem Code?

Hey, suche den Simpelsten weg um hier ein Dropdown einzubauen, ausserdem ist der Code Generell ok so oder sollte ich eine andere Herangehensweise wählen?

Danke!

Ich hoffe der Link geht:

https://codepen.io/McCoer/pen/PwYMERp

Answer 1

[Mirko Marek]

Hi Trismegisto,

das geht relativ gut mit CSS. Dabei verstecken wir die unsorted list die in der Navigationsstruktur vorhanden ist, und wenn wir über das Elternelement hovern, soll das Kindelement wieder angezeigt werden. Hier ist mein angepasster Code:

HTML:

<nav>
    <div class="navbar">
        <a href="#" class="logo">Meine Seite</a>
        <span class="menu-toggle">&#9776;</span>
        <ul class="nav-links">
            <li><a href="#">Start</a></li>
            <li class="dropdown-container">
                <a href="#">Menü &#9662;</a>
                <ul class="dropdown">
                    <li><a href="#">Unterpunkt 1</a></li>
                    <li><a href="#">Unterpunkt 2</a></li>
                    <li><a href="#">Unterpunkt 3</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</nav>

CSS:

.dropdown-container {
    position: relative;
}
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-width: 150px;
}
.dropdown li {
    display: block;
}
.dropdown li a {
    display: block;
    padding: 10px;
    color: black;
    text-decoration: none;
    background: white;
    white-space: nowrap;
}
.dropdown li a:hover {
    background: #007BFF;
    color: white;
}
.dropdown-container:hover .dropdown {
    display: block;
}

Viel Erfolg

Woher ich das weiß: Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Comments

[Trismegisto]

hey Danke dir,

Ich hab ein Problem damit ,einiges zu Verstehen, z.B. , warum wenn ich position:Absolut mache, die Dropdown -Items auf einmal eine Zeile unten drunter Erscheinen.....ich versteh das Verhältnis nicht.

Generell brauche ich glaube ich von Grund auf, das Verständniss wie ich einen Dropdown von einem Menuelement positionieren und gestalten kann.

Eine gute Anleitung.

[halid2ud]

@Trismegisto

position: absolute; macht es frei positionierbar

top: 100%; left 0; setzt es genau unter den menu

position: relative; bei .dropdown-container sorgt dafür, dass die absolute Positionierung auf das richtige element bezieht.

Ich hoffe das hilft einigermaßen.

[Trismegisto]

@halid2ud

ja danke habs gechekct! :-D, GPT ist schon hammergeil im erklären, der hats mir dann nochmal richtig mega ausfühjrlich erklärt