jQuery animované menu |
Dnes si ukážeme, jak vytvořit jednoduché, ale efektní animované menu pomocí knihovny Jquery. Návod bude rozdělen do tří sekcí HTML, CSS a JavaScript. Výsledek bude vypadat takto:
HTML kód našeho menu je velmi jednoduchý. Zkládá se z obalu a jednotlivých položek menu, které jsou uloženy v elementu span, aby se daly zarovnat na střed. Celý HTML kód vypadá takto:
<!-- Obal našeho menu -->
<div id="colored_menu">
<!-- Položka menu -->
<span>
<a href="" class="class1">
<span>Lorem ipsum</span>
</a>
</span>
<span>
<a href="" class="class2">
<span>Sit ames un</span>
</a>
</span>
<span>
<a href="" class="class3">
<span>Principy sit</span>
</a>
</span>
<span>
<a href="" class="class4">
<span>Dolores its</span>
</a>
</span>
</div>
Kaskádové styly jsou zajímavější. Nejdříve nastavíme náš obal s id #colored_menu. Bude stačit nastavit šířku a zarovnání textu na střed:
#colored_menu{
width:750px; /* Nastavení šířky */
text-align: center; /* Zarovnání textu na střed*/
}
Další na řadě je položka menu. Položka menu je umístěna v elementu <span>, který nám zajistí zarovnání položek uprostřed našeho obalovacího elementu. Elementu span nastavíme zobrazování (display) jako block-inline. Zbytek položek je vcelku jasný:
#colored_menu span{
display: inline-block;
}
#colored_menu a{
float:left;
width:175px;
width:60px;
height:70px;
font-size:15px;
color:white;
text-transform: uppercase;
overflow:hidden;
-moz-border-radius: 3px;
border-radius: 3px;
}
#colored_menu a span{
float:left;
width:160px;
padding:25px 0 25px 0;
text-align: right;
background-repeat: no-repeat;
background-position: 12px center;
}
Poté pouze nastavní jednotlivým třídám našich odkazů ikonku a barvu a co se vzhledu týče, máme hotovo:
#colored_menu a.class1{background-color:#18a0b2;}
#colored_menu a.class1 span{background-image:url('./ico_clock.png');}
#colored_menu a.class2{background-color:#9dc61e;}
#colored_menu a.class2 span{background-image:url('./ico_bulb.png');background-position: 18px center;}
#colored_menu a.class3{background-color:#d21515;}
#colored_menu a.class3 span{background-image:url('./ico_earth.png');}
#colored_menu a.class4{background-color:#e26920;}
#colored_menu a.class4 span{background-image:url('./ico_thumb.png');}
Poslední částí menu je JavaScript. V tom neprovedeme nic jiného, než že po najetí myši zanimujeme šířku na 175px a po odjetí ji zanimujeme zpět. Jak vidíte, v kódu jsou již podmínky pro případ, kdy bude mít položka nastavenu třídu active a tudíž po najetí se s ní nic nestane:
// Jakmile je dokument připraven
$(document).ready(function(){
// Po najetí myši na položku
$("#colored_menu a").hover(function(e){
// Pokud položka není vybraná
if (!$(this).hasClass("active")){
// Animace šírky položky.
$(this).stop().animate({width: "175px"}, 200);
}
},function(){ // Odjetí myši
if (!$(this).hasClass("active")){
// Animace šírky položky.
$(this).stop().animate({width: "60px"}, 200);
}
});
});
A máme hotovo. Jedná se o vcelku jednoduché, ale hezké animované menu. Pod tímto návodem jsem Vám vytvořil ještě další jQuery animované menu jako inspiraci pro vaši tvorbu:
Pokud se Vám článek líbí, podpořte další tím, že dáte "Like" na Facebook nebo +1 na Google+ nebo nasdílíte tento článek dál. Jen na základně vaší zpětné vazby budu moci zjistit, zda-li mám psát dál, nebo ne.
Kontakt |