1. Dashboard
  2. Articles
  3. Forum
  • Login or register
  • Search
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • More Options
  1. webEdition Forum
  2. Forum
  3. Deutschsprachiges Support Forum
  4. webEdition Templates erstellen (we:tags)

Barrierefreie Navigation

  • SiBl
  • September 25, 2023 at 3:55 PM
1st Official Post
  • SiBl
    Beginner
    Posts
    22
    • September 25, 2023 at 3:55 PM
    • #1

    Hallo allerseits,

    ich muss die barrierefreie Navigation der Website https://kv-muster.drk-intern.de/ mit webEdition nachbauen.

    Das gelingt sehr gut, bis auf ein Problem, das mich zum Verzweifeln bringt.

    Die Navigation soll wie folgt funktionieren:

    Bei Klick auf die Hauptnavigation - beispielsweise auf "Angebote" - gelangt man zur Übersichtsseite "Angebote" und es erscheint dort ein Balken mit dem Punkt "Angebote". Klick man darauf, klappt die Unternavigation von "Angebote" auf. Darin kann man dann nochmals auf eine Ebene tiefer auf die Links zu den Einzelseiten kommen.

    Bei mir ist es so, dass die Unternavigation grundsätzlich mit der Hauptnavigation beginnt. Danach kann ich auch wunderbar in die nächsten Ebenen gelangen und auch zurück springen. Aber ich möchte ja mit dem zweiten Level beginnen. Ich habe mit einem ersten leeren "we:navigationEntry" begonnen, aber leider bringt das nichts. Hier der Code, wie ich es umgesetzt habe (ab der Übersichtsseite nach dem Klick auf einen Hauptnavigationspunkt):

    Code
    <div class="sub-menu__bar">
                <button class="sub-menu__topic-button" aria-label="Öffne Untermenü von <we:navigationField attributes="title" />">
                    <span>
                        <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                        <we:navigation navigationname="breadcrumb" parentid="204" />
                        <we:navigationEntry type="folder" navigationname="breadcrumb"></we:navigationEntry>
                        <we:navigationEntry type="folder" navigationname="breadcrumb" current="true">
                            <we:navigationField name="text" />
                        </we:navigationEntry>
                        <we:navigationWrite navigationname="breadcrumb" />
                    </span>
                </button>
            </div>
    
    
            <div class="sub-menu__nav-wrap" style="visibility: hidden">
    <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
                    <div class="sub-menu__list-wrap">
    <we:navigation navigationname="untermenue" parentid="204" />
                        
                        <we:navigationEntry type="folder" navigationname="untermenue"> </we:navigationEntry>
                        
                        <we:navigationEntry type="folder" navigationname="untermenue">
                            <li class="sub-menu__item visible" style="display: block;">
                                <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                                        <we:navigationField name="text" />
                                    <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                                </button>
    
                                <we:ifHasEntries>
                                    <ul class="sub-menu__list" style="display: none">
                                        <li class="sub-menu__item" style="display: none">
                                            <button class="sub-menu__button sub-menu__button--back">
                                                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                                                zurück
                                            </button>
                                        </li>
    
                                        <li class="sub-menu__item visible" style="display: block;">
                                            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                                                <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: block;" class="sub-menu__link">
                                                <span class="sub-menu__overview-label">Übersichtsseite</span>
                                                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                                                </a>
                                        </li>
                                <we:navigationEntries />
                                    </ul>
                                </we:ifHasEntries>
                            </li>
                        </we:navigationEntry>
                        
    
                        <ul class="sub-menu__list" style="display: block;">
                            <we:navigationWrite navigationname="untermenue"/>
                        </ul>
    
                    </div>
                </nav>
                        </div>
    Display More

    Nun habe ich schon verschiedene Varianten ausprobiert. Beispielsweise habe ich beim zweiten <we:navigationEntry type="folder" navigationname="untermenue"> auch mal ein current="true" hinzugefügt. Da ist dann nur noch der eine Hauptnavigationspunkt, den ich angeklickt habe, zu sehen und sonst kein weiterer Link. Mit der Angabe von Levels funktioniert es auch nicht.

    Ich würde mich über einen Tipp sehr freuen.

    Viele Grüße

    Silvia

    Edited 2 times, last by SiBl (September 25, 2023 at 4:05 PM).

  • Finn
    Administrator
    Reactions Received
    12
    Posts
    295
    • September 25, 2023 at 5:33 PM
    • Official Post
    • #2
    Quote from SiBl

    Bei mir ist es so, dass die Unternavigation grundsätzlich mit der Hauptnavigation beginnt. Danach kann ich auch wunderbar in die nächsten Ebenen gelangen und auch zurück springen. Aber ich möchte ja mit dem zweiten Level beginnen. Ich habe mit einem ersten leeren "we:navigationEntry" begonnen, aber leider bringt das nichts.

    Verstehe ich noch nicht ganz, was möchtest du vom Verhalten anders als es gerade ist? Am Beispiel von Angebote. Eventuell hilft eine Zeichnung oder eine Baumstruktur um zu verstehen, was genau du brauchst.

    https://www.wg-werbeagentur.de

  • SiBl
    Beginner
    Posts
    22
    • September 25, 2023 at 7:48 PM
    • #3

    Hier zur Verdeutlichung zwei Screenshots:

    Die Navigation, wie sie sein soll (Beispiel https://kv-muster.drk-intern.de/angebote.html)

    Und ein Screenshot aus meiner Entwicklungsumgebung (navi_falsch.jpg)
    Nur zur Info: die Unternavigation unterscheidet sich bei mir. Es gibt also nicht Alltagshilfen usw., sondern Rettungsdienst, Gesundheit und Pflege usw.. Diese Links müssten in der Unternavigation erscheinen, aber es erscheinen immer nur die Hauptpunkte.

  • WBTMagnum
    Student
    Reactions Received
    14
    Posts
    163
    • September 25, 2023 at 10:03 PM
    • #4

    Hallo Sivlia,

    Das mit der Navigation ist nicht ganz so trivial. Am Besten du definierst jede Navigationsebene separat, z.B. so:

    Startpunkt der Navigation festlegen:

    HTML
    <we:navigation navigationname="untermenue" parentid="204"/>

    Optional: Leere Ausgabe für Folder und Items als default definieren:

    HTML
    <we:navigationEntry type="folder" navigationname="untermenue"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="untermenue"></we:navigationEntry>

    1. Navigationsebene

    HTML
    <we:navigationEntry type="folder" navigationname="untermenue" level="1" current="true">
      <li class="sub-menu__item visible" style="display: block;">
        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
          <we:navigationField name="text" />
          <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
        </button>
    
        <we:ifHasEntries>
          <ul class="sub-menu__list" style="display: none">
            <we:navigationEntries comment="um level 2 auszugeben" />
          </ul>
        </we:ifHasEntries>
      </li>
    </we:navigationEntry>
    Display More

    2. Navigationsebene

    HTML
    <we:navigationEntry type="folder" navigationname="untermenue" level="2" current="false">
      <li>
        <we:navigationField name="text" />
      </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="untermenue" level="2" current="true">
      <li>
        <we:navigationField name="text" />
    
        <we:ifHasEntries>
          <ul class="sub-menu__list" style="display: none">
            <we:navigationEntries comment="um level 3 auszugeben" />
          </ul>
        </we:ifHasEntries>
      </li>
    </we:navigationEntry>
    Display More

    Die Ausgabe kann davon unabhängig erfolgen:

    HTML
    <div class="sub-menu__nav-wrap" style="visibility: hidden">
      <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
        <div class="sub-menu__list-wrap">
          <ul class="sub-menu__list" style="display: block;">
            <we:navigationWrite navigationname="untermenue"/>
          </ul>
        </div>
      </nav>
    </div>

    Um den Code zu vereinfachen, habe ich einige deiner HTML-Strukturen ausgelassen. Ich hoffe der Lösungsansatz ist damit besser erkennbar.


    HTH,

    Sascha

  • SiBl
    Beginner
    Posts
    22
    • September 26, 2023 at 8:16 PM
    • #5

    Hallo Sascha,

    vielen Dank für Deine Mühe. Ich habe es nun ausprobiert. Leider funktioniert das auch nicht.

    Nun wird bei Klick auf "Angebote" wieder Level 1 ausgegeben und davon aber nur der aktive Navigationspunkt.

    Bei Klick auf das "Angebote" im Klappmenü erscheinen dann wie gewünscht die Menüpunkte von Level 2 (die ja eigentlich ein Schritt vorher angezeigt werden sollten). Klickt man dann auf einen Punkt bei Level 2, werden die Navigationspunkte von Level 3 gar nicht mehr angezeigt. Die Angabe level="2" current="false" oder level="2" current="true" scheinen hier nicht zu wirken.

    Hier der Code dazu:

    Code
    <div class="sub-menu__bar">
        <button class="sub-menu__topic-button" aria-label="Öffne Untermenü von <we:navigationField attributes="title" />">
            <span>
                <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                <we:navigation navigationname="breadcrumb" parentid="204" />
                <we:navigationEntry type="folder" navigationname="breadcrumb"></we:navigationEntry>
                <we:navigationEntry type="folder" navigationname="breadcrumb" current="true">
                    <we:navigationField name="text" />
                </we:navigationEntry>
                <we:navigationWrite navigationname="breadcrumb" />
            </span>
        </button>
    </div>
    
    
    
    <we:navigation navigationname="untermenue" parentid="204"/>
    
    <we:navigationEntry type="folder" navigationname="untermenue"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="untermenue"></we:navigationEntry>
    
    <!--1. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="untermenue" level="1" current="true">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
    
            <we:ifHasEntries>
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück
                        </button>
                    </li>
    
                    <li class="sub-menu__item visible" style="display: block;">
                        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: block;" class="sub-menu__link">
                            <span class="sub-menu__overview-label">Übersichtsseite</span>
                            <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
    
                    </li>
                    <we:navigationEntries comment="um level 2 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    
    <!--Ende 1. Navigationsebene-->
    
    <!--2. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="untermenue" level="2" current="false">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
        </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="untermenue" level="2" current="true">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
    
            <we:ifHasEntries>
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück
                        </button>
                    </li>
    
                    <li class="sub-menu__item visible" style="display: block;">
                        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: block;" class="sub-menu__link">
                            <span class="sub-menu__overview-label">Übersichtsseite</span>
                            <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
                    </li>
                    <we:navigationEntries comment="um level 3 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    
    <!--Ende 2. Navigationsebene-->
    
    
    <div class="sub-menu__nav-wrap" style="visibility: hidden">
        <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
            <div class="sub-menu__list-wrap">
                <ul class="sub-menu__list" style="display: block;">
                    <we:navigationWrite navigationname="untermenue"/>
                </ul>
            </div>
        </nav>
    </div>
    Display More

    Ich bin irgendwie ratlos. Gib es noch eine Idee, wie ich die Navigation funktionsfähig machen kann?
    Bin für jeden Hinweis dankbar.


    Viele Grüße

    Silvia

  • WBTMagnum
    Student
    Reactions Received
    14
    Posts
    163
    • September 27, 2023 at 12:22 AM
    • #6

    Hallo Silvia,

    Jetzt sehe ich erst was du da machst. Da wird ja die selbe Navigation mit unterschiedlicher Bezeichnung zwei mal ausgegeben. Da kannst du denke ich wie folgt in einer Navigation zusammenfassen:

    HTML
    <we:navigation navigationname="mainNav" parentid="204"/>
    
    <we:navigationEntry type="folder" navigationname="mainNav"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="mainNav"></we:navigationEntry>
    
    <!--1. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="mainNav" level="1" comment="falls es das ganze Element nicht braucht, kann man das ggf. auch leer lassen">
        <div class="sub-menu__bar">
            <button class="sub-menu__topic-button" aria-label="Öffne Untermenü von <we:navigationField attributes="title" />">
                <span>
                    <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                </span>
            </button>
        </div>
    </we:navigationEntry>
    <we:navigationEntry type="folder" navigationname="mainNav" level="1" current="true">
        <div class="sub-menu__bar">
            <button class="sub-menu__topic-button" aria-label="Öffne Untermenü von <we:navigationField attributes="title" />">
                <span>
                    <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                    <we:navigationField name="text" />
                </span>
            </button>
        </div>
        <we:ifHasEntries>
            <div class="sub-menu__nav-wrap" style="visibility: hidden">
                <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
                    <div class="sub-menu__list-wrap">
                        <ul class="sub-menu__list" style="display: block;">
                          <we:navigationEntries comment="um level 2 auszugeben" />
                        </ul>
                    </div>
                </nav>
            </div>
        </we:ifHasEntries>
    </we:navigationEntry>
    <!--Ende 1. Navigationsebene-->
    
    <!--2. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
        </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="true">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
    
            <we:ifHasEntries>
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück
                        </button>
                    </li>
    
                    <li class="sub-menu__item visible" style="display: block;">
                        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: block;" class="sub-menu__link">
                                <span class="sub-menu__overview-label">Übersichtsseite</span>
                                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
                        </button>
                    </li>
                    <we:navigationEntries comment="um level 3 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    <!--Ende 2. Navigationsebene-->
    
    <!--3. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="mainNav" level="3" current="false">
        <li class="sub-menu__item visible" style="display: block;">
            <a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
            </a>
        </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="3" current="true">
        <li class="sub-menu__item visible" style="display: block;">
            <a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
            </a>
    
            <we:ifHasEntries comment="4. ebene, falls vorgesehen">
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück
                        </button>
                    </li>
    
                    <li class="sub-menu__item visible" style="display: block;">
                        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: block;" class="sub-menu__link">
                                <span class="sub-menu__overview-label">Übersichtsseite</span>
                                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
                        </button>
                    </li>
                    <we:navigationEntries comment="um level 4 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    <!--Ende 3. Navigationsebene-->
    
    <we:navigationWrite navigationname="mainNav"/>
    Display More

    Ich habe das jetzt nur schnell zusammengestückelt. Um exakt den benötigten Code zu erstellen, wirst du vermutlich noch etwas nachbessern müssen.


    HTH,

    Sascha

  • SiBl
    Beginner
    Posts
    22
    • September 28, 2023 at 5:07 PM
    • #7

    Hallo Sascha,

    durch Deinen Hinweis bin ich einen kleinen Schritt weiter - vielen Dank! Das Zusammenfassen der Navigationen hat schon mal etwas gebracht.

    Jetzt bin ich soweit, dass Level 2 bei Klick auf den aktiven Punkt bei Level 1 angezeigt wird. Man kann auch auf den Link klicken und gelangt zu dem Bereich, wo dann eigentlich die Links von Level 3 gezeigt werden müssten. Leider werden diese Links aber nicht ausgegeben. Im Screenshot sieht man, dass der angezeigte Bereich in <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false"> liegt.

    Hier noch ein paar Hinweise zu Deinem Vorschlag:

    • Bei Level 1 musste ich den ersten Teil weglassen, denn sonst hätte sich das Klappmenü gar nicht geöffnet und auch der Link-Text wurde nicht angezeigt.
    • Bei Level 2 musste ich im Bereich level="2" current="false" noch den gesamten Code von <we:ifHasEntries> hinzufügen, denn sonst wurde nur eine leere weiße Fläche angezeigt
    • Die Navigation ist bei mir mit drei Ebenen aufgebaut. Die ersten zwei Ebenen sind als Ordner angelegt und die der dritten Ebene als Einträge. Deshalb habe ich im Code in der 3. Navigationsebene type="item" gewählt und <we:ifHasEntries> weggelassen.

    Hier der momentane Code:

    Code
    <we:navigation navigationname="mainNav" parentid="204"/>
    
    <we:navigationEntry type="folder" navigationname="mainNav"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="mainNav"></we:navigationEntry>
    
    <!--1. Navigationsebene-->
    
    <we:navigationEntry type="folder" navigationname="mainNav" current="true">
        <div class="sub-menu__bar">
            <button class="sub-menu__topic-button" aria-label="Öffne Untermenü von <we:navigationField attributes="title" />">
                <span>
                    <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                    <we:navigationField name="text" />
                </span>
            </button>
        </div>
        <we:ifHasEntries>
            <div class="sub-menu__nav-wrap" style="visibility: hidden">
                <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
                    <div class="sub-menu__list-wrap">
                        <ul class="sub-menu__list" style="display: block;">
                          <we:navigationEntries comment="um level 2 auszugeben" />
                        </ul>
                    </div>
                </nav>
            </div>
        </we:ifHasEntries>
    </we:navigationEntry>
    <!--Ende 1. Navigationsebene-->
    
    <!--2. Navigationsebene-->
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
                <we:ifHasEntries>
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück (Bereich level="2" current="false")
                        </button>
                    </li>
    
                    <li class="sub-menu__item" style="display: none">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
                                <span class="sub-menu__overview-label">Übersichtsseite</span>
                                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
                       
                    </li>
                    <we:navigationEntries comment="um level 3 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="true">
        <li class="sub-menu__item visible" style="display: block;">
            <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
                <we:navigationField name="text" />
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
            </button>
    
            <we:ifHasEntries>
                <ul class="sub-menu__list" style="display: none">
                    <li class="sub-menu__item" style="display: none">
                        <button class="sub-menu__button sub-menu__button--back">
                            <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                            zurück
                        </button>
                    </li>
    
                     <li class="sub-menu__item" style="display: none">
                            <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
                                <span class="sub-menu__overview-label">Übersichtsseite</span>
                                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
                            </a>
                    </li>
                    <we:navigationEntries comment="um level 3 auszugeben" />
                </ul>
            </we:ifHasEntries>
        </li>
    </we:navigationEntry>
    <!--Ende 2. Navigationsebene-->
    
    <!--3. Navigationsebene-->
    <we:navigationEntry type="item" navigationname="mainNav" level="3" current="true" >
        <li class="sub-menu__item visible" style="display: block;">
            <a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
            </a>
        </li>
    </we:navigationEntry>
    <!--Ende 3. Navigationsebene-->
    
    
    <we:navigationWrite navigationname="mainNav"/>
    Display More

    Und dann stehe ich noch vor einem weiteren Problem: Denn auf der Musterseite https://kv-muster.drk-intern.de sieht man, dass in dem Balken, der das Klappmenü aufklappt bei der Darstellung einer Einzelseite (Level 3) der Navigationseintrag dieser Seite steht.

    Bei mir steht bei einer Level 3-Seite immer der Eintrag von Level 1 - was eigentlich logisch ist. Nur wie schaffe ich es, dass dann auf der Einzelseite der Navi-Eintrag der Seite steht?

    Sorry, dass ich nochmal frage, aber ich komme nicht dahinter, warum die Level 3-Einträge gar nicht angezeigt werden.

    Vielen Dank für Deine Hilfe!

    Grüße

    Silvia

  • WBTMagnum
    Student
    Reactions Received
    14
    Posts
    163
    • September 28, 2023 at 9:45 PM
    • #8

    Hallo Silvia,

    In deinem Code ist nur level="3" current="true" definiert, aber kein current="false". Demnach wird in der dritten Navigationsebene auch nichts ausgegeben.

    HTH,

    Sascha

  • SiBl
    Beginner
    Posts
    22
    • February 8, 2024 at 8:04 PM
    • #9

    Hallo Sascha,

    jetzt hat's eine Weile gedauert, bis ich hier weitermachen konnte.
    Vielen Dank für Deinen Tipp. Damit bin ich einen großen Schritt weiter gekommen.
    Allerdings bringt mich die Navigation trotzdem noch zum Verzweifeln.
    Es ist nun so, dass sie wunderbar funktioniert, solange ich Seiten auf Level 1 öffne.
    Wenn ich eine Übersichtsseite von Level 2 öffne oder eine Seite von Level 3, dann steht oben (im grün markierten Rahmen) immer der Navigationspunkt "Angebote".

    Hier ein Bild zur Verdeutlichung, wie es sein sollte:

    "Wohnen und Betreuung" ist der Folder von Level 2. Klappt man die Navi dann auf, sieht man die Unterpunkte aus Level 3 dieses Folders. Öffnet man dann eine Seite der dritten Ebene, ändert sich der "Hauptnavigationspunkt" in den Item-Namen und wenn man dann wieder die Navi aufklappt, sieht man wieder die Unterpunkte von Level 3.

    Hier auch ein Bild dazu

    Ich habe nun schon versucht, mit verschiedenen Navigations-Templates zu arbeiten und beispielsweise für die Übersichtsseiten von Level 2 die Navigation erst ab Level 2 anzeigen zu lassen, dann wird aber gar nichts mehr dargestellt.

    Hier noch den jetzigen Stand der Navigation:

    Code
    <we:navigation navigationname="mainNav" parentid="204"/>
    
    <we:navigationEntry type="folder" navigationname="mainNav"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="mainNav"></we:navigationEntry>
    
    <!--1. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="mainNav" current="false" ></we:navigationEntry>
    <we:navigationEntry type="folder" navigationname="mainNav" current="true" >
    	<div class="sub-menu__bar">
    		<button class="sub-menu__topic-button" aria-label="Öffne Untermenü">
    			<span>
    				<svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
    				<we:navigationField name="text" />
    			</span>
    		</button>
    	</div>
    	<we:ifHasEntries>
    		<div class="sub-menu__nav-wrap" style="visibility: hidden">
    			<nav class="sub-menu__nav" aria-label="Untermenü">
    				<div class="sub-menu__list-wrap">
    					<ul class="sub-menu__list" style="display: block;">
    						<we:navigationEntries comment="um level 2 auszugeben" />
    					</ul>
    				</div>
    			</nav>
    		</div>
    	</we:ifHasEntries>
    </we:navigationEntry>
    
    <!--Ende 1. Navigationsebene-->
    
    <!--2. Navigationsebene-->
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false">
    	<li class="sub-menu__item visible" style="display: block;">
    		<button class="sub-menu__button sub-menu__button--next" style="display: flex;">
    			<we:navigationField name="text" />
    			<svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
    		</button>
    		<we:ifHasEntries>
    			<ul class="sub-menu__list" style="display: none">
    				<li class="sub-menu__item" style="display: none">
    					<button class="sub-menu__button sub-menu__button--back">
    						<svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
    						zurück
    					</button>
    				</li>
    
    				<li class="sub-menu__item" style="display: none">
    					<a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
    					<span class="sub-menu__overview-label">Übersichtsseite</span>
    					<span class="sub-menu__link-label"><we:navigationField name="text" /></span>
    				</a>
    
    			</li>
    		<we:navigationEntries comment="um level 3 auszugeben" />
    	</ul>
    </we:ifHasEntries>
    </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="true">
    	<li class="sub-menu__item visible" style="display: block;">
    		<button class="sub-menu__button sub-menu__button--next" style="display: flex;">
    			<we:navigationField name="text" />
    			<svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
    		</button>
    
    		<we:ifHasEntries>
    			<ul class="sub-menu__list" style="display: none">
    				<li class="sub-menu__item" style="display: none">
    					<button class="sub-menu__button sub-menu__button--back">
    						<svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
    						zurück
    					</button>
    				</li>
    
    				<li class="sub-menu__item" style="display: none">
    					<a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
    					<span class="sub-menu__overview-label">Übersichtsseite</span>
    					<span class="sub-menu__link-label"><we:navigationField name="text" /></span>
    				</a>
    			</li>
    		<we:navigationEntries comment="um level 3 auszugeben" />
    	</ul>
    </we:ifHasEntries>
    </li>
    </we:navigationEntry>
    <!--Ende 2. Navigationsebene-->
    
    <!--3. Navigationsebene-->
    <we:navigationEntry type="item" navigationname="mainNav" level="3" current="false">
    	<li class="sub-menu__item visible" style="display: block;">
    		<a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
    			<span class="sub-menu__link-label"><we:navigationField name="text" /></span>
    		</a>
    	</li>
    </we:navigationEntry>
    
    <we:navigationEntry type="item" navigationname="mainNav" level="3" current="true" >
    	<li class="sub-menu__item visible" style="display: block;">
    		<a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
    			<span class="sub-menu__link-label"><we:navigationField name="text" /></span>
    		</a>
    	</li>
    </we:navigationEntry>
    <!--Ende 3. Navigationsebene-->
    
    <we:navigationWrite navigationname="mainNav"/>
    Display More

    Wie erwähnt, kann man die Navigation, wie sie funktionieren soll, hier ausprobieren: https://kv-muster.drk-intern.de/

    Ich würde mich über weitere Tipps sehr freuen.

    LG,
    Silvia

    Images

    • seite_level2.jpg
      • 281.6 kB
      • 1,489 × 998
      • 140
  • WBTMagnum
    Student
    Reactions Received
    14
    Posts
    163
    • February 10, 2024 at 11:06 PM
    • #10

    Hallo Silvia,

    Wenn ich das richtig verstehe, dann soll in .sub-menu__topic-button immer der aktive Navigationspunkt angezeigt werden. Falls dem so ist, könntest du folgendes Konstrukt probieren (ungetestet):

    PHP
    <we:navigation navigationname="mainNav" parentid="204"/>
    
    <we:navigationEntry type="folder" navigationname="mainNav"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="mainNav"></we:navigationEntry>
    
    <!--1. Navigationsebene-->
    <we:navigationEntry type="folder" navigationname="mainNav" current="false" ></we:navigationEntry>
    <we:navigationEntry type="folder" navigationname="mainNav" current="true" >
      <we:navigationField name="text" to="global" nameto="activeNavigationFolder"/>
      <we:ifHasEntries>
        <div class="sub-menu__nav-wrap" style="visibility: hidden">
          <nav class="sub-menu__nav" aria-label="Untermenü">
            <div class="sub-menu__list-wrap">
              <ul class="sub-menu__list" style="display: block;">
                <we:navigationEntries comment="um level 2 auszugeben" />
              </ul>
            </div>
          </nav>
        </div>
      </we:ifHasEntries>
    </we:navigationEntry>
    
    <!--Ende 1. Navigationsebene-->
    
    <!--2. Navigationsebene-->
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false">
      <li class="sub-menu__item visible" style="display: block;">
        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
          <we:navigationField name="text" />
          <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
        </button>
        <we:ifHasEntries>
          <ul class="sub-menu__list" style="display: none">
            <li class="sub-menu__item" style="display: none">
              <button class="sub-menu__button sub-menu__button--back">
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                zurück
              </button>
            </li>
    
            <li class="sub-menu__item" style="display: none">
              <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
                <span class="sub-menu__overview-label">Übersichtsseite</span>
                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
              </a>
    
              </li>
            <we:navigationEntries comment="um level 3 auszugeben" />
          </ul>
        </we:ifHasEntries>
      </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="true">
      <we:navigationField name="text" to="global" nameto="activeNavigationFolder"/>
      <li class="sub-menu__item visible" style="display: block;">
        <button class="sub-menu__button sub-menu__button--next" style="display: flex;">
          <we:navigationField name="text" />
          <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
        </button>
    
        <we:ifHasEntries>
          <ul class="sub-menu__list" style="display: none">
            <li class="sub-menu__item" style="display: none">
              <button class="sub-menu__button sub-menu__button--back">
                <svg width="10" height="7" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
                zurück
              </button>
            </li>
    
            <li class="sub-menu__item" style="display: none">
              <a href="<we:navigationField name="href" />"<we:navigationField name="text" /> style="display: none" class="sub-menu__link">
                <span class="sub-menu__overview-label">Übersichtsseite</span>
                <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
              </a>
            </li>
            <we:navigationEntries comment="um level 3 auszugeben" />
          </ul>
        </we:ifHasEntries>
      </li>
    </we:navigationEntry>
    <!--Ende 2. Navigationsebene-->
    
    <!--3. Navigationsebene-->
    <we:navigationEntry type="item" navigationname="mainNav" level="3" current="false">
      <li class="sub-menu__item visible" style="display: block;">
        <a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
          <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
        </a>
      </li>
    </we:navigationEntry>
    
    <we:navigationEntry type="item" navigationname="mainNav" level="3" current="true" >
      <we:navigationField name="text" to="global" nameto="activeNavigationFolder"/>
      <li class="sub-menu__item visible" style="display: block;">
        <a style="display: block;" class="sub-menu__link" href="<we:navigationField name="href"/>">
          <span class="sub-menu__link-label"><we:navigationField name="text" /></span>
        </a>
      </li>
    </we:navigationEntry>
    <!--Ende 3. Navigationsebene-->
    
    <we:navigationWrite navigationname="mainNav" to="global" nameto="mainNavigation"/>
    <div class="sub-menu__bar">
      <button class="sub-menu__topic-button" aria-label="Öffne Untermenü">
        <span>
          <svg width="12" height="12" aria-hidden="true"><use href="/we_images/svg/general-sprite.svg#chevron"></use></svg>
          <we:var type="global" name="activeNavigationFolder"/>
        </span>
      </button>
    </div>
    <we:var type="global" name="mainNavigation"/>
    Display More

    Wenn das nicht hilft, wäre es wohl das Beste die Erstellung in zwei Navigationen aufzuteilen.

    HTH,
    Sascha

  • SiBl
    Beginner
    Posts
    22
    • February 15, 2024 at 7:02 PM
    • #11

    Hallo Sascha,

    super, das ist eine geniale Lösung. So hat es geklappt. Ich habe nun aber tatsächlich für jedes Level ein separates Navi-Template gebaut und jetzt funktioniert alles.
    Ganz herzlichen Dank für die tolle Unterstützung!

    LG

    Silvia

  • WBTMagnum
    Student
    Reactions Received
    14
    Posts
    163
    • February 15, 2024 at 9:55 PM
    • #12

    Super! Freut mich, dass es nun geklappt hat.


    LG,s

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login

Donations

200.00 EUR

Donate now
  1. Privacy Policy
  2. Legal Notice
Powered by WoltLab Suite™