W2D 6.0 - Design Omikron: Klappbare Navigationsleiste

[navigator]

Hallo!

Schon einmal konnte mir hier im Forum kompetent geholfen werden, worüber ich mich wirklich gefreut habe und sehr dankbar war.

Ich habe nun ein anderes Anliegen, das aber ebenso knifflig ist:
Ich nutze das Design Omikron und würde gern wissen, was zu tun ist, um eine klappbare Navigations-Leiste zu gestalten!

Derzeit ist es bei mir leider so, dass die Navi-Leiste beim Aufruf der Website (bzw. Startseite) nicht nur die Hauptseiten der 1. Ebene anzeigt, sondern auch ALLE dazugehörigen Hauptseiten der 2. Ebene. Hat man nur wenige Hauptseiten, ist das alles kein Thema. Sind es aber viele (wie bei mir), wird die Navi-Leiste schnell sehr lang.

Ein weiteres Problem besteht darin, dass wenn ich irgendeine der Hauptseiten der 2. Ebene anklicke, um die dazugehörigen Hauptseiten der 3. Ebene zu sehen, auch automatische ALLE anderen Hauptseiten der 2. und 3. Ebene angezeigt werden. Im Klartext: Das KOMPLETTE Menü der betreffenden Hauptseite der 1. Ebene wird aufgeklappt , inkl. ALLER Hauptseiten der 2. UND 3. Ebene.

Zur Verdeutlichung ein Beispiel: Ich habe verschiene Hauptseiten der 1. Ebene, u.a. das Thema REISE. Diese Hauptseite beinhaltet dann verschiedene Hauptseiten der 2. Ebene, mit Ländern, wie z.B. Ägypten, Italien oder Indien usw. Und diese wiederum beinhalten dann jeweils verschiedene Hauptseiten der 3. Ebene, in denen die Länder dann aufgeteilt sind nach Städten, Orten, Sehenswürdigkeiten. Bei Ägypten wäre es dann z.B. Kairo, Luxor usw., bei Italien dann Rom oder Neapel etc.

