Jump to content
Sign in to follow this  
Elektryk

Zakładkowe menu bez grafiki

Recommended Posts

W tym krótki poradniku postaram się pokazać jak łatwo wykonać moden menu w kształcie zakładek bez potrzeby uruchamiania programu graficznego.

 

Efekt działa w Firefoxie, Chrome, Safari, Chrome, Konquerorze i innych przeglą…darkach zgodnych z CSS3 (pozdrowienia dla twórców Opery i IE).

 

Na począ…tek kod html:

<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 linkowi przypisaliśmy klasę menu-active. Ta klasa wskazuje która zakładka ma być na wierzchu.

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 z ustawionymi kolorami i czcionkami do zobaczenia tutaj:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

Kod do podejrzenia i pobrania tutaj:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

  • Like 3

baner.png

f.jpg t.png l.jpg

m.jpg

Share this post


Link to post
Share on other sites

Fajne, mogłeś jeszcze dodać zmianę koloru tła elementu aktywnego, bo tylko czcionka się rozjaśnia ;)

Tak miało być, bo jeśli dołożyć do tego, że główny box strony zlewa się z aktywną… zakładką… to takie rozjaśnianie psułoby efekt.


baner.png

f.jpg t.png l.jpg

m.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...