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

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

Opublikowano 20.10.2014 8:00 - 4


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:

[html] <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>
[/html]

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:

[html] <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>
[/html]

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:

[css] .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;
}
[/css]

 

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

Wieści z Rozładowani.pl