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

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>

CSS

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');}

JavaScript

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);
    }
  }); 
});

Závěr

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:

(1555)

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

Tomáš Hubík
Telefon+420 774 510 211
E-mailTomas.Hubik1@gmail.com
BydlištěOkres Opava
SkypeTomasHubik
74864131
SpolupracujiÚčetní Opava
Napište nám
Odeslat dotaz
Odeslat dotaz