Frage zum Wiki-Artikel „Dropdown-Menüs mit CSS gestalten“

[cu.so]

Ich habe in Wordpress ein horizontales Dropdown Hauptmenü, dass sich ebenfalls horizontal nach unten aufklappt. Die Seite ist auch responsiv! Leider gibt es bezüglich des responsiv Verhalten beim Hauptmenü Schwierigkeiten, d.h. sobald ich aufgrund der horizontalen CSS-Anweisung in die mobile Ansicht wechsel, bleibt das Hauptmenü horizontal und switscht leider nicht in eine Blockansicht (untereinander)!

Sobald ich aber im CSS etwas verändere haut es mir wieder das gesamte Horizontalemenü zusammen und ich bekomme dann wieder ein normales Dropdownmenü, mit nach unten auklappenden Unterpunkten.

Erstellt habe ich die Seite mit Hilfe des Impreza Themes.

Folgende CSS Angaben habe ich gemacht:

.w-nav.type_desktop .w-nav-list.level_2 {
    width: 100%;
    max-width: 1472px;
    float: left;
    margin: 0px;
    padding: 0px;
    height: 0px
    opacity:10;
    text-align: left;
    z-index: 50;
}
.Element {
    display: inline-block;
    float: left;
    margin: 0.5em 0px;
    height: 0px;
    padding-right: 0px;
    padding-left: 0px;
}
.w-nav.type_desktop .w-nav-anchor:not(.level_1) {
    line-height: 1.4em;
    padding: 0.7em 10px;
    white-space: nowrap;
    transition: color 0.1s,background-color 0.1s;
    float: left;
    margin: 0 0 0 0px;
    left: -85px;
    width: 100%;
    max-width: 1472px;
    z-index: 50;
    display: inline-block;
}
.w-nav-item {
    display: inline-block;
}

Ich hoffe, es kann mir jemand helfen. Danke

[Matthias Apsel]

Hallo cu.so,

Ich hoffe, es kann mir jemand helfen. Danke

Ohne Link zur betreffenden WP-Seite wird das wohl nichts werden können.

Bis demnächst
Matthias

[cu.so]

Hallo Matthias,

es geht um die

http://kaufmann-architekten.com/

Seite.

VG

[Gunnar Bittersmann]

@@cu.so

http://kaufmann-architekten.com/

Schlecht benutzbar: a { outline: 0 } verhindert, dass man bei der Naviagition per Tastatur erkennen kann, wo man sich gerade befindet.

Wenn du die Outline entfernst, musst du dafür sorgen, dass der :focus-Zusatand anderweitig dargestellt wird; z.B. indem du bei :focus dasselbe tust wie bei :hover.

Bei Tastaturnavigation gibt es kein Untermenü; die Seiten „Leistungen“ und „Geschichte“ sind nicht erreichbar.

LLAP 🖖

[cu.so]

Wenn du die Outline entfernst, musst du dafür sorgen, dass der :focus-Zusatand anderweitig dargestellt wird; z.B. indem du bei :focus dasselbe tust wie bei :hover

Ich habe jetzt die Outline entfernt und bezügl. des :focus und :hover bin ich mir nicht sicher was du damit meinst? In der Farbeinstellung des Themes habe ich die beiden Angaben auf die gleiche Farbkodierung gesetzt, aber ich denke, da steckt noch mehr dahinter?

Leider löst es aber auch nicht mein Problem, dass die Navigation in der Mobilansicht nicht sauber untereinander angezeigt wird und damit "chaotisch" ausschaut!

Danke für deine Hilfe.

VG

[Gunnar Bittersmann]

@@cu.so

Wenn du die Outline entfernst, musst du dafür sorgen, dass der :focus-Zusatand anderweitig dargestellt wird; z.B. indem du bei :focus dasselbe tust wie bei :hover

Ich habe jetzt die Outline entfernt und bezügl. des :focus und :hover bin ich mir nicht sicher was du damit meinst? In der Farbeinstellung des Themes habe ich die beiden Angaben auf die gleiche Farbkodierung gesetzt

Nein, eben nicht. Du hast

.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

gesetzt, aber nichts für :focus. Damit derselbe Effekt erscheint:

.no-touch .w-nav-item.level_1:focus > .w-nav-anchor,
.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

Leider löst es aber auch nicht mein Problem, dass die Navigation in der Mobilansicht nicht sauber untereinander angezeigt wird und damit "chaotisch" ausschaut!

Solange dein Problem, dass die Navigation nicht tastaturbedienbar ist, nicht gelöst ist, macht es keinen Sinn, sich ums Styling zu kümmern. Möglicherweise ändert sich bei der Lösung ja das Markup, und dann müsste man wieder von vorn anfangen.

LLAP 🖖

[cu.so]

@Billy Gregory

.no-touch .w-nav-item.level_1:focus > .w-nav-anchor,
.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

da fehlt mir eine gehörige Portion Wissen!

Ich habe die von Dir o.g. Zeilen eingefügt, geändert hat sich nichts. Leider! Egal wo ich die letzten Tage gesucht und gelesen habe, es bringt mich leider nicht weiter.

Trotzdem Danke.

VG

[Gunnar Bittersmann]

@@cu.so

@Billy Gregory

?? Nee, der bin ich nicht.

.no-touch .w-nav-item.level_1:focus > .w-nav-anchor,
.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

da fehlt mir eine gehörige Portion Wissen!

Ich habe die von Dir o.g. Zeilen eingefügt, geändert hat sich nichts. Leider!

Stimmt, da hab ich dir was falsches gesagt.

.no-touch .w-nav-item.level_1:hover > .w-nav-anchor wirkt, weil es a-Elemente (der Klasse w-nav-anchor) in gehoverten li-Elementen (der Klassen w-nav-item und level_1) selektiert.

.no-touch .w-nav-item.level_1:focus > .w-nav-anchor kann nicht funktionieren, weil nicht die li-Elemente den Fokus bekommen, sondern die a-Elemente.

Du kannst einen Effekt für .no-touch .w-nav-item.level_1 > .w-nav-anchor:focus angeben,
bspw: .no-touch .w-nav-item.level_1 > .w-nav-anchor:focus { background: red } wirkt.

LLAP 🖖

[cu.so]

Hi Gunnar,

ein Schritt bin ich mit Deiner Hilfe nun weiter!

Nur, wie bekomme ich es jetzt hin, den "float: left" Befehl auf mobilen Geräten (Handys) zu unterbinden und die Navigation untereinander aufzulisten?

Mein Versuch:

.w-nav.type_desktop .w-nav-list.level_2 {
    width: 100%;
    float: left;
    opacity:10;
    text-align: left;
    z-index: 50;
}
.setclear {
    clear: left;
    width: 30%;
}

Float wird aber nicht aufgehoben, es fehlt eine Zuweisung?!

VG

[cu.so]

Ps.:

mit dem:

.clearfix: after { content: "."; display: block; clear: both; visibility: hidden; }

hat es auch nicht funktioniert, die Positionierung bleibt am Handy horizontal.

VG

[at]

Hallo cu.so,

diese Regel erzeugt dein Problem:

.w-nav-item {
    display: inline-block;
}

Wenn diese Regel unterhalb einer bestimmten Viewport-Breite nicht angewandt werde soll, überschreibe sie innerhalb eines passenden Media-Query-Blockes.

MfG, at