Tutorial jQuery: efektowne, rozsuwane menu poziome

jQuery

Poziom średnio-zaawansowany

W dzisiejszym tutorialu stworzymy proste menu poziome z obrazkami i animacją.

Tutorial jQuery – rozsuwane menu poziome

Całość wykonamy w kilku prostych krokach.

1. Potrzebne pliki

Potrzebne nam będą:

– pliki css/style.css oraz js/menu_funcs.js na definicje naszych stylów i kodu JavaScript do obsługi menu

– 5 (lub więcej jeśli chcemy szersze menu) obrazków; w naszym tutorialu użyjemy obrazków o wymiarach 320x200px

– biblioteki jQuery oraz pluginu jquery.easing dla efektów animacji

2. Szkielet HTML

W dokumencie HTML (index.html) tworzymy szkielet naszego menu:

<div id="jq_menu">
  <ul>
  <li class="menu_item_1">
    <a href="http://www.google.com/" target="_blank">A</a>
  </li>

  <li class="menu_item_2">
    <a href="http://www.google.com/" target="_blank">B</a>
  </li>

  <li class="menu_item_3">
    <a href="http://www.google.com/" target="_blank">C</a>
  </li>

  ... itd - kolejne pozycje ...
  </ul>
</div>

Należy zwrócić uwagę na:

– ID elementu HTML (kontenera), który zawiera menu; tutaj: jq_menu,

– ilość elementów musi być adekwatna do szerokości elementów (kontenera, listy …) w definicji stylów CSS.

3. Style

Zdefiniujmy zatem style CSS dla naszego menu.

Najważniejsze w poniższym wycinku:


a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    color: #ffff00;
    text-decoration: none;
}

img {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

/* menu - main container */

div#jq_menu {
    width: 640px;
    height: 200px;
    padding: 0px;
    margin: 20px auto 0px 20px;
}

div#jq_menu ul {
    border: 0px;
    display: block;
    list-style-type:none;
    width: 800px;
    height: 200px;
    margin: 0px;
    padding: 0px;
}

div#jq_menu ul li {
    float: left;
}

div#jq_menu ul li a {
    display: block;
    border-right: 1px solid #ffffff;
    width: 90px;
    height: 200px;
}

/* menu items */
div#jq_menu ul li.menu_item_1 a {
    background: url(../img/menu_img_1.jpg);
}

div#jq_menu ul li.menu_item_2 a {
    background: url(../img/menu_img_2.jpg);
}

div#jq_menu ul li.menu_item_3 a {
    background: url(../img/menu_img_3.jpg);
}

/* ... kolejne ... */

Tak przygotowane style zapewnią odpowiedni wygląd dla naszego menu.


4. Kod JavaScript

Nasz kod obsługi bazuje na jQuery oraz pluginie jquery.easing, który oferuje efekty animacji.

Kod na pierwszy rzut oka może wyglądać na nieco skomplikowany, w gruncie rzeczy jest bardzo prosty.

Definiujemy zachowanie dla zdarzenia hover poszczególnych elementów menu (ul > li > a), oraz „powrót”, czyli zachowanie przywracające stan pozycji menu po zdarzeniu hover.

Oto zawartość naszego pliku js/menu_funcs.js:


$(document).ready(function () {
    
    $("div#jq_menu ul li a").hover(function() {
        
        if ($(this).is(":animated")) {
            $(this).stop().animate({width: "300px"}, 
                {duration: 360, easing: "easeOutQuad"});
        } else {
            $(this).stop().animate({width: "300px"}, 
                {duration: 360, easing: "easeOutQuad"});
        }
    },
    turn_back = function () {
        
        if ($(this).is(":animated")) {
            $(this).stop().animate({width: "90px"}, 
                {duration: 360, easing: "easeInOutQuad"});
        } else {
            $(this).stop(":animated").animate({width: "90px"}, 
                {duration: 360, easing: "easeInOutQuad"});
        }
    });
    
});

W animacji ustawiamy szerokość elementów menu po najechaniu na nie kursorem i po zdjęciu kursora. Są także parametry animacji, które możemy dostosować:

– duration,

– easing (w przykładzie „easeInOutQuad”).

Animacje bazują na pluginie jquery.easing. Dostępna jest cała lista różnych animacji, z którymi warto zapoznać się poprzez analizę kodu tego rozszerzenia.

Demo online:

http://directcode.eu/samples/jquery_tutorial_sliding_menu/index.html

Pliki do pobrania na GitHub:

https://github.com/dominik-w/js_html5_com/tree/master/jquery_tutorial_sliding_menu

Podsumowanie

Tym samym w kilku prostych krokach stworzyliśmy efektowne menu poziome z obrazkami. Skorzystaliśmy także z efektów animacji oferowanych przez interesujący plugin jquery.easing.

Zachęcam do własnych eksperymentów z jQuery.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.