Subscribe to our RssFollow us on Twitter!Follow us on Facebook!

Tutorial jQuery: Mega Drop Down Menu

Tutorial Jquery — 01 giugno 2012
Tutorial jQuery - Mega Drop Down Menu

Drop Down Menu in Jquery
Funzione molto utile quella che andiamo a presentare nel seguente articolo: al passaggio del mouse, o previa click su uno dei link disponibili nel menù, questi si espanderanno in verticale per mostrare dei sub-menu altrettanto espandibili in orizzontale, il tutto attraverso un’efficace animazione di cui potremo settare i parametri tramite poche righe di Html. Ma andiamo con ordine, creando una pagina Index.html. Creiamo nella directory del sito tre cartelle: css e js. Scaricate in fondo all’articolo le risorse e copiatele nelle relative cartelle e andiamo ad analizzare l’esempio di menù colore bianco (white). Nell’<head> del sito collegate alla pagina i files necessari al funzionamento del plugin:

<!--DROPDOWN MENU-->

<link href="css/skins/white.css" rel="stylesheet" type="text/css" />
<link href="css/dcmegamenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">

$(document).ready(function($){
	$('#mega-menu-1').dcMegaMenu({
		rowItems: '3',
		speed: 0,
		effect: 'slide',
		event: 'click',
		fullWidth: true
	});
	$('#mega-menu-2').dcMegaMenu({
		rowItems: '1',
		speed: 'fast',
		effect: 'fade',
		event: 'click'
	});
	$('#mega-menu-3').dcMegaMenu({
		rowItems: '2',
		speed: 'fast',
		effect: 'fade'
	});
	$('#mega-menu-4').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade'
	});
	$('#mega-menu-5').dcMegaMenu({
		rowItems: '4',
		speed: 'fast',
		effect: 'fade'
	});
	$('#mega-menu-6').dcMegaMenu({
		rowItems: '3',
		speed: 'slow',
		effect: 'slide',
		event: 'click',
		fullWidth: true
	});
	$('#mega-menu-7').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'slide'
	});
	$('#mega-menu-8').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade'
	});
	$('#mega-menu-9').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade'
	});
});
</script>

<!--END-->

I sette Id mega-menu-[numero] hanno animazioni e colori differenti, e sono già impostati per funzionare perfettamente previa corretto inserimento nei vostri <div> e nelle vostre liste. Scegliamo di utilizzare l’esempio di menù colore bianco: la classe del <div> sarà “white“, e come tipologia di animazione e interazione scegliamo l’Id del “mega-menu-7“:

<!--DROPDOWN MENU-->

			<div class="white">
<ul id="mega-menu-7" class="mega-menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a>
		<ul>
			<li><a href="#">Mobile Phones &#038; Accessories</a>
				<ul>
					<li><a href="#">Product 1</a></li>
					<li><a href="#">Product 2</a></li>
					<li><a href="#">Product 3</a></li>
				</ul>
			</li>
			<li><a href="#">Desktop</a>
			    <ul>
					<li><a href="#">Product 4</a></li>
					<li><a href="#">Product 5</a></li>
					<li><a href="#">Product 6</a></li>
					<li><a href="#">Product 7</a></li>
					<li><a href="#">Product 8</a></li>
					<li><a href="#">Product 9</a></li>
				</ul>
			</li>
			<li><a href="#">Laptop</a>
			    <ul>
					<li><a href="#">Product 10</a></li>
					<li><a href="#">Product 11</a></li>
					<li><a href="#">Product 12</a></li>
					<li><a href="#">Product 13</a></li>
				</ul>
			</li>
			<li><a href="#">Accessories</a>
			    <ul>
					<li><a href="#">Product 14</a></li>
					<li><a href="#">Product 15</a></li>
				</ul>
			</li>
			<li><a href="#">Software</a>
			  <ul>
				<li><a href="#">Product 16</a></li>
					<li><a href="#">Product 17</a></li>
					<li><a href="#">Product 18</a></li>
					<li><a href="#">Product 19</a></li>
			  </ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Sale</a>
		<ul>
			<li><a href="#">Special Offers</a>
	<ul>
		<li><a href="#">Offer 1</a></li>
		<li><a href="#">Offer 2</a></li>
		<li><a href="#">Offer 3</a></li>
	</ul>
	</li>
	<li><a href="#">Reduced Price</a>
	<ul>
		<li><a href="#">Offer 4</a></li>
		<li><a href="#">Offer 5</a></li>
		<li><a href="#">Offer 6</a></li>
		<li><a href="#">Offer 7</a></li>
	</ul>
