Dzisiaj zaprezentuje jak w niespełna 10 minut można stworzyć naprawdę zadziwiające menu nawigacyjne na stronę www. Technika ta pozwoli na zaoszczędzenia miejsca na stronie, ponieważ menu jest w pozycji fixed. Ponadto zastosowanie funkcji jQuery animate() wprowadza element bardzo przyjemnej animacji po najechaniu myszą.
Po pierwsze HTML
W pierwszej kolejności zacznijmy od HTML-a. Tutaj sytuacja jest naprawdę prosta, ponieważ potrzebujemy jedynie listy nieuporządkowanej:
-
<ul id="boxNavi">
-
<li class="potwor1"><a href="#" title="Potwór 1"></a></li>
-
<li class="potwor2"><a href="#" title="Potwór 2"></a></li>
-
<li class="potwor3"><a href="#" title="Potwór 3"></a></li>
-
<li class="potwor4"><a href="#" title="Potwór 4"></a></li>
-
</ul>
Lista posiada atrybut id w celu szybkiego jej znalezienia przez JavaScript, ponadto każdy z elementów listy posiada (w tym przypadku) unikatowy atrybut class niezbędny dla nas w późniejszym zidentyfikowaniu poszczególnych pozycji dla styli CSS.
Po drugie CSS
Menu powinno być dostępne dla użytkownika przez cały czas, nawet w przypadku gdy użytkownik znajduje się poza łamaniem strony, więc pozycje menu ustawiamy na fixed:
-
ul#boxNavi {
-
position: fixed;
-
margin: 0px;
-
padding: 0px;
-
top: 60px;
-
left: 0px;
-
list-style: none;
-
z-index:9999;
-
}
-
ul#boxNavi li {
-
width: 100px;
-
}
Dodatkowo z uwagi na fakt, że menu nie powinno być przysłaniane przez żadne inne elementy znajdujące się na stronie, ustawiamy atrybut z-index na 9999 (czyli najwyższe na stronie 
)
Kolejny element to linki w liście. Poza standardowymi atrybutami warto zauważyć minusowy atrybut margin-left, został on wprowadzony w celu ukrywania elementów menu poza obszarem widzialnym na stronie. Później przy pomocy JavaScriptu, elementy te będą pokazywane bądź ukrywane w zależności czy użytkownik najedzie na lub zjedzie z danego elementu.
-
ul#boxNavi li a {
-
display: block;
-
width: 100px;
-
height: 100px;
-
background-color:#000;
-
background-repeat:no-repeat;
-
background-position:center center;
-
border:1px solid #fff;
-
margin-left: -85px;
-
}
Na koniec grafika, czyli dodajmy ikonki do poszczególnych pozycji menu:
-
ul#boxNavi .potwor1 a{background-image: url(../images/1.png);}
-
ul#boxNavi .potwor2 a{background-image: url(../images/2.png);}
-
ul#boxNavi .potwor3 a{background-image: url(../images/3.png);}
-
ul#boxNavi .potwor4 a{background-image: url(../images/4.png);}
Wprawmy wszystko w ruch – JavaScript
Na potrzeby menu wykorzystamy bibliotekę do JavaScriptu – jQuery (jak zwykle). By wprawić nasze menu w ruch wykorzystamy funkcje jQuery – animate().
-
$(function() {
-
$('#boxNavi > li').hover(
-
function () {
-
$('a',$(this)).stop().animate({'marginLeft':'-5px'},300);
-
},
-
function () {
-
$('a',$(this)).stop().animate({'marginLeft':'-80px'},300);
-
}
-
);
-
});
Działanie skryptu jest naprawdę proste. Na zdarzenie hover link znajdujący się w elemencie listy, którego dotyczy zdarzenie zmienia wartość margin-left na -5px, a dzięki funkcji jQuery, cała czynność jest przyjemnie animowana i trwa 300ms. W momencie gdy zjedziemy kursorem z elementu, wykonywany jest drugi fragment kodu, a mianowicie wykorzystując tą samą animację atrybut margin-left jest zmieniany na -80px, co powoduje jego częściowe ukrycie. Ważną funkcją która również jest wywoływana jest stop(), która zatrzymuje animacje wszystkich elementów znajdujacych się na stronie – uzyskujemy dzięki temu efekt zatrzymania i cofnięcia animacji w przypadku szybkiego przeskakiwania pomiędzy elementami menu.
Końcowe udoskonalenia
No i proszę menu jest już działające i w pełni funkcjonalne, teraz możemy się zastanowić co jeszcze możemy dla niego zrobić.
Otóż możemy zaokrąglić rogi elementów menu. I tu mamy 2 opcje. Za pomocą CSS-ów, ale nie wspierając Internet Explorera, wystarczy że do styli dodamy:
-
ul#navigation li a {
-
display: block;
-
margin-left: -85px;
-
width: 100px;
-
height: 70px;
-
background-color:#CFCFCF;
-
background-repeat:no-repeat;
-
background-position:center center;
-
border:1px solid #AFAFAF;
-
-moz-border-radius:0px 10px 10px 0px;
-
-webkit-border-bottom-right-radius: 10px;
-
-webkit-border-top-right-radius: 10px;
-
-khtml-border-bottom-right-radius: 10px;
-
-khtml-border-top-right-radius: 10px;
-
}
Druga opcją jest wykorzystanie jQuery rounded corners, dzięki któremu mamy wsparcie także dla IE. Użycie pluginu jest naprawdę proste, ponieważ po zlinkowaniu skryptu organiczna się do wywołania funkcji na document ready
-
$('#boxNavi a').corners("10px 0px");
Innym udoskonaleniem może być dodanie przeźroczystości, co możemy zrobić również za pośrednictwem szablonów CSS:
-
ul#navigation li a {
-
display: block;
-
margin-left: -85px;
-
width: 100px;
-
height: 70px;
-
background-color:#CFCFCF;
-
background-repeat:no-repeat;
-
background-position:center center;
-
border:1px solid #AFAFAF;
-
-moz-border-radius:0px 10px 10px 0px;
-
-webkit-border-bottom-right-radius: 10px;
-
-webkit-border-top-right-radius: 10px;
-
-khtml-border-bottom-right-radius: 10px;
-
-khtml-border-top-right-radius: 10px;
-
opacity: 0.6;
-
filter:progid: DXImageTransform.Microsoft.Alpha(opacity=60);
-
}
5 komentarze do “Wysuwane menu w 10 minut w wykorzystaniem CSS i jQuery”
Witaj, mam jedną prośbę. Możesz mi wytłumaczyć co robi
$thisw$('a',$(this)).stop()....)Jasne. this odnosi się do elementu, którego dotyczy zdarzenie – w tym przypadku konkretnego elementu #boxNavi > li.
)
Na potrzeby prezentowanego menu chcemy, aby link (element a) był animowany – ale nie chcemy żeby animowane były wszystkie elementy a – co miałoby miejsce w przypadku wywołania
$('a').stop().animate({'marginLeft':'-5px'},300);, a chcemy, żeby animował się element a zawarty w elemencie listy którego dotyczy zdarzenie. (mam nadzieję ze nie zagmatwałem za bardzoDlatego nadajemy selektoromi kontekst $(‘a’,$(this)) – czyt. znajdź element a, ale szukaj we fragmencie DOM zawartym w $this (czyli #boxNavi > li którego dotyczy zdarzenie hover).
Mam nadzieję, że ot trochę wyjaśniło sprawę –Cheers
super efekt i tak naprawdę w kilka linijek kodu
Ja nie mam siły pisać tutoriali, dlatego bardzo fajnie, że ktoś tworzy takie materiały. ;] Niby wszystko jest proste, ale czasem dobrze jest mieć referencję w razie gdyby coś nie działało. ;]
no to prawda, zawsze przyda się dobrze napisany tutorial
poza tym dobrze wiedzieć z tą funkcją stop() 