Wyjustowane menu nawigacyjne

Podczas wprowadzania zmian w menu nawigacyjnym jednej ze stron konieczne było dodanie nowych łącz. Niestety sama konstrukcja nawigacji nie była idealna. Dwie listy nieuporządkowane z właściwością float: left;, z czego druga zawierała dodatkowo wyrównanie tekstu do prawej. Menu takie nie wygląda profesjonalnie, do tego dodawanie kolejnych linków zaburza ustalony wcześniej wygląd menu. A gdyby wszystkie łączą równo i proporcjonalnie wypełniały dostępną przestrzeń, czyli były wyrównane do lewej i prawej krawędzi strony internetowej.

Przy zwykłym menu nawigacyjnym, kolejne elementy mają określoną szerokość przez co szerokości między nimi są różne. A co jeśli łącza naszej nawigacji mają różną długość, a chcemy, aby były wyświetlane równomiernie? Istnieje pewne tego problemu.

Download · Live Demo

Pomysł nie jest wcale nowy, bo spotkałem się z nim już kilka lat temu podczas pracy w Onecie. Idea rozwiązania jest bardzo prosta, jeśli wszystkie elementy nawigacyjne potraktujemy jak elementy liniowe. Takie elementy zachowują się jak tekst, czyli podlegają wyrównaniu. Poniżej znajduję się przykładowa struktura naszego menu nawigacyjnego.

<div id="navigation">
    <a href="#">Home</a> •
    <a href="#">Projects</a> •
    <a href="#">Some Long Text</a> •
    <a href="#">Test me</a> •
    <a href="#">People</a> •
    <a href="#">About</a> •
    <a href="#">Contact</a><span></span>
</div>

Znaczniki <a> domyślnie wyświetlane liniowo, układają się obok siebie, chyba że kolejny element nie mieści się już w podanej linii, więc przechodzi do nowej linii. Osiągniemy to poprzez dodanie do naszego menu dodatkowego elementu <span> i określeniu jego szerokości na 100%.

#navigation {
    background: #eee;
    text-align: justify;
}
#navigation a {
    display: inline-block;
    white-space: nowrap;
}
#navigation span {
    display: inline-block;
    width: 100%;
}

Oprócz szerokości dodatkowego elementu <span> konieczne jest ustawienie wyrównania dla pojemnika łącz, a także właściwości white-space: nowrap;, aby poszczególne wyrazy linków wielowyrazowe były naturalnie blisko siebie.

Problematyczny w tej sytuacji jest jak zwykle Internet Explorer. Wersje IE6 i IE7 nie wyświetlają prawidłowo elementów liniowo-blokowych dlatego rozwiązanie to nie jest idealne. Z kolei dodatkowy element <span> rozciąga w pionie pojemnik nawigacji, na co do tej pory również nie znalazłem rozwiązania.