</li>
	<li><a href="#">Clearance Items</a>
	<ul>
		<li><a href="#">Offer 9</a></li>

	</ul>
</li>
	<li class="menu-item-129"><a href="#">Ex-Stock</a>
	<ul>
		<li><a href="#">Offer 10</a></li>
		<li><a href="#">Offer 11</a></li>
		<li><a href="#">Offer 12</a></li>
		<li><a href="#">Offer 13</a></li>
	</ul>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
	<li><a href="#">About Page 1</a></li>
	<li><a href="#">About Page 2</a></li>

</ul>
</li>
<li><a href="#">Services</a>
<ul>
	<li><a href="#">Service 1</a>
	<ul>
		<li><a href="#">Service Detail A</a></li>
		<li><a href="#">Service Detail B</a></li>
	</ul>
</li>
<li><a href="#">Service 2</a>
	<ul>
		<li><a href="#">Service Detail C</a></li>
	</ul>
</li>
	<li><a href="#">Service 3</a>
	<ul>
		<li><a href="#">Service Detail D</a></li>
		<li><a href="#">Service Detail E</a></li>
		<li><a href="#">Service Detail F</a></li>
	</ul>
</li>
	<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

<!--DROPDOWN END-->

Naturalmente le combinazioni possibili sono molteplici: possiamo variare i parametri di un singolo Id modificando la porzione di Javascript interessanta:

$('#mega-menu-7').dcMegaMenu({
		rowItems: '10',
		speed: 'slow',
		effect: 'slide'
		event: 'click',
	});

In questo modo, ad esempio, possiamo fare in modo che le colonne del dropdown siano 10, che si espandano con la velocità minima e l’effetto slide, tramite il click del mouse sul link (prima era impostato il rollover). Per creare i sub-menus basterà posizionare all’interno dei <li> (i punti della lista) ulteriori <ul> (le liste) con altrettanti <li>. Potete naturalmente modificare le immagini dei pulsanti aprendole con Photoshop: il loro percorso è css/skins. Se invece volete eliminarle del tutto, aprite il css del colore prescelto (in questo caso white) e “remmate” le porzioni di codice relative alle immagini, come nell’esempio sottostante:

.white ul.mega-menu {/*background: #ccc  url(images/bg_white.png) */ repeat-x 0 -80px; width: 100%; height: 40px; /*border-right: 1px solid #afafaf;border-left: 1px solid #afafaf;*/  position: relative;}

.white ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; /*background: url(images/bg_white.png)*/ repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;}

.white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;}

Per qualsiasi dubbio, non esitate a interpellarci!

Questo fantastico e comodissimo dropdown menu è ad opera di designchemical.com.

download plugin

Alla prossima!

Autore

Magoo

Web Designer da lungo tempo. La mia e' una passione che sembra non avere mai fine. Ho lavorato per molti anni come Web Designer e Digital Artist per alcune aziende pubblicitarie, per poi prendere la decisione di mettermi in proprio. Adesso mi occupo principalmente di elaborazione grafica 3D, ma non disdegno creare pagine web, siti e portali di ogni genere. Mi puoi seguire sul mio Blog, accerchiarmi su Google+ o diventarmi amico su Facebook

  • http://provendatingadviceformen.blogspot.com dating tutorial

    I blog frequently and I really appreciate your information.

    The article has really peaked my interest.
    I will book mark your site and keep checking for new information about once
    per week. I subscribed to your Feed as well.

  • http://www.valloshow.it gluca

    Alto livello!Bello!

    • Magoo

      @gluca thanks!