Subnavigation anpassen

LangholzFotodesign

Ich habe nun lange gesucht, aber nichts Passendes gefunden:

Auf meiner Seite (selbst erstelltes Theme) möchte ich, dass meine Subnavigation immer angezeigt wird, wenn ich mich in dem "Elternbereich" befinde. Hier habe ich bisher keine Lösung mit dem Menü von Wordpress gefunden. Das Menü manuell in den Header einzubauen ist für mich nur eine absolute Notalternative um dies umzusetzen.

Hat hier jemand eine Idee wie ich das umsetzen kann mit css? Sofern benötigt, poste ich gern meinen Code der Navigation. Seite: http://www.langholz-fotodesign.de

Vielen Dank schon einmal.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

AW: Subnavigation anpassen

http://forum.wpde.org/konfiguration/…einblenden.html
eventuell musst du die Klassen noch anpassen (je nachdem wie du sein Menü eingebaut hast)

LG, pixselig

ptra

#nav li ul {
height: auto;
[COLOR=#ff0000] left: -999em;[/COLOR]
position: absolute;
width: 900px;
z-index:999;
}
Damit liegt die Subnavi erst einmal außerhalb des sichtbaren Bereiches. Jetzt musst du nur noch einen Weg finden, dass auf der jeweiligen Seite das dazugehörige Submenue angezeigt wird.
Gruß. Petra ;-)

pixselig

AW: Subnavigation anpassen

Sorry Petra, aber könntest du mir den Vorteil deiner Methode gegenüber der obigen erklären?

Und sehr hilfreich ist diese Halblösung ( die zweite Hälfte soll sich die TE aus den Fingern saugen? ) ja auch nicht gerade...

Nichts für ungut, Petra!

LG, pixselig

ptra

Sorry, habe deinen Link nicht angeklickt.
Gruß. Petra ;-)

pixselig

AW: Subnavigation anpassen

Passt schon, ist ja schön wenn möglichst viele hier im Forum helfen!

Und schließlich funktioniert deine Lösung ja auch - wenn man sie fertig macht!

Ich persönlich finde nur die andere wesentlich einfacher(keine absolute Positionierung notwendig, dadurch eventuell auch kein z-index oder andere Anpassungen etc.) - aber darüber läßt sich streiten.

Guten Rutsch!

DerPuh

Kann dir zwar leider nicht helfen, aber vielleicht kannst du mir helfen.. ;)
Habe deine Seite gesehen und mich gefragt, wie du das sub menu horizontal hinbekommen hast... ?

Danke schon ein mal :)

LangholzFotodesign

Vielen Dank schon einmal für eure Hilfe, aber leider ist es nicht genau das, was ich suche, oh man, irgendwie blöd auszudrücken ^^ Mein Wunsch ist nicht, dass die Subnavigation beim Mouseover sonst nicht zu sehen ist, sondern ich möchte, wenn man z.B. sich auf "Leistungen" befindet die Subnavigation vollständig angezeigt wird. Genauso, wenn man auf "Fotodesignerin" oder einer Subkategorie ist, dass sozusagen die 2. Reihe immer eingeschaltet ist.

ptra: Das hatte ich auch schon mit eingebaut, weil sonst die Subnavigation von allen angezeigt wird und sich komplett überschneidet.

DerPuh: ja, das war schon eine Fummelei mit Wordpress und der Navigation ;)
Hier mal mein Code, wobei der halt auf meine Seite gemünzt ist, muss halt dann jeder für sich selbst umbauen (und wär schön wenn es nicht 1zu1 abkopiert wird):

Code

#nav{
    background-color: transparent;
    display: block;
    font-size: 14px;
    height: 50px;
    width: 100%;
    padding-top: 4px;
}


#nav, #nav ul {
    list-style: none;
}


#nav a ,#nav a:hover{
    border:none;
    display: block;
    text-decoration: none;
}


#nav li {
    float: left;
    list-style:none;
}


