Sliding menu con jQuery

Oggi vedremo come realizzare un ottimo menu con effetto slider, grazie all’ausilio dell’onnipotente jQuery. Creiamo innanzitutto una pagina javascript con il nostro editor preferito (personalmente uso Notepad++), chiamiamola sliding_effect e trasciniamola in una nuova cartella che chiameremo js, creata nella directory del nostro sito. Nel pacchetto in download alla fine dell’articolo, trovate un ulteriore file .js da trascinare nella medesima cartella: jquery.js.

Create anche il file .css, chiamatelo styles e trascinatelo nella cartella css.

Ora richiamiamo css e javascript nell’<head> del nostro index col seguente html:

Creiamo ora la lista degli elementi in sliding nel :



Navigation Title
 Link 1
 Link 2
 Link 3
 Link 4
 Link 5

Una volta salvata la pagina possiamo scrivere il nostro css. Aprite il file styles.css contenuto nella cartella css e scrivete quanto segue:

body

{
 margin: 0;
 padding: 0;
 background: #1d1d1d;
 font-family: "Lucida Grande", Verdana, sans-serif;
 font-size: 100%;
 }

ul#sliding-navigation
 {
 list-style: none;
 font-size: .75em;
 margin: 30px 0;
 }

ul#sliding-navigation li.sliding-element h3,
 ul#sliding-navigation li.sliding-element a
 {
 display: block;
 width: 150px;
 padding: 5px 15px;
 margin: 0;
 margin-bottom: 5px;
 }

ul#sliding-navigation li.sliding-element h3
 {
 color: #fff;
 background: #333;
 border: 1px solid #1a1a1a;
 font-weight: normal;
 }

ul#sliding-navigation li.sliding-element a
 {
 color: #999;
 background: #222;
 border: 1px solid #1a1a1a;
 text-decoration: none;
 }

ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Ora non resta che scrivere il codice javascript nel file sliding_effect.js.

$(document).ready(function()

{
 slide("#sliding-navigation", 25, 15, 150, .8);
 });

function slide(navigation_id, pad_out, pad_in, time, multiplier)
 {
 // creates the target paths
 var list_elements = navigation_id + " li.sliding-element";
 var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
 var timer = 0;

// creates the slide animation for all list elements
 $(list_elements).each(function(i)
 {
 // margin left = - ([width of element] + [total vertical padding of element])
 $(this).css("margin-left","-180px");
 // updates timer
 timer = (timer*multiplier + time);
 $(this).animate({ marginLeft: "0" }, timer);
 $(this).animate({ marginLeft: "15px" }, timer);
 $(this).animate({ marginLeft: "0" }, timer);
 });

// creates the hover-slide effect for all link elements
 $(link_elements).each(function(i)
 {
 $(this).hover(
 function()
 {
 $(this).animate({ paddingLeft: pad_out }, 150);
 },
 function()
 {
 $(this).animate({ paddingLeft: pad_in }, 150);
 });
 });
 }

Ora che il nostro menu è pronto, non resta che posizionare la lista nel vostro layout per visualizzarlo.

Dal css potete cambiarne colori e dimensioni, dal javascript (sliding_effect .js) potete intervenire per modificare la velocità dello slide e l’ammontare della distanza di spostamento dei pannelli durante il rollover e rollout (pad_in e pad_out).

Fonte

Alla prossima!