Schwierigkeit bei vertikaler Navigation

  • Hallo.

    Ich bin gerade an einer vertikalen Navigation am verzweifeln, das mit den Listen habe ich noch nie so richtig verstanden aber evtl. kann mir jemand den nötigen Anstoß geben oder anders helfen, wäre auf jeden Fall sehr dankbar.

    Ich möchte eine Navigation wie hier zu sehen erstellen, allerdings bastel ich daran schon seit mehreren Stunden und bekomme es einfach nicht hin.

    Folgende Hierarchie hat das ganze.

    • Willkommen
    • Werkstatt
      [INDENT]
    • Wegbeschreibung
    • Über uns[/INDENT]
    • Produkte
      [INDENT]
    • Echsen, Bewohner aus der “Alten Welt”
    • Schildkröten, älter als der Dinosaurier
    • Schlangen, Perfektio im Schuppenkleid
    • Vögel, die Bezwinger der Lüfte[/INDENT]
    • Messe, Märkte, Ausstellungen
    • Bestellung
    • Kontakt / Impressum

    Screenshot

    Sturktur der sidebar.php

    PHP
    <ul>
        <li>
            <ul>
                <?php wp_list_pages('title_li='); ?>
            </ul>
        </li>
    </ul>

    Es hängt schon an der grundlegenden Formatierung per CSS, weiteres Problem ist bei das bei einem Klick auf "Produkte" die Unterseiten auch Aktiv sind, es soll aber immer nur eine Seite Aktiv sein und zwar die auf der man sich befindet.

    Meine CSS-Klassen:

    Meine Blockade ist perfekt, komme einfach nicht weiter. Kann mir evtl. jemand dabei helfen?

    Danke & Grüße otabrags

    • Anzeige

    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

  • Vielleicht gibst du mal lieber einen Link, dann müssen wir nicht das raten anfangen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • so, hab grad mal ein bisschen mit Firebug bei dir rumgespielt. Für die aktuell angezeigte Seite übergibt WP die Class current_page_item. Diese musst du also erst mal in deiner style.css ganz unten formatieren:

    Code
    div#nav1 ul [COLOR=Red]li.current_page_item a[/COLOR] {
    color: [COLOR=Red]red[/COLOR];
    }

    Danach ist dann alles unterhalb current_page_item gleich formatiert. Also musst du die Links darunter wieder zurück formatieren:

    Code
    div#nav1 ul [COLOR=Red]li.current_page_item [COLOR=SeaGreen]li[/COLOR] a[/COLOR] {
    color: [COLOR=SeaGreen]green[/COLOR];
    }

    So funktioniert das Prinzip.

    Ach so, und zum einrücken der Unterseiten kannst du natürlich auch wieder frei formatieren:

    Code
    div#nav1 ul li li {
    padding-left:10px;
    }


    Ich glaub jetzt hab ich alles angesprochen was du wolltest ;-)

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Einmal editiert, zuletzt von maxe (23. Juli 2009 um 10:08)

  • Neues Problem bei vertikaler Navigation

    Moin.

    Ich sitze im Augenblick wieder vor einem Problem und mir fallen gleich wieder Haare aus.

    Ähnliche Problematik, in diesem Fall setze ich das Plugin "Fold Page Menu" ein um die Unterseiten der Hauptseiten solange auszublenden bis die Hauptseite angewählt ist.

    Die Menüstruktur sieht wie folgt aus:

    • Startseite
    • Einbauten

      [INDENT]

    • Alfa

      [INDENT]

    • Alfa 156
    • Alfa 156 Sportwagon
    • Alfa Spider[/INDENT][/INDENT]

      [INDENT]

    • Audi

      [INDENT]

    • Audi A3
    • Audi 80 B4
    • Audi A4[/INDENT][/INDENT]
    • Wir über uns

      [INDENT]

    • Produkte
    • Tätigkeiten
    • Philosophie[/INDENT]
    • Kontakt

      [INDENT]

    • Anfahrt
    • Öffnungszeiten
    • Termine[/INDENT]
    • Sonstiges

      [INDENT]

    • Links
    • Suche
    • Gästebuch[/INDENT]
    • Impressum

      [INDENT]

    • Disclaimer[/INDENT]

    An sich sieht das ganze für mich simpel aus, allerdings komme ich mit den Klassen für das Plugin "Fold Page Menu" durcheinander. Habe zwar grundsätzlich Verständnis in Sachen HTML & CSS & PHP aber das übersteigt im Moment mein Vorstellungsvermögen. :-)

    Das ganze gibt es hier live zu sehen, mit Firebug bin ich auch nicht so richtig weitergekommen ...

    Ich komme einfach nicht weiter, kann mir evtl. jemand dabei helfen? Das wäre super-mega-toll. :-D

    Ich müsste verstehen welche Klassen ich benutzen muss:

    Ebene 1/Hover/Aktiv/...
    Ebene 2/Hover/Aktiv/...
    Ebene 3/Hover/Aktiv/...
    usw.

    Danke & Grüße otabrags

    Einmal editiert, zuletzt von otabrags (21. September 2009 um 22:08)

  • gehe auf die Startseite und schau dir den Quellecode an,
    magst du nur die jeweiligen Zustände gestalten hast du

    .page_item
    .page_folder
    .current_page_item
    .current_page_ancestor


    je genauer du diese Hierachie die du im Quelltext siehst gestalten magst, desto genauer musst Du die Reihenfolge der Selektoren angeben

    ich nutz dazu immer einen Rahmen, wenns ganz komplex wird
    also ich mag zb li.page_item gestalten, habe noch keine Ahnung, ob
    ich den Selektor richtig wählte und schreib daher mal

    li.page_item{border:px solid red;}

    seh ich den roten Rand nicht, is was falsch ;)
    #sidebar ul li.page_item erweiter ich den Selektor dann meist und dann seh ich was..

    ich hoff das hilft mal weiter


    damit du firebug nutzen kannst musst Du das style im Header verlinken und nicht
    importieren;)

  • CSS: fold_page_list, ich stehe auf dem Schlauch ...

    Hallo Monika,

    Danke für Deine Antwort.

    Ein Fehler der es mir erschwert hat war eine CSS-Definition *{}, jetzt bin ich einen Schritt weiter aber komme immer noch nicht so richtig klar damit.

    Evtl. mache ich auch schon früher einen Fehler?

    Code der Sidebar:

    PHP
    <?php wswwpx_fold_page_list ('title_li=&sort_column=menu_order'); ?>
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    CSS:

    Um die Struktur zu verstehen habe ich Deinen Trick angewendet, allerdings wechselt die Klasse ja je nachdem welcher Menüpunkt aktiv ist.

    CSS des Menü:

    Code
    .page_item{color:#F00;} /*Rot: Seiten generell?*/
    .page_folder{color:#0F0; padding-left:} /*Grün: Seiten mit Unterseiten?*/
    .current_page_item{color:#00F;} /*Blau: Aktive Seiten?*/
    .current_page_ancestor{color:#FF0;} /*Gelb: Aktive Oberseiten?*/

    Layout des Menü wie es grundsätzlich aussehen sollte:
    Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

    Generell soll die oberste Ebene Versal geschrieben sein, dann für jede Ebene tiefer eine kleinere Schriftgröße und einen größeren Einzug, bei aktiven Seiten und Hover soll nur Bold sein.

    Auf der Startseite hat der Menüpunkt Einbauten die Klasse ".page_folder", ist er ausgewählt ".current_page_item", ist Alfa ausgewählt ".current_page_ancestor" … wie verpacke ich das dann in CSS? Ich stehe irgendwie auf dem Schlauch.

    Dieses Menü überfordert irgendwie mein Vorstellungsvermögen. :-) Kannst Du mir evtl. noch einen Denkanstoß geben?

    Meinst Du mit…

    Zitat

    damit du firebug nutzen kannst musst Du das style im Header verlinken und nicht
    importieren:wink:

    …das ich das CSS für Firebug direkt in die index.php packe? Dann kann ich es direkt editieren oder wie? Ich habe es bisher nur zum herausfinden der Klasse benutzt.

    Grüße otabrags

  • CSS: fold_page_list, ich stehe auf dem Schlauch ...

    Sorry für den Push, aber hat niemand eine Idee? Komme nicht weiter und habe anscheinend irgendwie nicht den richtigen Ansatz. Grüße otabrags

  • nein mit verlinken meinte ich so


    PHP
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    und nicht das @import verwenden--sollte man sowieso nie bis gar nie überhaupt nicht

    und wenn das immer wechselt, je nachdem was aktuell ist musst Du die Hierarchie berücksichtigen

    zb

    Code
    li.page_item  sieht anders aus als  
    li.page_item li.current_page_item li.page_item

    drum meint ich ja geh in den QUelltext und verfolg die classen nach oben hin

  • Schwierigkeit bei vertikaler Navigation, immer noch nicht kapiert …

    Hallo Monika,

    danke für Deine Antwort aber ich kapier es einfach nicht.

    Schau mal bitte hier

    Ist die Seite Alfa aktiv, haben deren Unterseiten (Alfa 156, Alfa 156 Sportwagon, Alfa Spider) die selbe Klasse wie die Startseite, nämlich "page_item" – das scheint mir gerade etwas zu hoch für mich zu sein.

    Sorry wenn ich anfange zu nerven.

    Grüße,
    otabrags

    Einmal editiert, zuletzt von otabrags (3. Oktober 2009 um 16:32)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!