So, und nun gibt es bei mir folgende Ausgangssituation: Beim Aufruf meiner Startseite erscheint meine Navi-Leiste mit allen Hauptseiten der 1. Ebene (also Reise, Archäologie, Kontakt etc, SOWIE AUCH ALLE dazugehörigen Hauptseiten der 2. Ebene. Da dies schon einige bei mir sind, erscheint die Navi-Leiste auf den ersten Eindruck als etwas zu lang.

Hier hätte ich gern, dass als Ausgangsvariante NUR die Hauptseiten der 1. Ebene zu sehen sind, OHNE die der 2. Ebene! Was muss ich tun?

So, nun gibt es aber beim Omikron-Design noch ein weiteres Problem:
Wenn ich nun irgendeine Hauptseite der 2. Ebene anklicke (z.B. Ägypten), dann werden mir nun nicht nur alle Hauptseiten der 3. Ebene angezeigt, die ich zu diesem Thema angelegt habe, sondern auch automatisch ALLE Hauptseiten der 3. Ebene, die es noch zu anderen Ländern gibt, also z.B. auch die von Italien, Indien, Österreich usw.

Daher würde ich dies gern vermeiden und erreichen, dass sich beim Klick nur die jeweilige, angeklickte Hauptseite öffnet und ALLE ANDEREN geschlossen bleiben. Wenn ich danach eine andere Hauptseite anklicke, um diese zu öffnen, sollte sich die alte (aufgeklappte) Hauptseite automatisch schließen. Dadurch bleibt die gesamte Navi-Leiste übersichtlich und erscheint nie zu lang, auch wenn sie viele Hauptseiten hat.

Ich würde mich sehr über einen Hinweis freuen, was ich tun muss bzw. an welcher Stelle ich welche Befehle eingeben muss, um dies zu erreichen, wenn es denn überhaupt möglich ist. Aber irgendwie müsste es doch gehen, oder? Das wäre klasse.

Zusätzlich würde mich noch interessieren, ob es machbar wäre, dass die betreffende (aufgeklappte) Hauptseite VORÜBERGEHEND (also während des Betrachtens) ganz oben in der Navi-Leiste erscheint, zwecks besserer Sichtbarkeit, um zu verhindern, dass User ggfs. scrollen müssen.
Falls dies jedoch nicht machbar ist, könnte man es dann einrichten, dass in diesem Fall die betreffende Hauptseite in der Navi-Leiste in einer anderen Farbe und/oder in größerer Schrift erscheint, um sich optisch noch besser von den anderen (zugeklappten)abzuheben?

Vielen Dank vorab für die Zeit und Mühe!

[voodoo36]

Schau dir das mal an, ob das dem entspricht... hier

[navigator]

Zitat von voodoo36

Schau dir das mal an, ob das dem entspricht... hier

Hallo und guten Abend! Das ging ja wirklich fix. Vielen Dank für die prompte Reaktion!

Ich habe mir Deinen Link und die Website angesehen. Ich denke, das entspricht genau dem, was ich haben will. Hier gab es zwar nur 2 Ebenen (wenn ich es richtig gesehen habe), aber das ist ja egal, denn ich nehme mal an, dass dies auch noch mit einer dritten Ebene funktioniert (hoffe ich doch).

Wie kann ich das Klapp-Menü nun auf mein Omikron-Design anwenden? Weißt Du, welche Befehle ich wo eingeben muss? Das wäre klasse!

[voodoo36]

Hallo, hier der Code für den Umbau, ich denke so müsstest du es hin bekommen... jetzt auch mit dritter Ebene! Bitte vorher aber eine Sicherung deiner Original Dateien machen!
Viel Spass damit...

In der navigation.ccml musst du diesen Bereich auskommentiert: 
 
<cc:loop type="maintopic" obj="mymaintopic"> 
<a class="maintopic" href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a> 
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number"> 
<a <cc:if cond="&mytopic.isexactpagetopic">style="font-weight: bold;" </cc:if> class="topic" href="<cc:print value="&mytopic.url">"><cc:print value="&mytopic.caption"></a> 
<cc:if cond="&mymaintopic.ispagemaintopic"> 
<cc:loop type="subtopic" obj="mysubtopic" maintopic="&mymaintopic.number" topic="&mytopic.number"> 
<a <cc:if cond="&mysubtopic.ispagesubtopic">style="font-weight: bold;" </cc:if> class="subtopic" href="<cc:print value="&mysubtopic.url">"><cc:print value="&mysubtopic.caption"></a> 
</cc:loop> 
</cc:if> 
</cc:loop> 
</cc:loop>


und stattdessen den eingefügt: 


<cc:loop type="maintopic" obj="maintopic"><cc:if cond="&maintopic.ispagemaintopic"><cc:if cond="&maintopic.isexactpagemaintopic"><a class="maintopicsel" href="<cc:print value="&maintopic.url">"><cc:print value="&maintopic.caption"></a><cc:else><a class="maintopic" href="<cc:print value="&maintopic.url">"><cc:print value="&maintopic.caption"></a></cc:if> 

<cc:loop type="topic" obj="topic" maintopic="&maintopic.number"><cc:if cond="&topic.ispagetopic"><cc:if cond="&topic.isexactpagetopic"><a class="topicsel" href="<cc:print value="&topic.url">"><cc:print value="&topic.caption"></a><cc:else><a class="topic" href="<cc:print value="&topic.url">"><cc:print value="&topic.caption"></a></cc:if> 

<cc:loop type="subtopic" obj="subtopic" maintopic="&maintopic.number" topic="&topic.number"><cc:if cond="&subtopic.ispagesubtopic"><a class="subtopicsel" href="<cc:print value="&subtopic.url">"><cc:print value="&subtopic.caption"></a><cc:else><a class="subtopic" href="<cc:print value="&subtopic.url">"><cc:print value="&subtopic.caption"></a></cc:if></cc:loop><cc:else><a class="topic" href="<cc:print value="&topic.url">"><cc:print value="&topic.caption"></a></cc:if></cc:loop><cc:else><a class="maintopic" href="<cc:print value="&maintopic.url">"><cc:print value="&maintopic.caption"></a></cc:if></cc:loop>


In der style_design.css habe ich zusätzlich das eingesetzt. Farben bei background-color anpassen.
 
a.maintopicsel, #nav h1 { 
  display:block; 
  margin: 10px -20px 10px -20px; 
  padding: 5px 20px 5px 20px; 
  background: <cc:print value="&usercolor.medium"> url(../images/<cc:print value="&pic.fade.filename">) repeat-x top left; 
  text-decoration: none; 
  font-size: 18px; 
  font-weight: normal; 
  color: #ffffff; 
} 

Dann noch den a.topicsel - Bereich, der fehlt: 

a.topicsel { 
  display:block; 
  padding: 0px 0px 6px 0px; 
  margin: 0px 0px 6px 0px; 
  border-bottom: 1px solid <cc:print value="&usercolor.alt.dark">; 
  text-decoration: none; 
  color: <cc:print value="&usercolor.medium">; 
}

und die 3. Ebene die du haben möchtest, in der style_design wie folgt definieren:

a.subtopicsel { 
  display:block; 
  padding: 0px 0px 6px 0px; 
  margin: 0px 0px 6px 0px; 
  border-bottom: 1px solid <cc:print value="&usercolor.alt.dark">; 
  text-decoration: none; 
  color: <cc:print value="&usercolor.medium">; 
}
 
Wenn du alles richtig gemacht hast sollte es gehen!

[navigator]

Hallo!

Ganz große Klasse! Ich danke Dir für Deine tolle Hilfe, es hat alles wunderbar geklappt. Jetzt habe ich ein schönes Klappmenü.

Besonders chic finde ich die Tatsache, dass sich die Hauptseiten der ersten Ebene (der Navi-Leiste) so schön silbrig-grau einfärben, wenn sie angeklickt sind (der normale Background ist ansonsten schwarz).

Schöne Grüße!

[voodoo36]

Alles klar... freud mich wenn es funktioniert hat!?