Komplexes Collapsing Menü

n811

Guten Morgen werte Wordpress Community,

ich brauche eure Hilfs, Tipps & Anregungen!

Konkret geht es um ein vertikales Collapsing Menü, wie etwa dass hier.

Um euch erstmal eine Vorstellung davon zu geben, was am Ende überhaupt herauskommen soll, hier mal ein paar Eckdaten:

Visueller Eindruck:
[Blockierte Grafik: http://s1.directupload.net/images/090902/wg686a8z.jpg]

- Parentpages sollen einen Pfeil bekommen. Wenn man auf ihn Klickt fahren die Childpages aus, dies sollte unendlich Tief funktionieren. (die Parentpage wird dabei nicht aufgerufen)

- Parentpages sollen aber auch als normale Pages funktionieren. Klickt man nicht auf den Pfeil, sondern auf den Titellink kommt man zur dementsprechenden Page, ohne das das Menü ausfährt. Ist man auf dieser Page ist das Menü entsprechend ausgefahren

- Das Menü soll auch bei einem erneuten Seitenaufruf in dem Zustand bleiben, in dem der User es hatte. (Ausgefahrene Menüs sollen offen bleiben, Geschlossene geschlossen)

Jetzt zu meinen Problemen:

1. Pfeil Problem:

Da wp_list_pages mir keine Möglichkeit bietet ausserhalb des <a> ein anderes Element, wie in diesem Fall dem Pfeil, unterzubringen habe ich die Sache mit nem kleinen Hack gelöst.

PHP

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2>$3</a><span class="arrow">Pfel</span>', wp_list_pages('echo=0&orderby=name&title_li=')); ?>

Nun habe ich neben jedem Link einen netten Pfeil.
Das Problem ist allerdings: Ich möchte dem Pfeil, sinnvoller Weise, nur bei Links sehen die auch Subpages haben. Und es soll eine Pages-mit-Childpages CSS Klasse geben.

Wie könnte ich diese Unterscheidung zwischen Normalen Pages und Pages die auch Subpages haben, treffen?

2. Zustandsübergabe

Wie würdet ihr die vom User ausgewählen Zustände (Aufgeklappt|Zugeklappt) übergeben? Wenn die Seite gewechselt wird / ein neuen Seitenaufruf entsteht. Cookie? JS? Sonstiges?

Vielen Dank im Voraus!! Ich werde das fertige Menü natürlich hier zum Download anbieten.

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

n811

Okay,

das Speichern der Zustände mit Jquery/Cookie Plugin funktioniert soweit. Wer wissen will wie's geht => http://www.scottdarby.com/2009/06/how-to…-cookie-plugin/

Allerdings ist das das Pfeil-Partentpage Problem noch immer nicht gelöst. :(

Frage nochmal: Gibt es eine Möglichkeit zu erkennen ob ein Menüpunkt noch Subpages hat?

Damits am Ende so in etwa aussieht?

Zitat

- PagemitSubpages - Pfeil
-- ChildPagemitSubpages - Pfeil
-- ChildPageohneSubpages - Kein Pfeil
-- ChildPagemitSubpages - Pfeil
-- ChildPagemitSubpages - Pfeil
- PageohneSubpages - Kein Pfeil
- PageohneSubpages - Kein Pfeil
- PagemitSubpages - Pfeil
- PagemitSubpages - Pfeil
- PageohneSubpages - Kein Pfeil
- PageohneSubpages - Kein Pfeil

Alles anzeigen

Rarehero

Ich würde das ja mit CSS machen. Das könnte dann so aussehen;

HTML-Code:

Code

<ul id="menu>
  <li class="primary"><a href="#" title="#">Menü-Kategorie 1</a>
    <ul>
      <li class="link">Unterpunkt 1</li>
      <li class="link">Unterpunkt 2</li>
      <li class="link">Unterpunkt 3</li>
    </ul>
  </li>
  <li class="primary"><a href="#" title="#">Menü-Kategorie 2</a>
    <ul>
      <li class="link">Unterpunkt 1</li>
      <li class="link">Unterpunkt 2</li>
      <li class="link">Unterpunkt 3</li>
    </ul>
  </li>
</ul>

Alles anzeigen

Und der dazugehörige CSS-Code

Code

#menu li ul { display: none }


#menu li:hover ul { display: block }


#menu primary a { background: #000000 url(images/pfeilnachunten) no-repeat center right}

Die Deklaration

#menu li ul { display: none }

bewirkt, dass die Unterpunkte ausgeblendet sind, bis man mit der Maus über den übergeordneten Menüpunkt fährt

#menu li:hover ul { display: block }

Die Deklaration für den Selektor "#menu primary a" bindet ein "Pfeil nach Unten" in die übergeordnete Schaltfläche ein.

Wenn du das Menü mit HTML und CSS baust, hast du den Vorteil, dass das Menü auf jeden Fall funktioniert, auch wenn der Besucher deiner Webseite möglicherweise JavaScript deaktiviert hat. Außerdem sparst du dir ein weiteres JavaScript auf deiner Webseite und ich denke, dass die Handhabung mit HTML und CSS einfacher ist. Als abschließendes Beispiel nochmal der gesamte Code für meine Navigation (die derzeit aber nicht verwende, da ich möglichst wenige Menüpunkte verwenden möchte)

HTML-Code:

Code

<ul id="navigation">
            <li>Meine Welt
                <ul>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Denkwelten</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Wissenswelten</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Alltagswelten</a></li>
                </ul>
            </li>
            <li>Medienwelten
                <ul>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Filmwelten</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Videogames</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Musik</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Internet</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Lesestoff</a></li>
                </ul>
            </li>
            <li>Showroom
                <ul>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Flash</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Webdesign</a></li>
                    <li><a href="[URL="http://forum.wordpress-deutschland.org/view-source:file:///E:/Webseiten/miromondo/template/green/index.html#"]#[/URL]">Fotografie</a></li>
                </ul>
            </li>
        </ul>

Alles anzeigen

CSS-Code:

Code

#navigation li ul { display: none }


#navigation li:hover ul { display: block }


#navigation ul { margin: 0 0 0 1px }


#navigation li {
    float: left;
    width: 125px;
    color: #6E6E6E;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    margin: 0 0 0 -1px;    
    background: #FFFFFF url(images/navi_primary.gif);
}


#navigation a {
    width: 125px;
    color: #9C9C9C;
    display: block;
    line-height: 25px;
    margin: -1px 0 0 0;
    text-align: center;
    background: #FFFFFF url(images/navi_button.gif);
}


