Questions & Answers

[ceggert]

Hallo zusammen,

wir möchten eine Navigation aufbauen (s.Sreenshot). Ab der dritten Ebene sollen alle Navigationspunkte der Ebene drei auf 2 Spalten verteilt werden im Rhytmus

1    2

3    4

5   

Unsere Navigationsfunktion sieht wie folgt aus:

<CMS_FUNCTION name="Navigation" resultname="mainNavigation">

        <CMS_PARAM name="expansionVisibility" value="all"/>

        <CMS_VALUE_PARAM name="root" value='"pagefolder:"+ss_global_nav_root' />

        <CMS_PARAM name="wholePathSelected" value="1"/>

        <CMS_ARRAY_PARAM name="beginHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first begin -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[<!-- second begin --><li>]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[<!-- third begin --><ul class="grid-50"><li>]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

        <CMS_ARRAY_PARAM name="innerBeginHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first innerbegin --><div class="popup"><ul>]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[<!-- second innerbegin --><div class="third-level"><div class="grid">]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[<!-- third innerbegin --><ul class="fourth-level">]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

        <CMS_ARRAY_PARAM name="unselectedHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[<li class="main-1a first"><a href="$CMS_REF(#nav.ref)$"><span>$CMS_VALUE(#nav.label.convert2)$</span></a>]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><!-- second unselected -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[<a href="$CMS_REF(#nav.ref)$" class="icon-link-button-Pfeil"><span>$CMS_VALUE(#nav.label.convert2)$</span></a><!-- third unselected -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="3"><![CDATA[<li><a href="$CMS_REF(#nav.ref)$" class="icon-link-button-Pfeil"><span>$CMS_VALUE(#nav.label.convert2)$</span></a></li><!-- fourth unselected -->]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

        <CMS_ARRAY_PARAM name="selectedHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[<li class="main-1a first current"><a href="$CMS_REF(#nav.ref)$"><span>$CMS_VALUE(#nav.label.convert2)$</span></a>]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><!-- second selected -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[<a href="$CMS_REF(#nav.ref)$" class="icon-link-button-Pfeil"><span>$CMS_VALUE(#nav.label.convert2)$</span></a><!-- third selected -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="3"><![CDATA[<li><a href="$CMS_REF(#nav.ref)$" class="icon-link-button-Pfeil"><span>$CMS_VALUE(#nav.label.convert2)$</span></a></li><!-- fourth selected -->]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

        <CMS_ARRAY_PARAM name="innerEndHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[</ul></div><!-- first innerEnd -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[</div></div><!-- second innerEnd -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[</ul><!-- third innerEnd -->]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

        <CMS_ARRAY_PARAM name="endHTML">

            <CMS_ARRAY_ELEMENT index="0"><![CDATA[</li><!-- first end -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="1"><![CDATA[</li><!-- second end -->]]></CMS_ARRAY_ELEMENT>

            <CMS_ARRAY_ELEMENT index="2"><![CDATA[</li></ul><!-- third end -->]]></CMS_ARRAY_ELEMENT>

        </CMS_ARRAY_PARAM>

</CMS_FUNCTION>

Das Problem ist nun, dass wir nur 2x das <ul class="grid-50"> erzeugen dürfen, um dann die Menüpunkte auf die ul's aufzuteilen.

Da leider das Rendern der ul Liste schon abgeschlosen zu sein scheint, bekommen wir nachträglich nicht mehr die Listenelemente  auf die Listen aufgeteilt

Hat hier jemand noch eine Idee?

Hier das HTML das sieht soweit schon ganz gut aus und im Moment werden über ein clear die Elemente auch richtig quasi über das CSS angeordnet allerdings entsteht dann auch folglich eine unschöne Lücke wenn ein Menüpunkt der 3Ebene noch eine 4te Unterebene bekommt (s.Screenshot).

viele Grüße,

Christopher Eggert

[ceggert]

Sorry habe das HTML vergessen anzuhängen:

<div class="third-level">

    <div class="grid">

    <!-- third begin -->

    <ul style="clear: both;" class="grid-50">

        <li>

            <!-- third unselected begin --><a class="icon-link-button-Pfeil" href="#"><span>Eintrag1</span></a><!-- third unselected end --><!-- third innerbegin -->

            <ul class="fourth-level">

               <!-- fourth unselected begin -->

               <li><a class="icon-link-button-Pfeil" href="#"><span>unter Eintrag 1</span></a></li>

               <!-- fourth unselected end -->

            </ul>

            <!-- third innerEnd -->

         </li>

      </ul>

      <!-- third end --><!-- third begin -->

      <ul class="grid-50">

         <li>

            <!-- third unselected begin --><a class="icon-link-button-Pfeil" href="#"><span>Eintrag 2</span></a><!-- third unselected end -->

         </li>

      </ul>

      <!-- third end --><!-- third begin -->

      <ul style="clear: both;" class="grid-50">

         <li>

            <!-- third unselected begin --><a class="icon-link-button-Pfeil" href="#"><span>Eintrag 3</span></a><!-- third unselected end -->

         </li>

      </ul>

      <!-- third end --><!-- third begin -->

      <ul class="grid-50">

         <li>

            <!-- third unselected begin --><a class="icon-link-button-Pfeil" href="#"><span>Eintrag 4</span></a><!-- third unselected end -->

         </li>

      </ul>

      <!-- third end --><!-- third begin -->

      <ul style="clear: both;" class="grid-50">

         <li>

            <!-- third unselected begin --><a class="icon-link-button-Pfeil" href="#"><span>Eintrag 5</span></a><!-- third unselected end -->

         </li>

      </ul>

      <!-- third end -->

   </div>

</div>

viele Grüße und danke,

Christopher Eggert

[lbernau · Accepted solution]

Nach etlichem "Brainfuck" - die Lösung,... happy happy magic 😉

<CMS_HEADER>

          <CMS_FUNCTION name="Navigation" resultname="mainNavigation">

                    <CMS_PARAM name="expansionVisibility" value="all"/>

                    <CMS_VALUE_PARAM name="root" value='"pagefolder:"+ss_global_nav_root' />

                    <CMS_PARAM name="wholePathSelected" value="1"/>

                    <CMS_PARAM name="suppressEmptyFolders" value="1"/>

                    <CMS_ARRAY_PARAM name="beginHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first begin -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1"><![CDATA[<!-- second begin --><li>]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                                        <![CDATA[

                                                  $-- evaluate if this 'level 3'-entry belongs to 1st (odd) or 2nd (even) column --$

                                                  $CMS_IF((#nav.levelPos + 1) % 2 == 0)$

                                                            $-- even indices comes to column two --$

                                                            $CMS_SET(column, 2)$

                                                  $CMS_ELSE$

                                                            $-- odd indices comes to column one --$

                                                            $CMS_SET(column, 1)$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

                    <CMS_ARRAY_PARAM name="innerBeginHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first innerbegin --><div class="popup"><ul>]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1">

                                        <![CDATA[

                                                  <!-- second innerbegin -->

                                                  <div class="third-level">

                                                            <div class="grid">

                                                            $-- initialize html-snippets for 3rd-level navigation columns --$

                                                            $CMS_SET(firstColumn, "<!-- third begin --><ul class=\"grid-50\"><li>")$

                                                            $CMS_SET(secondColumn, "<!-- third begin --><ul class=\"grid-50\"><li>")$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                                        <![CDATA[

                                                  $CMS_IF(column == 1)$

                                                            $-- begin inner html for fourth level in the first column --$

                                                            $CMS_SET(firstColumn, firstColumn + "<!-- third innerbegin --><ul class=\"fourth-level\">")$

                                                  $CMS_ELSE$

                                                            $-- begin inner html for fourth level in the second column --$

                                                            $CMS_SET(secondColumn, secondColumn + "<!-- third innerbegin --><ul class=\"fourth-level\">")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

                    <CMS_ARRAY_PARAM name="unselectedHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first unselected begin --><li class="main-1a first"><a href="$CMS_REF(#nav.ref)$"><span>$CMS_VALUE(#nav.label.convert2)$</span></a><!-- first unselected end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1"><![CDATA[<!-- second unselected begin --><a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><!-- second unselected end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                                        <![CDATA[

                                                  $-- for some reason we need to store the reference url first, otherwise everything fucks up --$

                                                  $CMS_SET(_ref, ref(#nav.ref).url)$

                                                  $-- render unselected entry for third-level navigation--$

                                                  $CMS_IF(column == 1)$

                                                            $CMS_SET(firstColumn, firstColumn + "<!-- third unselected begin --><a href=\""+ _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a><!-- third unselected end -->")$

                                                  $CMS_ELSE$

                                                            $CMS_SET(secondColumn, secondColumn + "<!-- third unselected begin --><a href=\""+ _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a><!-- third unselected end -->")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="3">

                                        <![CDATA[

                                                  $-- for some reason we need to store the reference url first, otherwise everything fucks up --$

                                                  $CMS_SET(_ref, ref(#nav.ref).url)$

                                                  $-- render unselected entry for fourth-level navigation--$

                                                  $CMS_IF(column == 1)$

                                                            $CMS_SET(firstColumn, firstColumn + "<!-- fourth unselected begin --><li><a href=\""+ _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a></li><!-- fourth unselected end -->")$

                                                  $CMS_ELSE$

                                                            $CMS_SET(secondColumn, secondColumn + "<!-- fourth unselected begin --><li><a href=\""+ _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a></li><!-- fourth unselected end -->")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

                    <CMS_ARRAY_PARAM name="selectedHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[<!-- first selected begin --><li class="main-1a first current"><a href="$CMS_REF(#nav.ref)$"><span>$CMS_VALUE(#nav.label.convert2)$</span></a><!-- first selected end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1"><![CDATA[<!-- second selected begin --><a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><!-- second selected end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                                        <![CDATA[

                                                  $-- for some reason we need to store the reference url first, otherwise everything fucks up --$

                                                  $CMS_SET(_ref, ref(#nav.ref).url)$

                                                  $-- render selected entry for third-level navigation--$

                                                  $CMS_IF(column == 1)$

                                                            $CMS_SET(firstColumn, firstColumn + "<!-- third selected begin --><a href=\""+ _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a><!-- third selected end -->")$

                                                  $CMS_ELSE$

                                                            $CMS_SET(secondColumn, secondColumn + "<!-- third selected begin --><a href=\"" + _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a><!-- third selected end -->")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="3">

                                        <![CDATA[

                                                  $-- for some reason we need to store the reference url first, otherwise everything fucks up --$

                                                  $CMS_SET(_ref, ref(#nav.ref).url)$

                                                  $-- render selected entry for fourth-level navigation--$

                                                  $CMS_IF(column == 1)$

                                                            $CMS_SET(firstColumn, firstColumn + "<!-- fourth selected begin --><li><a href=\"" + _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a></li><!-- fourth selected end -->")$

                                                  $CMS_ELSE$

                                                            $CMS_SET(secondColumn, secondColumn + "<!-- fourth selected begin --><li><a href=\"" + _ref + "\" class=\"icon-link-button-Pfeil\"><span>" + #nav.label.convert2 + "</span></a></li><!-- fourth selected end -->")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

                    <CMS_ARRAY_PARAM name="innerEndHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[</ul></div><!-- first innerEnd -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1">

                                        <![CDATA[

                                                  $-- render firstColumn hmtl snippet --$

                                                  $CMS_VALUE(firstColumn)$

                                                  </li></ul>$-- close first column html --$

                                                  <!-- third first column end -->

                                                  $-- render secondColumn hmtl snippet --$

                                                  $CMS_VALUE(secondColumn)$

                                                  </li></ul>$-- close second column html --$

                                                  <!-- third second column end -->

                                                  </div></div>$-- close second second level html --$

                                                  <!-- second innerEnd -->

                                                  $CMS_SET(column, 1)$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                                        <![CDATA[

                                                  $-- close third level inner html --$

                                                  $CMS_IF(column == 1)$

                                                            $CMS_SET(firstColumn, firstColumn + "</ul><!-- third innerEnd -->")$

                                                  $CMS_ELSE$

                                                            $CMS_SET(secondColumn, secondColumn + "</ul><!-- third innerEnd -->")$

                                                  $CMS_END_IF$

                                        ]]>

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

                    <CMS_ARRAY_PARAM name="endHTML">

                              <CMS_ARRAY_ELEMENT index="0"><![CDATA[</li><!-- first end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="1"><![CDATA[</li><!-- second end -->]]></CMS_ARRAY_ELEMENT>

                              <CMS_ARRAY_ELEMENT index="2">

                              </CMS_ARRAY_ELEMENT>

                    </CMS_ARRAY_PARAM>

          </CMS_FUNCTION>

</CMS_HEADER>

$-- initialize column variable, let's start with first column 😉 --$

$CMS_SET(column, 1)$

<ul class="nav">

          $-- render the magic navigation --$

          $CMS_VALUE(mainNavigation)$

</ul>

Grüße,

Lars