Dropdown Menu

Diskutiere Dropdown Menu im HTML Forum im Bereich Programmierung; Hallöle! Ich suche jemanden der mir fix bei meinem Menu helfen kann. Ich habe an der Seite ein Navbar. Dort soll 1x ein Dropdown vorkommen. Das...
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Hallöle!
Ich suche jemanden der mir fix bei meinem Menu helfen kann.
Ich habe an der Seite ein Navbar. Dort soll 1x ein Dropdown vorkommen.
Das habe ich noch hinbekommen. Allerdings funktioniert das mit dem css nicht. Bzw kenne ich mich da nicht so aus.
Es sitzt aber auch schon an der richtigen Stelle :| navabr.png
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Hey hey!
Danke für die Antwort ^^

Ich habe es mir von w3schools genommen(einfach rauskopiert)
Das funktioniert ja alles soweit. Aber wie passe ich das css wieder so an wie es vorher war? Ich bin nh 0 was css angeht🥲😂.
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Sorry uff.
Siehst du das Bild oben? Das "Ränge" soll wie das obere und das untere aussehen.

Ja ich hab es versucht. Aber ich komm nicht drauf 🤷🏻‍♀️ Ich habe viel geändert. Weiter als oben komme ich nicht 🤷🏻‍♀️
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Du musst den Code posten, CSS und HTML oder alternativ die URL deiner Seite.
Wenn Code, dann bitte Codetags benutzen, das Menüsymbol (3 Punkte) rechts von dem Landschaftssymbol oben und dann </>
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Sorry xD newbie und so.

in der HTML sieht es gerade so aus:
Code:
<nav class="navbar navbar-default">
        <div class="navbar-header">
        </div>
        <div id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Startseite</a></li>
                
<div class="dropdown">
  <button class="navbar"><li><a href="category/331499.html">Ränge</a></li></button>
  <div class="dropdown-content">
    <a href="#">Übersicht aller Rechte</a>
  </div>
</div>
    
                            
<li><a href="category/331499.html">Upgrade</a></li>
                            
<li><a href="category/331502.html">Kisten</a></li>
                            
<li><a href="category/331723.html">Gutscheine</a></li>
                            
                                                                </ul>
        </div>
</nav>

CSS:

CSS:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 7px 90px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: white;}


Original findet man das auf w3schools > https://www.w3schools.com/howto/howto_css_dropdown.asp
Habe da halt wenig dran rumgespielt xd
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
OK, Du möchtest, dass der Listenpunkt "Ränge" genau so aussieht wie die anderen. Damit man die anderen nicht von Grund auf neu stylen muss, poste bitte auch das CSS für die anderen Listenpunkte.

Man kann aber soviel schon sagen, dass dein HTML nicht valide ist, denn ein ul darf nur li-Elemente enthalten und keine divs. Außerdem ist das div.nav überflüssig, das ul kann genau so gut für das Styling verwendet werden. Dann kann das HTML so aussehen:
Code:
    <nav class="navbar navbar-default">

        <div class="navbar-header">
        </div>

        <ul class="nav navbar-nav">
            <li><a href="index.html">Startseite</a></li>

            <li class="dropdown">
                <button class="dropbtn">Dropdown</button>
                <ul class="dropdown-content">
                    <li><a href="#">Level 2 Item 1</a></li>
                    <li><a href="#">Level 2 Item 2</a></li>
                    <li><a href="#">Level 2 Item 3</a></li>
                </ul>
            </li>

            <li><a href="category/331499.html">Upgrade</a></li>

            <li><a href="category/331502.html">Kisten</a></li>

            <li><a href="category/331723.html">Gutscheine</a></li>

        </ul>
    </nav>
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Oh Achso ^^ ich schicke morgen mal den anderen Code.
Danke schonmal für den Hinweis!😃
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Du kannst auch selbst versuchen, zum Ziel zu kommen. In CSS kann man die Selektoren durch Komma getrennt aneinander reihen, etwa so:
Code:
nav>ul>li {
    /* Hier die Regeln für das li-Element */
}

/* Selektor für das a-Element: */
nav>ul>li >a,
/* Und zusätzlich für das button-Element: */
nav>ul>li>button {
    /* Hier die Regeln für das Element innerhalb des li: */
    border: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    /* Und wahrscheinlich sind weitere Regeln nötig. */
}
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Guten Morgen zusammen :)
Ist das das Richtige?
Code:
}
.navbar-default {
    background: transparent;
}
.navbar-nav>li {
    transition: 0.05s;
    float: unset;
    background: #fff;
    border-radius: 3px;
    margin-bottom: 12px;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
}

.navbar-nav {
    float: unset!important;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    padding: 0!important
}
.navbar-default .navbar-nav>li>a {
    color: #373737;
    font-weight: bold;
    font-size: 15px;
}
.navbar-default .navbar-nav>li:hover, .navbar-default .navbar-nav>li:focus, .navbar-default .navbar-nav>.open {
    color: #373737;
    border-left: 4px solid var(--main-color);
}
 
S

scatello

Well-known member
Beiträge
309
Punkte Reaktionen
22
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Da scheint noch einiges zu fehlen, wenn ich dieses CSS übernehme, sieht das Ergebnis so aus:
dropdown-menu.png
Schriftart und Schriftgröße fehlen, die Listenpunkte müssen ausgeblendet werden etc.
Stimme zu, am besten wäre es, wenn Du die URL der Seite posten würdest.
 
T

tk1234

Active member
Beiträge
33
Punkte Reaktionen
2
Eine Tastaturbedienung hat man doch sowieso nur in den seltensten Fällen.
Es soll aber Leute geben die auf Tastaturbedienung angewiesen sind … Wobei die aktuelle Seite auf auf Touch-Displays unbedienbar ist: hover gibt es dort ja nicht, idR wird beim Tippen auf ein Element hover ausgelöst - das geht aber natürlich nicht wenn das Element ein Link ist und der Browser dann dem Link folgt.
Habe sie mal eben hochgeladen
Dein HTML ist immer noch falsch - das musst du erst korrigieren, vorher ist es wenig sinnvoll die Darstellung korrigieren zu wollen.
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Wie ich sehe, mischt da auch Bootstrap mit und eine CSS-Datei namens flatly.min.css.
Glücklich bin ich mit dieser Lösung nicht aber versuche dieses CSS für den Button:
Code:
ul.navbar-nav button {
            color: #373737;
            font-weight: bold;
            font-size: 15px;
            background-color: transparent;
            border: none;
            padding: 10px 15px;
            padding-top: 19.5px;
            padding-bottom: 19.5px;
            margin: 0;
        }
Und das HTML wie in Posting #9.
Der nächste Schritt wäre dann, das Dropdown auch auf Touch-Geräten verfügbar zu machen. Da Du ohnehin Bootstrap benutzt, würde ich empfehlen, es nicht weiter selbst zu stricken sondern auf das Dropdown von Bootstrap umzustellen:
https://getbootstrap.com/docs/4.3/components/dropdowns/
Wobei es noch eine Komplikation in der Form gibt, dass auf deiner Seite die Version 3 von Bootstrap verwendet wird.
 
iSarah

iSarah

Member
Beiträge
9
Punkte Reaktionen
0
Das mit Bootstrap haut ja schon fast hin! Danke! Ich versuchs mal weiter ;)
 
Zuletzt bearbeitet:
Thema:

Dropdown Menu

Oben Unten