Menü mit DropDown

[TickTack]

Hi,

ich versuche schon seit einigen Tagen mein Menü ein bissen auf zu peppen...
Ich würde gerne mit Hilfe von jQuery dies realisieren, nur weil ich nicht wie ich das in Joomla machen soll, damit wirklich nur die Unterpunkte angesprochen werden...

Und wie müsste dann der Code in CSS und jQuery aussehen?


Ich hoffe ihr könnt mir da ein bissen helfen
TickTack

 

[sokie]

AW: Menü mit DropDown

eigentlich gilt in jQuery und CSS für das Selektieren die gleiche Vorgehensweise:

in einem Bereich (#bereich) gibt es eine liste(ul) mit unterlisten(ul):
css:

#bereich ul ul{
  /*css für das submenü*/
}
#bereich ul ul li{
  /*regeln für die listenpunkte des sumenüs*/
}

jquery:

$("#bereich ul ul li").css("display","none"); //versteckt die listenpunkte der Untermenüs

letztendlich ist es unerheblich, ob das in Joomla! oder einer selbstgeschriebenen Seite eingesetzt wird. wichtig sind nur die richtigen selektoren.

 

[ChrisvA]

AW: Menü mit DropDown

Javaskriptmenüs zu benutzen ist immer riskant. Falls der Besucher JS deaktiviert hat geht so etwas nicht. Würde dir eine reine CSS-Lösung empfehlen.

 

[TickTack]

AW: Menü mit DropDown

So sieht mein Menü aus, der Menüpunkt Lorem ist ein Unterpunkt von dem ersten...

<div id="menu"> 
   <div class="moduletable"> 
      <ul id="mainlevel-nav">
         <li><a href="/rw/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28" class="mainlevel-nav" id="active_menu-nav">Über Joomla!</a></li>
         <li><a href="/rw/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29" class="mainlevel-nav" >Merkmale</a></li>
         <li><a href="/rw/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18" class="mainlevel-nav" >News</a></li>
         <li><a href="/rw/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=30" class="mainlevel-nav" >Die Community</a></li>
         <li><a href="/rw/index.php?option=com_contact&amp;view=category&amp;catid=0&amp;Itemid=53" class="mainlevel-nav" >Webdesign</a></li>
         <li><a href="/rw/index.php?option=com_content&amp;view=article&amp;layout=form&amp;Itemid=54" class="mainlevel-nav" >Kontakt</a></li>
         <li><a href="/rw/index.php?option=com_contact&amp;view=category&amp;catid=0&amp;Itemid=55" class="mainlevel-nav" >Impressum</a></li>
         <li><a href="/rw/index.php?option=com_content&amp;view=archive&amp;Itemid=56" class="mainlevel-nav" >Lorem</a></li>
      </ul>		
   </div> 
</div>

Ich verstehe einfach nicht wie ich anfangen soll egal ob nur als jQuery oder reines CSS

 

[ChrisvA]

AW: Menü mit DropDown

<ul id="menu">
  <li>menüpunkt1</li>
  <li> menüpunkt 2
    <ul>
      <li>unterpunkt zu menüpunkt2</li>
      <li>unterpunkt zu menüpunkt2</li>
    </ul
  </li>

</ul>

So sollte das vom Prinzip her aussehen. Bei deiner Version kann man ja nur raten, was einmal ein Unterpunkt werden soll.

 

[TickTack]

AW: Menü mit DropDown

Mit dem Code wollte ich nur Zeigen wie ich das meinte, ich verstehe einfach nicht wie ich in css dann die Unterpunkte ansprechen soll...
Bzw. wie ich das in Joomla umsetzten soll...

 

[Syrakos]

AW: Menü mit DropDown

So ganz kann ich Deine letzte Aussage nicht nachvollziehen. ChrisvA hat Dir gezeigt wie ein Menue mit Untermenue aufgebaut ist und sokie wie es im CSS definiert wird. Damit solltest Du auf jeden Fall schon was anfangen können.

Weitere Informationen wie CSS definiert wird findest Du auch hier:
SELFHTML: Stylesheets (CSS)

 

[ChrisvA]

AW: Menü mit DropDown

Der "Trick" bei einem solchen Menü sieht in etwa so aus:
ul.menu li:hover ul li {
visibility:visible;
}
Damit erreichst du, dass das untere li sichtbar wird, falls du die Maus auf dem Hauptelement hast.

 

[sokie]

AW: Menü mit DropDown

nach dem in #4 geposteten code hast du gar keine untermenüs

Der "Trick" bei einem solchen Menü sieht in etwa so aus:
ul.menu li:hover ul li {
visibility:visible;
}
Damit erreichst du, dass das untere li sichtbar wird, falls du die Maus auf dem Hauptelement hast.

ul.menu li:hover ul li funktioniert imIE6 nicht.da muss schon noch eine JS-lösung her.

 

[TickTack]

AW: Menü mit DropDown

Also keine Ahnung ob ich das in Joomla richtig eingestellt aber ich habe einen neuen Menüpunkt erstellt dessen Übergeorneter der erste ist...

Also ich stelle mich bestimmt dümmer an als es eigentlich ist aber ich verstehe immer noch nicht ob ich in CSS nun ein neues DIV erstellen muss oder wie ich die von Joomla generierten Untergeorneten Menüs ansprechen soll...

 

[sokie]

AW: Menü mit DropDown

Das gewöhnlich Jommla! Menü ist doch so aufgebaut, dass wenn du auf einen Eintrag klickst, die Seite mit den entsprechenden Inhalten neu geladen wird, und zudem unterpunkte(wenn vorhanden) angezeigt werden.
sind Unterpunkte vorhanden und ist der Eintrag aktiv, der die unterpunkte beinhaltet, so wird innerhalb des aktiven <li> elements eine weitere <ul> mit weitern <li> Einträgen sichtbar, die man natürlich (wie oben beschrieben) per css über

#menu ul ul li { }

selektieren und formatieren kann.

"erstellen" kannst du per css keine Elemente, nur vorhandene auswählen und ihre Darstellung verändern.

 

[TickTack]

AW: Menü mit DropDown

Ich würde aber gerne das die Unterpunkte schon im hover effekt Sichtbar sind, und das der Menüpunkt selbst kein verweisender Link ist (also im Endeffekt verweist er dann auf "#")

Als beispiel sollte das dann so aussehen:

»Referenzen
»Media
»Print


Es gibt nicht zufällig schon eine fertige lösung dafür?


Lieben Gruß
TickTack

 

[Pez]

AW: Menü mit DropDown

Schau Dir doch mal ein paar Template Beispiele an.

Viele haben das Menu, so wie Du es Dir vorstellst, bereits "on board".

Installier Dir doch mal eins und schau Dir mit Firebug an wie es geht.

Finde ich immer als anschaulichste Lösung, weil nicht nur theoretisch.

Viel Erfolg,
Pez