W tym krótki poradniku postaram się pokazać jak łatwo wykonać modne menu w kształcie zakładek bez potrzeby uruchamiania programu graficznego. Efekt działa w Firefoxie, Chrome, Safari i Konquerorze3. Pozdrowienia z tego miejsca dla twórców Opery i Internet Explorera.

Na początek HTML

Nasze menu jak nakazuje dobry webdeveloperski obyczaj będzie opierało się na odpowiednio ostylowanej liście.

<ul class="menu">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">Artykuly</a></li>
  <li><a href="#" class="menu-active">Galeria</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">O mnie</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>

Jak widać jednemu z elementów nadaliśmy dodatkową klasę menu-active. Za jej pomocą oznaczamy aktualnie aktywny element, to znaczy link do strony, na której jesteśmy. Całe menu oznaczyliśmy klasą menu, za pomocą której będziemy się odwoływać w arkuszu styli.

Meritum czyli CSS

Teraz zajmijmy się pisaniem opisu CSS. Po pierwsze zerujemy wszystkie odstępy w elemencie UL i usuwamy kropki sprzed elementów listy:

.menu{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

Dalej ustawiamy elementy LI w jednym rzędzie i nadajemy ujemny prawy margines by zakładki na siebie nachodziły:

.menu li{
  float: left;
  display: block;
  height: 30px;
  width: 100px;
  margin-right: -5px;
}

Pora na ustawienie linków. Ważne jest aby wyświetlały się jako bloki (display: block;) i miały ustalone rozmiary i pozycję w wymiarze Z (z-index: 1;). Aby jednak nasze menu przybrało „zakładkowy” wygląd trzeba dodać na przykład zaokrąglone rogi. Ostatnie cztery wartości ustawiają zaokrąglenie dla prawego górnego rogu kolejno w:  Chromie/Safari, Konquerorze, Firefoxie i przeglądarkach zgodnych z CSS3. Dla przejrzystości kod pozbawiony jest opisów czcionek i kolorów

.menu li a{
  display: block;
  height: 30px;
  width: 100px;
  position: relative;
  z-index: 1;
  -webkit-border-top-right-radius: 20px;
  -khtml-border-radius-topright: 20px;
  -moz-border-radius-topright: 20px;
   border-top-right-radius: 20px
}

Teraz pozostaje jeszcze tylko opisać naszą dodatkową klasę menu-active. Jak już pisałem zakładka z taką klasą musi wystawać ponad pozostałe. Inaczej mówiąc musi być na wyższej pozycji w wymiarze Z. Normalnie zakładki mają pozycję 1, więc ta aktywna musi mieć większą:

.menu a.menu-active{
  z-index: 2;
}

I to wszystko. Zero grafiki, a efekt co najmniej ciekawy. Gotowy przykład można zobaczyć pod tym linkiem.