DIY#3 - elementy menu zawsze wyjustowane na całej szerokości kontenera | DailyWeb.pl - codziennie o sieci

DIY#3 - elementy menu zawsze wyjustowane na całej szerokości kontenera

Opublikowano 3 lata temu - 6


Przed Wami kolejna odsłona DYI #3. Problem wygląda następująco:

Stworzyć menu, którego elementy niezależnie od swojej szerokości (i szerokości kontenera - o ile nie jest zbyt mały) będą rozmieszczone horyzontalnie w równych odstępach. Innymi słowy dynamiczne wyjustowane elementy :)

Co będziesz potrzebować:

  • chwilę czasu

Chyba ją masz. Do roboty:

Na początek struktura:

<div class="dwMenu">
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 3</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
</div>

Co tutaj mamy? Kontener nadrzędny z klasą "dwMenu" oraz listę. Jeżeli w takiej sytuacji chcielibyśmy mieć równe odstępy każdy z elementów musiałby mieć pewną szerokość ustaloną przez nas. Słabo, można lepiej:
Dodajemy sobie zaraz po liście <span></span> czyli mamy:

<div class="dwMenu">
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 3</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
    <span></span>
</div>

Ale po co ten <span> tam? Już wyjaśniam:

Ten <span> posłuży jako "zapychacz" miejsca, przełamujący nam linie, może być to dowolny tag, ale <span> idealnie tutaj pasuje. Dodajemy go sobie na samym końcu i ustawiamy na szerokość większą niż pusta przestrzeń za listą - bezpiecznie na 100%. Dzięki temu linia zostanie przełamana a elementy wyjustowane.  Tyle teorii, teraz CSS, który rzuci więcej światła:

.dwMenu {
    width: 100%;
    text-align: justify;
}
.dwMenu ul {
    display: inline;
    margin: 0;
    padding: 0;
}
.dwMenu li {
    display: inline-block;
    margin: 10px 0px 10px 0px;
}
.dwMenu li a{
    font-family: Arial;
    text-decoration: none;
    padding: 10px;
    color: #f2f2f2;
    background: #2ecc71;
    transition: background 0.2s ease;
}
.dwMenu li a:hover{
    background: #222222;
}
.dwMenu span {
    display: inline-block;
    width: 100%;
    height: 0;
}

 

Co tutaj zrobiliśmy:

  • .dwMenu : wyjustowaliśmy elementy wewnątrz
  • .dwMenu ul : listę wyświetlamy liniowo, aby "złapało" ją justowanie
  • .dwMenu li : elementy blokowe listy wyświetlamy w sposób liniowy i dodajemy margin z góry i z dołu (dla estetyki)
  • .dwMenu li a : wyłącznie style odpowiedzialne za wygląd linków, nic specjalnego vel "dizajn"
  • .dwMenu li a:hover : tak jak wyżej
  • .dwMenu span : Tutaj właściwie dzieje się cała sztuczka. przez to, że span jest elementem liniowym, a wyświetlanym blokowo z szerokością większą niż to co zostało za listą musi zostać przełamany na następną linię, dzięki temu w 1 linii zostają nam tylko elementy listy, które są wyjustowane.

Teraz mamy menu, odporne na zmiany tekstów w przyciskach, czy też ich ilość. Oczywiście dopóki dopóty nie będzie ich za dużo bo wtedy będą przełamywane do drugiej linii.
Efekty możenie oglądnąć tutaj:

DAILYWEB  JSFIDDLE

Zachęcam do przetestowania - dodawanie, odejmowanie elementów, zmiany tekstów, myślę, że jest to przydatny trick.

Wcześniej w serii:

DIY#2.5 - Custom checkbox i radio button - tylko CSS
DIY#2 - Custom checkbox i radio button - na obrazkach
DIY#1 - Selektor plików