Dropdown Menu

iSarah · 13.06.2022

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 :|

scatello · 13.06.2022

Wie soll man dir bei den Infos helfen? Link zur Seite?

Siehe https://www.w3schools.com/howto/howto_css_dropdown.asp

iSarah · 13.06.2022

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

.

scatello · 13.06.2022

iSarah schrieb:
Aber wie passe ich das css wieder so an wie es vorher war?

Wie war es denn vorher? Du sprichst in Rätseln, so kann man dir nicht helfen.

iSarah schrieb:
Ich bin nh 0 was css angeht

Das kann man durchaus ändern, wenn man denn will.

iSarah · 13.06.2022

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

Sempervivum · 13.06.2022

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 · 13.06.2022

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:

/* 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

iSarah · 13.06.2022

Und da sieht das jetzt schonmal so aus:

Bildschirmfoto 2022-06-13 um 21.32.32.png

Sempervivum · 13.06.2022

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 · 14.06.2022

Oh Achso ^^ ich schicke morgen mal den anderen Code.
Danke schonmal für den Hinweis!

Sempervivum · 14.06.2022

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. */
}

tk1234 · 14.06.2022

iSarah schrieb:
Original findet man das auf w3schools > https://www.w3schools.com/howto/howto_css_dropdown.asp

Der Code taugt nichts, die auszuklappenden Inhalte sind per Tastatur nicht erreichbar.

iSarah · 14.06.2022

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);
}

scatello · 14.06.2022

tk1234 schrieb:
die auszuklappenden Inhalte sind per Tastatur nicht erreichbar

Eine Tastaturbedienung hat man doch sowieso nur in den seltensten Fällen.

iSarah schrieb:
Ist das das Richtige?

Wenn ein CSS-Code mit } anfängt, kann das dann richtig sein? Ich denke, es wäre das Beste, wenn du die Seite online stellst, damit wir uns das ansehen können.

Sempervivum · 14.06.2022

Da scheint noch einiges zu fehlen, wenn ich dieses CSS übernehme, sieht das Ergebnis so aus:

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.

iSarah · 14.06.2022

Ohje xd

Habe sie mal eben hochgeladen
http://sarahkunert.de/

tk1234 · 15.06.2022

scatello schrieb:
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.

iSarah schrieb:
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.

Sempervivum · 15.06.2022

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 · 15.06.2022

Das mit Bootstrap haut ja schon fast hin! Danke! Ich versuchs mal weiter

Dropdown Menu

iSarah

Member

scatello

Well-known member

iSarah

Member

scatello

Well-known member

iSarah

Member

Sempervivum

Well-known member

iSarah

Member

iSarah

Member

Sempervivum

Well-known member

iSarah

Member

Sempervivum

Well-known member

tk1234

Active member

iSarah

Member

scatello

Well-known member

Sempervivum

Well-known member

iSarah

Member

tk1234

Active member

Sempervivum

Well-known member

iSarah

Member

Dropdown Menu