#navigation a:hover {
    color: #99CC00;
    background: #FFFFFF url(images/navi_rollover.gif);
}

Alles anzeigen

n811

Okay, aber das ist ja gar nicht das Problem:

Wie bekomme ich den z.B. deine Klasse :class="primary", nur bei Pages die Kinder haben, ins Menü?

Ich will die Sache ja nicht Hardcoden sondern per wp_list_pages realisieren.

In Etwa so:

Code

<ul id="menu>
  <li class="primary"><a href="link zur überseite" title="#">Menü-Überseite1</a><pfeil zum aufklappen></li>
    <ul>
      <li class="link">Unterpunkt 1</li>
      <li class="primary"><a href="link zur überseite" title="#">Menü-Überseite1</a><pfeil zum aufklappen></li>
            <ul>
                <li class="link">Unter-Unterpunkt 1</li>
                <li class="link">Unter-Unterpunkt 2</li>
            </ul>
      <li class="link">Unterpunkt 3</li>
    </ul>
  </li>
  <li class="primary"><a href="link zur überseite" title="#">Menü-Überseite2</a><pfeil zum aufklappen></li>
    <ul>
      <li class="link">Unterpunkt 1</li>
      <li class="link">Unterpunkt 2</li>
      <li class="link">Unterpunkt 3</li>
    </ul>
  </li>
</ul>

Alles anzeigen

Bisher hab ichs nur geschafft den Pfeil hinter JEDES Listitem zu packen

PHP

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2>$3</a><span class="arrow">PFEIL</span>', wp_list_pages('echo=0&orderby=name&title_li=')); ?>

Ich möchte aber, dass nur Listitems die auch Kinder haben nen Pfeil bekommen...

Achja für Leute die kein JS haben:

Zitat

Diese Seite benötigt Javascript, um korrekt angezeigt zu werden.
Überprüft eure Browsereinstellungen, um Javascript zu aktivieren.

Aber darum gehts ja gar nicht....

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Komplexes Collapsing Menü

Jetzt mitmachen!