horizontales Menü auf der Seite zentrieren .....

[CKern]

Hallo Zusammen,

ich habe mal keine Frage, sondern möchte auf eine tolle Lösung hinweisen.

Anforderung: Ich möchte ein horizontales Menü, das im Header zentriert wird.

Gefunden habe ich diesen Artikel
http://heikomamerow.de/blog/2012/07/...te-ausrichten/

und in meinem aktuelle Projekt umgesetzt.

Hierfür nav_default Template kopiert, einen anderen Namen gegeben und folgendes am Ende eingefügt

    ......
   < li class="letztes-li" >&nbsp< /li >
 < /ul >

Dann im entsprechende FE Modul für das Menü das neue Template eingetragen
Im CSS dann folgendes erstellt

#hauptnavi ul.level_1 bekommt text-align:justify
#hauptnavi .level_1 li bekommt display:inline-block (kein float:left mehr)
#hauptnavi .level_1 li.letztes_li bekomme padding-left:900px; height:0px;

Da mein Menü 2 Ebenen hat:

#hauptnavi .level_2 li bekommt clear:both; und float:left (damit jetzt wieder untereinander steht)
#hauptnavi .level_2 li.letztes_li bekomme padding-left:1px; height:0px; (sonst wird das DropDown zu breit)

Der Trick ist, der Menüzeile einen Blocksatz zu geben. Dafür muss ich aber einen Zeilenumbruch erzwingen, was ich mit dem "letzten-li" erzeuge.


Viele Grüße

[Andreas]

Ich finde diese Lösung nicht so schön, da man ein Template anpassen muss, einen leeren Listenpunkt hat und sich der klickbare Bereich auf den reinen Text beschränkt. inline-block ist auch nicht pixelgenau und da zusätzlich die A-Elemente auch inline sind, könnte es zu Problemen bei der weiteren Formatierung von Rahmen, Hintergrund usw. führen. Da der erste und letzte Menüpunkt links bzw. rechtsbündig sind, wird es auch schwer sein, die Punkte als Button zu formatieren.

Eine andere Lösung für ein zentriertes Menü mit gleich breiten Zellen ist

li {
  display: table-cell;
  width: 1%;
}
a {
  text-align: center;
}

Gesehen z.B. bei bootstrap.