#nav a,#nav a:visited {
    color:#5e1e7f;
    display:block;
    font-weight:bold;
    padding: 10px 20px;
}


#nav a:hover, #nav a:active {
    color: #5e1e7f;
    text-decoration: none;
}    


#nav li ul {
    height: auto;
    left: -999em;
    position: absolute;    
    width: 900px;
    z-index:999;
}


#nav li li {
    width: auto;
}


#nav li li a,#nav li li a:visited {
    color:#5e1e7f;
    font-weight:normal;
    font-size: 12px;
}


#nav li li a:hover,#nav li li a:active {
    color:#5e1e7f;
}

Alles anzeigen

pixselig

AW: Subnavigation anpassen

Zitat von LangholzFotodesign

...Mein Wunsch ist nicht, dass die Subnavigation beim Mouseover sonst nicht zu sehen ist, ...

LOL, doppelte Verneinung mit einem "sonst" dazwischen - scheint ja wirklich schwer auszudrücken zu sein :)

Was willst du denn?

Ein horizontales DropDown-Menü?

Oder sollen die Subpages nur angezeigt werde wenn der Besucher sich auf der jeweiligen Parentpage befindet (NICHT mouseover)?

Wenn du zweiteres vorhast (wovon ich eigentlich ausgehe) dann ist der von mir gepostete link schon der richtige. Allerdings unter der Voraussetzung, dass du die Navigation via "wp_nav_menu" löst!
Wenn du die Navigation via "wp_list_pages" und childpages löst, dann wirst du da auch noch etwas PHP benötigen.

Bin leider nur mobil unterwegs und kann mir das daher nicht genau ansehen.

LG, pixselig

ptra

Wir hatten dich schon richtig verstanden: bei MouseOver und wenn man sich auf der Seite befindet, soll das Submenu angezeigt werden. Wenn jede Seite mit einer individuellen ID ausgestattet wird, sollte das zu machen sein. Ich werd mal googeln ;-)
Gruß. Petra

P.S.: Link gefunden hier

pixselig

AW: Subnavigation anpassen

Ah ihr gehört zusammen :) Zu zweit macht es ja auch viel mehr Spaß, oder?

So wie ich das sehe, denkt ihr da etwas zu kompliziert (mittels der body_class lässt sich schon so einiges anstellen -> unter anderem sicher auch ein individuelles Submenü. Dies ist aber in eurem Fall wie mit Kanonen auf Spatzen schießen.).
WP vergibt von Haus aus schon entsprechende Klassen für die einzelnen Menüpunkte (und unterscheidet dabei zwischen aktiv/inaktiv und parent/sub/child !). Das sollte dann auch reichen um euren Wunsch allein mittels CSS umzusetzen -> siehe hierzu den von mir geposteten Link.

Wird Zeit, dass ich wieder an meinen PC komme, dann könnte ich dir/euch das genauer erklären.

DerPuh
<li> bzw. Listenelemente haben standardmäßig vor und nach sich einen (Zeilen)Umbruch -> daher auch der Name. Unterbinden kannst du das indem du den entsprechenden Listenelementen das Attribut

Code

display: inline;

gibst.

Ginge auch via "float" - ist dann nur ein ganz klein wenig komplizierter.

LG, pixselig

uneart

WordPress gibt dem aktiven Menüpunkt die CSS-Klasse .current-menu-item.

Du könntest also einfach das Submenü so gestalten, wie es sein soll und dann einfach als Standard display:none; setzen. Wenn derübergeordnete Menüpunkt aktiv ist (also die Klasse .current-menu-item hat), dann setzt du beim Submenü display:block;.

Komplett würde das so aussehen:

Code

.sub-menu {
    display:none;
}


.current-menu-item .sub-menu {
    display:block;
}

Um das CSS nur auf die Hauptnavigation zu beschränken kannst du natürlich noch eine extra Klasse davorsetzen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Subnavigation anpassen

Jetzt mitmachen!