Zaznacz stronę

Czasami włócząc się po warszawie z laptopem, szukam nowych inspiracji i rozwiązań przydatnych do tworzenia stron www. Dziś pokaże wam szybką i wygodna technikę tworzenia wyrównanego (w obu płaszczyznach) menu poziomego.

Zaczynamy oczywiście od htmla – klasycznie jako lista, zamykając całość w element <nav>

 

1
2
3
4
5
6
7
<nav id="nawigacja">
<ul>
    <li class="menu_item"><a href="#">Menu#1</a></li>
    <li class="menu_item"><a href="#">Menu#2</a></li>
    <li class="menu_item"><a href="#">Menu#3</a></li>
</ul>
</nav>

  
Całość tego rozwiązania bazuje na sposobie wyświetlania poszczególnych elementów, więc na własności display. I tak całą nawigację wyświetlimy jako tabelkę, listę jako wiersz tabeli zaś elementy listy jako komórki tabeli. Element <a> zawarty w każdym elemencie listy jest wyświetlany jako element blokowy, tylko po to aby klikalny był cały obszar nie tylko napis.
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#nawigacja{
   display: table;
   width: 100%; //wypełni nam cały el. nadrzędny
}
#nawigacja ul{
   display: table-row;
}
#nawigacja ul li{
   width: auto;
   display: table-cell;
   white-space: nowrap; // to sprawia iż dwu wyrazowe menu nie podzieli się na dwa wiersze
}
#nawigacja ul li a {
   list-style: none;
   cursor: pointer;
   display: block;
   text-align: center;
   text-decoration: none;
   padding: 10px 0px;
   color:rgb(238,2,188);
   font-weight: bold;
}
#nawigacja ul li a:hover{
   background-color:rgb(238,2,188);
   color:#FFF;
}

  
Poniżej funkcjonujące demo
 

 
Oczywiście całość konstrukcji można zamknąć w elemencie węższym i ustawić automatyczne marginesy po bokach – dzięki czemu zyskamy małe menu po środku ekranu.