Poziome menu zawsze wyśrodkowane

Temat poziomych menu poruszany był w blogosferze już wielokrotnie. Każdy lepszy webmajster znalazł jakiś sposób na takie menu. Ciekawie rozmyślał o tym Riddle, dużo pracy w temat włożył też Adriano. Ja zmierzyłem się z innym problemem dotyczącym poziomego menu: jego środkowania niezależnie od jego szerokości. Oczywiście można było użyć starego już znacznika "center" z htmla, albo operować margin:0; i width w CSSie z wykorzystaniem JS. Pierwsza metoda nie powinna być w ogóle używana, druga jest niewygodna jeśli robimy templatki pod jakiegoś CMSa, bo nie zawsze możemy użyć JS. Po moich przemyśleniach powstała najlepsza metoda z wykorzystaniem samego CSSa.

Jeżeli robimy statyczną stronę, której nie zmienia się ilość podstron to problemu nie ma. Również jeżeli sami zarządzamy całą stroną to dodanie pola w menu będzie powodowało skopiowanie jednej linii w XHTML. Źle się dzieje jeśli piszemy templatkę pod jakiegoś CMSa lub zwyczajnie nie chcemy bawić się w kodzie podczas rozwoju naszej strony. Różna ilość linków daje różny rozmiar, a to powoduje, że ustawienie szerokości odpada.

Od razu przejdźmy do dzieła. Wykorzystamy DIVa i listę nieuporządkowaną, w XHTMLu wygląda to tak:

 
<div id="top_menu">
<ul>
<li><a href="/glowna/"><span>glowna</span></a></li>
<li><a href="/artykuly/"><span>Artykuły</span></a></li>
<li><a href="/kontakt/"><span>Kontakt</span></a></li>
<li><a href="/linki/"><span>Kontakt</span></a></li>
</ul>
</div><!--top_menu-->
 

Teraz czas na CSSa:

 
#top_menu{
background-color:#3BBF5C;
height: 20px;
width:980px;
float:left;
margin-bottom:20px;
text-align:center;
}
 
#top_menu ul{
display:inline-block;
}
 
#top_menu li{
list-style-type: none;
float: left;
text-align: center;
width:98px;
background: #024704;
}
 

Kto choć trochę zna CSSa powinien wiedzieć o co tu chodzi. Dwa najważniejsze parametry to: text-align:center; w #top_menu oraz display:inline-block; w liście nieuporządkowanej. To właśnie dzięki nim mamy centrowanie bez potrzeby określania szerokości. Szerokość DIVa to 980px - daje nam to możliwość zapełnienia go w całości linkami(każdy to 98px), ale co stanie się kiedy zrobimy 11 linków? Tu niestety całe rozwiązanie pada... Mamy zapełniony cały wiersz i "nadmiarowe" linki równane do lewej. Nie mniej moje rozwiązanie można z powodzeniem stosować w większości takich przypadków, bo rozbudowanie strony do 10 linków w TOP-MENU to już jest sztuka nieosiągalna w praktyce. Testowane na: Firefox 3, IE 8, Opera 9.6, Chrome 2.0, Avant Browser 9.0 i w każdym przypadku działa bardzo dobrze. Sam użyłem tego rozwiązania w templatce do Joomli i sprawdza się bez zarzutów.

Kilknij, aby zobaczyć przykład

Procek