Ciekawe menu z pomocą CSS

Skąd wpis - właściwie z prośby. Ostatnio kolega poprosił mnie o rozwiązanie jego problemu. Chciał uzyskać takie menu:

Problemem było to, że na stronie nie mogło być żadnego skryptu JS, PHP, mógł być jedynie czysty HTML no i ostylowanie, no więc pozostało wykorzystać CSS.

Jak zrobić coś takiego? No wiadomym jest, że trzeba użyć :hover, lecz pytanie jakie mi zadał brzmiało po prostu: Jak? Zapewne metod rozwiązania tego „problemu” jest wiele, i nie zamierzam nikomu wmawiać jakie jest najlepsze, najwspanialsze itd. być może komuś ten sposób wyda się odpowiedni i ciekawy.

Od czego zacząć?

Najpierw musimy stworzyć nasze menu w programie graficznym. Po jego utworzeniu zmieniamy rozmiar obszaru roboczego podnosząc wysokość 2- krotnie – jak w przykładzie.

Teraz „duplikujemy” nasze menu i przenosimy jest pod spód. "Dolne" wykonujemy tak jak wyglądałoby po najechaniu myszy (nasz :hover). Kolejny krokiem jest pocięcie go zgodnie z tym jak wykonaliśmy na pojedyncze „odnośniki”

Możemy nazwać je kolejno menu1.jpg, menu2.jpg, itd.. Wysokość tych "pociętych" odnośników wynosi 120px (zawiera górne i dole „menu” z projektu). Wycinamy także skrajne lewe brzegi i tło samego menu (te obrazki mają wysokość 60px;)

Ale po co mi obrazki? Para buch maszyna w ruch :)

No faktycznie z obrazków nam nic nie przybędzie. Otwieramy edytor i lecimy. Na początku struktura menu.

Sprawa HTML'a

Z pewnością najłatwiej będzie umieścić odnośniki w liście. Napiszmy ją więc nadając jej identyfikator navi:

<ul id="navi">
<li><a href="#">menu4</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu1</a></li>
</ul>

Skoro mamy już listę to dodajmy także lewy i prawy brzeg naszego menu:

<div class="bok"></div>
<ul id="navi">
<li><a href="#">menu4</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu1</a></li>
</ul>
<div class="bok"></div><!-- DIV skrajnego prawego brzegu --›

Można zapytać dlaczego lewy skrajny brzeg i prawy skrajny brzeg są takie same, otóż składają się z tego samego – jednego obrazka, więc korzystamy z tego samego kodu..

Aby można było w razie konieczności menu umieścić tam gdzie chcemy otoczmy cały nasz kod zamykając go w jednym „pudełku” o identyfikatorze menu:

<div id="menu">
<div class="bok"></div>
<ul id="navi">
<li><a href="#">menu4</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu1</a></li>
</ul>
<div class="bok"></div>
</div>

Tak oto wygląda kod HTML naszego menu. Zabierzmy się za wygląd.

Sprawa stylu

Umieśćmy zatem nasze menu w jakimś miejscu na stronie:

#menu {
width:960px; /* Szerokość naszego menu*/
margin:30px auto; /* Dolny i górny margines menu 30px, menu wyśrodkowane*/
}

Gdy już to zrobiliśmy zajmijmy się jego wyglądem. Na początek nadajmy mu ogólny wygląd i strukturę.

ul#navi{
background:url('menubg.jpg') repeat-x; /* Tło dla całego menu, powtarzane po osi X*/
height:60px; /*  Wysokość menu, połowa wysokości obrazka menu1.jpg, menu2.jpg itd...*/
margin:0; 
padding:0;
list-style: none;
float: left;
width: 960px;
}
ul#navi li { /* Każdy „odnośnik” naszego menu */
float: right;
margin-right:10px;
padding:0;
}

Dobrze mając zatem ogólny zarys zajmijmy się poszczególnymi odnośnikami i skrajnymi bokami:

a.menu1, a.menu2, a.menu3, a.menu4 {
display:inline-block;
height:60px;
overflow:hidden;
text-indent: -9999px; /* Ukrycie tekstów  odnośników */
}

a.menu1{
background: url(menu1.jpg) no-repeat; /* Obrazek z odnośnikiem 1 */
width:143px; /*Szerokość obrazka menu1.jpg */
}

a.menu2{
background: url(menu2.jpg) no-repeat;
width:75px;
}

a.menu3{
background: url(menu3.jpg) no-repeat;
width:110px;
}

a.menu4{
background: url(menu4.jpg) no-repeat;
width:88px;
}

I skrajne bogi:

.bok{
background:url('menuleft.jpg') no-repeat;
height:60px;
width:10px;
float:left;
}

Spójrzmy na nasze obrazki odnośników. Na gorze mamy nasze menu w stanie „spoczynku”, na dole takie jakie ma zobaczyć odwiedzający po najechaniu na nie myszka. Przesuńmy więc obrazek do góry o 60px ukazując mu ten dolny.

a.menu1:hover, a.menu2:hover, a.menu3:hover, a.menu4:hover{
background-position: 0px -60px;
}

Zatem cały kod CSS naszego menu wygląda tak:

#menu {
width:960px; /* Szerokość naszego menu*/
margin:30px auto; /* Dolny i górny margines menu 30px, menu wyśrodkowane*/
}

ul#navi{
background:url('menubg.jpg') repeat-x; /* Tło dla całego menu, powtarzane po osi X*/
height:60px; /*  Wysokość menu, połowa wysokości obrazka menu1.jpg, menu2.jpg itd...*/
margin:0; 
padding:0;
list-style: none;
float: left;
width: 960px;
}

ul#navi li { /* Każdy „odnośnik” naszego menu */
float: right;
margin-right:10px;
padding:0;
}

.bok{
background:url('menuleft.jpg') no-repeat;
height:60px;
width:10px;
float:left;
}

a.menu1, a.menu2, a.menu3, a.menu4 {
display:inline-block;
height:60px;
overflow:hidden;
text-indent: -9999px; /* Ukrycie tekstów  odnośników */
}

a.menu1{
background: url(menu1.jpg) no-repeat; /* Obrazek z odnośnikiem 1 */
width:143px; /*Szerokość obrazka menu1.jpg */
}

a.menu2{
background: url(menu2.jpg) no-repeat;
width:75px;
}

a.menu3{
background: url(menu3.jpg) no-repeat;
width:110px;
}

a.menu4{
background: url(menu4.jpg) no-repeat;
width:88px;
}

a.menu1:hover, a.menu2:hover, a.menu3:hover, a.menu4:hover{
background-position: 0px -60px;
}

Pozostaje nam uruchomić plik html (wraz z zainicjowanym stylem CSS) i zobaczyć nasze menu w działaniu.

Oczywiście każdy ma własne zdanie dotyczące danych kwestii nie zamierzam go w żaden sposób podważać, czy obrażać kogokolwiek w jakikolwiek sposób. Przepraszam także za ewentualne błędy.