Menüleiste mit Ausklappmenü

berto

Lt. Junior Grade
Registriert
Juni 2011
Beiträge
450
Hallo Leute,

ich habe mich schon ein wenig länger mit Websites befasst (Grundkenntnisse in HTML, CSS, PHP vorhanden) und wollte mich nun an etwas schwierigere Layouts wagen, die optisch mehr hergeben.

Ich hätte mir ein Topmenü vorgestellt wie bei
http://www.apple.com

allerdings noch mit nach unten ausklappbaren Untermenüs, dafür aber ohne Suchfunktion, versehen.

Wenn es dann alles funktioniert, würde ich es gerne auf ein Joomla template anwenden und flexibel sein mit der Anzahl der Menüpunkte(wenn das möglich ist, sollten sie trotzdem gleichmäßig auf die ganze Breite verteilt sein)

Ich erwarte mir nicht (und möchte auch nicht) dass mir hier jemand Code schreibt, allerdings wäre es schön wenn ihr mir ein paar Tipps geben könntet, wie ich das ganze angehen soll(mit Bildern, oder div-Containern usw.)

Vielen Dank im Voraus und lg
 
Also solche Menüs setze ich immer mittels CSS um. Dazu nehme ich einfach Listen, sprich:
PHP:
<ul>
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
</ul>

Dann nur noch die Listitems mittels css auf display: inline; setzen und schwups sitzen die schön hintereinander. Da kann man noch die Breite der LIstitems festlegen.

Will man nun noch nen DropdowMenü, dann packt man einfach ne unsortierte LIste inkl. der listitems in ein listitem. Dann noch mittels css standartmäßig display: hidden; für die unter-liste setzen und beim hover auf block.

Wenn du da nen TUtorial brauchst google einfach mal nach css-dropdown-menü.

Wenn man nun das ganze Variable im Backend einstellen möchte, ist das vom CMS abhängig, wie man das macht ;) An und für sich aber recht simple, man muss nur entsprechende List-Items erstellen.

€dit: Ich habs nur kurz dahingeschrieben und nicht sonderlich ausführlich geschrieben. Wenne da speziell fragen hast, fühl dich frei ne pm zu schicken ;)
 
Zuletzt bearbeitet:
Wie du in Joomla! deine Navigation in der richtigen Form erzeugst musst du selbst rausfinden. Wie die Struktur der Navigation sowie das zugehörige CSS auszusehen hat kannst du dir z.B. hier in Aktion anschauen. http://playport-dresden.de/
- eine Unterebene (mehr wären möglich)
- kein JS
- sanfte Übergänge durch CSS Transitions
 
@Tion:
danke auf jeden Fall, wenn ich das nächste mal Zeit habe werde ich das gleich ausprobieren, falls fragen auftreten freue ich mich über deine unterstützung :-)
 
Zurück
Oben