CSS-basierte Navigationsleiste in Joomla einfügen

[Sheva]

Hallo Leute,

habe bereits Dienstag verzweifelt nach einem Drop Down Menü gesucht, welches sich vertikal öffnet.

Nachdem ich nun kein Modul für Joomla gefunden habe muss ich mir wohl oder übel ein normales Menü mit CSS schreiben bzw. formatieren.
Unten mal ein Screenshot von meinem jetzigen Menü (alles ausgeklappt). Daneben noch ein Screenshot mit meinem Menü, wie es werden soll.

Habe es bereits geschafft das sich die Untermenüs öffnen wenn ich mit der Maus über einen Oberpunkt fahre. Ist es möglich das es sich erst öffnet wenn ich draufklicke ? Oder brauch ich dafür Javascript ?

Dazu würd ich gern wissen wie ich "NUR" auf die Oberpunkte zugreife und nicht auch auf die Unterpunkte, sprich mit "#links li {...}" greif ich auf alle Punkte zu die in dem Modul sind, ich will aber nur auf die Oberpunkte zugreifen, nicht auf die Unterpunkte von den Oberpunkten

Gewünschte weitere Infos werde ich natürlich dazu posten.

Hoffe es weiß jemand Rat.

Schöne Grüße, Sheva

EDIT: Anhänge kann ich nicht anhängen, es erscheint bei "Anhänge verwalten" nur ein leeres Fenster !

Hier mal der Quellcode:

<div id="links">
   <ul class="joomla-nav">
   <li class="item119">
   <li class="selected parent item120">
             <a href="/zeulenroda_meeting_joomla/index.php/wettbewerbe.html">Wettbewerbe</a>
             <ul>
                  <li class="selected parent item121">     
                  <li class="parent item126">
                  <li class="item130"></ul>
    </li>
    <li class="item122"> 
    <li class="item131"> 
    <li class="parent item132">
    <li class="item136">
     <li class="parent item137">
      </ul>
</div>

 

[NE4Y]

Für das Öffnen nach dem Klick ist JavaScript nötig.

Könntest du deinen Menü Code zeigen? Dann könnte man auch auf deine 2. Frage eingehen.

 

[Sheva]

Hab es grad mal noch editiert. Also ich meine damit, das ich nur auf die oberen <li> zugreifen möchte und nicht noch auf die die im verschachtelten <ul> liegen.

Ist das möglich oder kann ich nur alle ansprechen ?

 

[alogheo]

Dazu würd ich gern wissen wie ich "NUR" auf die Oberpunkte zugreife und nicht auch auf die Unterpunkte, sprich mit "#links li {...}" greif ich auf alle Punkte zu die in dem Modul sind, ich will aber nur auf die Oberpunkte zugreifen, nicht auf die Unterpunkte von den Oberpunkten

entweder du gibst den Oberpunkten eine zusätzliche Klasse, oder du definierst einmal die styles für die Oberpunkte mit #links>li und dann für die Unterpunkte mit #links>li>ul>li

edit: oder schau dirm al diese Pseudoklasse hgier an: http://reference.sitepoint.com/css/pseudoclass-nthoftype

 

[Sheva]

entweder du gibst den Oberpunkten eine zusätzliche Klasse, oder du definierst einmal die styles für die Oberpunkte mit #links>li und dann für die Unterpunkte mit #links>li>ul>li

edit: oder schau dirm al diese Pseudoklasse hgier an: :nth-of-type(N) » Learn CSS3 | Cheat Sheet | CSS Tutorial | Selectors | Properties

Das mit den > Zeichen habe ich noch nicht probiert, danke dir.

Habe es nun auch geschafft das es sich bei click öffnet. Habe nur noch ein Problem das es nicht offen bleibt sondern gleich wieder schließt.

Habe mir das Tutorial hier rausgenommen:

JavaScript: Aufklappbare Mens

Dadurch das ich aber einen Link auf dem Obermenüpunkt habe öffnet er ja die Seite neu und dadurch wird auch die Javascript Funktion neu geladen.
Unten, bei selfhtml steht aber:

"
Menüzustand speichern und wieder herstellen

Die Funktion treeMenu_store(menu) gibt einen String zurück, der den aktuellen Zustand eines Menüs beschreibt. Der String enthält die Nummern der Menüeinträge, die offen sind.
Mit onunload="window.name = treeMenu_store(document.getElementById('menu'))" kann man so den Zustand des Menüs beim Verlassen der Seite speichern.
Diesen String kann man der Funktion treeMenu_init(menu, data) als zweiten Parameter übergeben. Mit onload="treeMenu_init(document.getElementById('menu'), window.name)" kann man den Zustand auf einer anderen Seite oder nach einem reaload wieder herstellen. "

Nun meine Frage, wo schreibe ich das "onunload" hin ? Im Body Tag steht ja bereits das onload.

Hier mal der Body Tag von mir:

<body onload="treeMenu_init(document.getElementById('links'), '')">

EDIT: Hat nun funktioniert, lag nur an einer fehlenden schließenden Klammer

 

[Sheva]

Hab es nun halbwegs ansehnlich hinbekommen.

Die Pfeile die nach unten gehen haben jeweils Untermenüs, die die nach rechts gehen nicht. Nun habe ich allen eine feste Höhe von 35px zugeordnet. Wenn ich nun aber z.B. auf Wettbewerb klicke, dann geht zwar das Menü auf aber durch die feste Größe von dem darunterliegenden Punkt "Rekorde", wird das Untermenü ineinander angezeigt, sprich die unteren Punkte rutschen nicht nach unten. Gibt es einen Befehl wie ich das umgehen kann ? Sodass die Punkte "Rekorde, Fotos etc." automatisch unter das Untermenü von Wettbewerb rutschen. Das Untermenü sich quasi zwischenreinschiebt.

Wenn ich die feste Größe wieder rausnehme, funktioniert es wieder.