how to do ?
Für unsere für dieses Beispiel gewählte Navigation haben wir ja sowohl den HTML-Code erhalten, wie auch eine CSS und auch noch einen JS-Eintrag...
webchaot
Ich will jetzt hier nicht jede einzelne Codezeile analysieren und sämtliche Details des Beispiels beschreiben, sondern mich lediglich um die Ausgangsfrage des Forumsbeitrags, nämlich die Navigation kümmern...
...und die Navigation findet sich in der linken Spalte (also im HTML-Teil) und ist dieser Abschnitt daraus..
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
<li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
<li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
</ul>
Zuerst einmal löschen wir (hier im Beispiel des Designs Riga) die Siquando-Navigation, also diesen Codeteil in der navigation.ccml von <nav class="sqrnav"> bis und mit </nav> könnt Ihr entfernen...
<nav class="sqrnav">
<a href="#" class="sqrnavshow"><cc:print value="&site.ressource.opennav"></a>
<a href="#" class="sqrnavhide"><cc:print value="&site.ressource.closenav"></a>
<ul>
<li class="sqrnavhome"><a href="<cc:print value="&home.url">"><span><cc:print value="&site.ressource.home"></span></a></li>
<cc:if cond="&site.ftsfile">
<li class="sqrnavsearch"><a href="#"><span><cc:print value="&site.ressource.search"></span></a>
<ul>
<li>
<form action="<cc:print value="&site.ftsfile">">
<input type="text" name="criteria" id="searchcriteria" />
<cc:if cond="&site.ftsajax and &site.properties.design.ftsajax">
<div id="searchajax"></div>
</cc:if>
</form>
</li>
</ul>
</li>
</cc:if>
<cc:if cond="&topic.isshop">
<li class="sqrnavshop"><a id="sqrcartindicator" href="<cc:print value="&site.basketfile">"><span><cc:print value="&site.ressource.shopping"></span></a>
<ul>
<li><a href="<cc:print value="&site.basketfile">"><span><cc:print value="&site.ressource.showbasket"> (<cc:include src="basket_quantity.ccml" common="1"> <cc:print value="&site.ressource.cartitem">)</span></a></li>
<cc:if cond="&site.showuseraccount"><li><a <cc:include src="link_account.ccml" common="1">><span><cc:print value="&site.ressource.shop.user"></span></a></li></cc:if>
<cc:if cond="&site.showmemo"><li><a href="<cc:print value="&site.basketfile">#memo"><span><cc:print value="&site.ressource.memoshow"></span></a></li></cc:if>
<li><a <cc:include src="link_checkout.ccml" common="1">><span><cc:print value="&site.ressource.basketcheckout"></span></a></li>
</ul>
</li>
</cc:if>
<cc:loop type="maintopic" obj="mymaintopic">
<li<cc:if cond="&mymaintopic.ispagemaintopic"> class="sqrnavactive"</cc:if>><a href="<cc:print value="&mymaintopic.url">"><span><cc:print value="&mymaintopic.caption"></span></a>
<cc:if cond="&mymaintopic.topiccount gt 0">
<ul>
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number">
<li<cc:if cond="&mytopic.ispagetopic"> class="sqrnavactive"</cc:if>><a href="<cc:print value="&mytopic.url">"><span><cc:print value="&mytopic.caption"></span></a>
<cc:if cond="&mytopic.subtopiccount gt 0">
<ul>
<cc:loop type="subtopic" obj="mysubtopic" maintopic="&mymaintopic.number" topic="&mytopic.number">
<li<cc:if cond="&mysubtopic.ispagesubtopic"> class="sqrnavactive"</cc:if>><a href="<cc:print value="&mysubtopic.url">"><span><cc:print value="&mysubtopic.caption"></span></a></li>
</cc:loop>
</ul>
</cc:if>
</li>
</cc:loop>
</ul>
</cc:if>
</li>
</cc:loop>
</ul>
</nav>
Zuerst kommt unser "Toggle" (oder eben auch "Hamburger") und den können wir eigentlich 1:1 übernehmen, sofern wir "Font Awesome" in unserem Design bereits verwenden (ansonsten hier zu finden )...
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
Nachdem wir unseren "Toggle" jetzt haben, können wir auch die "unordered list" eröffnen... (also rot markiert hinzufügen...)
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
Danach kommen in unserem erhaltenen Beispielcode bereits die drei vorhandenen Navigationspunkte, also im Beispielcode dies...
<li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
<li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
<li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
Dabei ist der erste Navigationspunkt quasi als "Startseite" zu betrachten und die beiden anderen als nachfolgende Seiten.
Und jetzt wollen wir dies ja nicht händisch im Code eingeben, sondern wir wollen, dass uns Siquando diese Navigationsstruktur erzeugt.
Somit beginnen wir mit der Startseite und fügen dem Code wiederum rot markiert hinzu....
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a></li>
In unserem Beispielcode war die Verlinkung ja lediglich mit einer Sprungmarke an den Seitenanfang (href="#") ausgestattet...
...wir wollen aber eine "richtige Verlinkung", die uns Siquando erzeugen soll und schauen uns deshalb die letzte hinzugefügte Zeile nochmals etwas genauer an...
Mit dem rot markierten CCML-Code lassen wir uns die URL der Startseite verlinken und mit dem grün markierten CCML-Code lassen wir uns aus den Sprachressourcen den hinterlegten Ausdruck für die Startseite ausgeben.
Und jetzt kümmern wir uns noch um die nachfolgenden Seiten...
Selbstverständlich wollen wir auch diese nicht händisch eingeben, sondern Siquando soll uns die natürlich ebenfalls erzeugen... 
Somit programmieren wir eine "Schleife" (also einen "loop") die für jede Seite unserer obersten Navigationsebene (maintopic) durchläuft und uns so die weiteren Navigationspunkten liefern soll, also wieder rot hinzufügen...
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a></li>
<cc:loop type="maintopic" obj="mymaintopic">
<li><a href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a></li>
</cc:loop>
<cc:loop type="maintopic" obj="mymaintopic">
<li><a href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a></li>
</cc:loop>
Wie schon vorher lassen wir uns mit dem rot markierten CCML-Code die URL der jeweiligen Maintopic-Seite verlinken und mit dem grün markierten CCML-Code lassen wir uns die Überschrift der jeweiligen Maintopic-Seite ausgeben.
Mit dem orange markierten CCML-Code eröffnen wir bzw. schliessen wir die Programmierung der Schleife.
Da wir in diesem Beispiel ja nur eine Navigation für Maintopic-Seiten machen wollten, können wir nun wie rot markiert die "unordered list" wieder schliessen und sind mit unserer Navigation eigentlich bereits fertig...
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a></li>
<cc:loop type="maintopic" obj="mymaintopic">
<li><a href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a></li>
</cc:loop>
</ul>
Achtung!
Wenn wir aber z.B. eine "vollständige Navigation", also für alle drei Navigationsebenen machen wollen, dann müssen wir nicht nur eine Schleifenabfrage für die Maintopic-Seiten gestalten, sondern auch noch jeweils für die Topic- und Subtopic-Seiten..!
Zum Abschluss kann man wenn man will noch etwas für's "make up" unserer Navigation tun...
Wer will kann dazu wie in dem vorhandenen Beispiel "Font-Awesome
" verwenden und somit der Navigation auch noch entsprechende Symbole spendieren...
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="<cc:print value="&home.url">"><i class="icon fa fa-keyboard-o fa-2x"></i><cc:print value="&site.ressource.home"></a></li>
<cc:loop type="maintopic" obj="mymaintopic">
<li><a href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a></li>
</cc:loop>
</ul>
Für die anderen Navigationspunkte kann man sich z.B. eine erweiterte Eigenschaft schreiben, mit der man dann bequem für jede Seite ein Fontawesome-Icon festlegen kann und das dann in die Navigation übernehmen kann, wie nachfolgend wieder rot markiert...
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="<cc:print value="&home.url">"><i class="icon fa fa-keyboard-o fa-2x"></i><cc:print value="&site.ressource.home"></a></li>
<cc:loop type="maintopic" obj="mymaintopic">
<li><a href="<cc:print value="&mymaintopic.url">"><cc:if cond="&mymaintopic.properties.design.ws.fontawesomeicon"><i class="icon fa <cc:print value="&mymaintopic.properties.design.ws.fontawesomeicon"> fa-2x"></i></cc:if><cc:print value="&mymaintopic.caption"></a></li>
</cc:loop>
</ul>
Nicht vergessen !
Zu den "Abschlussarbeiten" gehören dann natürlich (auch in anderen Beispielen) noch die Übernahme (und gegebenenfalls Anpassung) der CSS, sowie die Übernahme des JS-Codes oder auch die Berücksichtigung weiterer wichtiger Punkte je nach Beispiel. Hier in diesem Beispiel wäre dazu z.B. auch noch der "Schwenkcontainer" zu beachten...
Diese weiteren Arbeiten haben aber nichts mehr mit der Ausgangsfrage, also dem Aufbau einer Navigation zu tun, weshalb ich hier nicht mehr weiter darauf eingehe.
Diese Demo sollte ja lediglich aufzeigen, wie man sich eine Navigation "konstruieren" oder aus einem vorhandenen Bespiel nachbauen kann.
Auf der nächsten Seite findet ihr noch hilfreiche Quellenangaben zur Vertiefung dieser Materie.
Und nun...
...viel Spass beim Bau eurer eigenen Navigation !
