immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Menu Verticale con Effetto Fisarmonica – versione history

di MaiNick | 22 Apr 2011 | jQuery | 26 Commenti

Menu Verticale con jQuery

Dopo aver ricevuto abbastanza e-mail e feedback in generale riguardo ad alcune richieste di modifiche, ho deciso di sviluppare una seconda versione del menu verticale con effetto a fisarmonica sperando di soddisfare la maggior parte degli utenti.

In questa seconda versione del tutorial aggiungiamo la possibilità di aprire l’elenco a tendina tramite un secondo bottone così da rimanere al link della voce del menu principale la sua funzione predefinita.

Documento HTML

Quello che andiamo a cambiare alla nostra pagina HTML è l’aggiunta di una freccia down che avrà la funzione di avviare l’effetto a fisarmonica per visualizzare le voci del sotto menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu sub-menu-open">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Aggiungiamo un’altra classe CSS sub-menu-open all’elenco del sotto menu per indicare quale di default è aperto inizialmente al caricamento della pagina.

Foglio di stile CSS

Abbiamo modificato le proprietà di alcuni selettori per utilizzare la freccia come bottone di apertura, aggiunta la classe per il sotto menu aperto di default e aggiunto il cursore di tipo puntatore quando andiamo sopra all’immagine:

ul {
	margin: 0;
	padding: 0;
}

ul.container {
	width: 240px;
	margin: 0 auto;
	padding: 50px;
}

li {
	list-style: none;
	text-align: left;
}

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title {
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
}

li.title:hover {
	background-color: #f40000;
}

li.title a {
	/* Voce del menu principale */
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

li.title img {
	/* freccia apertura sotto menu */
	float: right;
	cursor: pointer;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

.sub-menu-open {
	display: block;
}

Effetti con jQuery

Gli script che andremo ad includere nella pagina sono gli stessi, ma bisogna dare uno sguardo allo script che gestisce l’effetto per vedere le modifiche apportate:

$(document).ready(function(){

	/* Cambiare l'effetto da utilizzare */
	$.easing.def = "easeOutBounce";

	/* Associare una funzione all'evento click sul link */
	$('li.title img').click(function(e){

		/* Trovare l'elenco a discesa che corrisponde al menu cliccato: */
		var subMenu = $(this).parent().next();

		/* Trovare il sotto menu che corrisponde alla voce cliccata */
		$('.sub-menu').not(subMenu).slideUp('slow');
		subMenu.stop(false,true).slideToggle('slow');

		/* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
		e.preventDefault();
	})

});

L’unica modifica effettuata riguarda il selettore su cui catturiamo l’evento click per aprire il corrispondente sotto menu.

Versione History

Ho deciso di chiamare questo secondo tutorial in questo modo perché un’altra importante richiesta ricevuta è quella di mantenere il sotto menu aperto nella pagina raggiunta da un link di uno dei sotto menu.

<?php $array_label_menu = array('jquery' => '', 'php' => '', 'css' => '', 'firefox' => '') ?>
<?php $submenu_open = (isset($_GET['menu']) &amp;&amp; $_GET['menu']!='') ? $_GET['menu'] : 'php'; ?>
<?php $array_label_menu[$submenu_open] = 'sub-menu-open'; ?>

Utilizzando un array indichiamo come chiavi di valori nulli le parole che specificano la nostra voce del menu principale e utilizzando una valore che ci inviamo tramite l’array globale $_GET andiamo a inserire la classe CSS sub-menu-open come valore alla chiave corrispondete al $_GET['menu'] inviato.

Adesso vediamo come si modifica la parte riguardo al menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/?menu=firefox">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu <?php echo $array_label_menu['firefox'] ?>">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/?menu=firefox">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/?menu=firefox">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Demo Download

Tags: , ,

26 Commenti

  1. joe ha detto:

    Che dire sie un grande..

    Grazie 1000

    n.b.
    🙂 però devo ancora provarlo ahahaha

    Ciao

  2. mik ha detto:

    ciao e complimenti per il menù. domandone.
    sto usando il tuo codice per un menù dinamico, che pesca voci da un db in maniera non sequenziale, ma praticando degli ordinamenti.
    ho mixato i codici, e se lancio la pagina con la proprietà disattivando
    display: none;
    mi stampa correttamente tutte le voci.
    quando poi però vado a chiudere e riaprire il menù, per ognuno degli elementi title mi espande solamente una voce submenu.
    hai idea di come si possa risolvere?
    grazie e buona pasqua

    • MaiNick ha detto:

      Ciao @mik forse non ho capito bene il tuo domandone, comunque togliendo la proprieta display: none; dal selettore del sotto menu .sub-menu tutti gli elenchi dei sotto menu saranno visualizzati al caricamento della pagina, poi cliccando sulla freccia di una delle voci del menu principale sarà eseguito lo stato contrario a quello corrente; dunque se aperto verrà chiuso e attualmente farà lo stesso per tutti gli altri sotto menu.
      Se non ho individuato il tuo problema o almeno non ti ho chiarito bene le idee, sono qui a disposizione.
      Buona pasqua anche a te.

  3. Pierhagi ha detto:

    Ciao

    è possibile fare il menù visualizzando le Categorie in orizzontale e le Sottocategorie che rimangano sempre in verticale?

    Pier

  4. Mario ha detto:

    Ciao,siccome non sono un genio in php..la prima parte del codice dove la mettiamo?ho scaricato i file e ho fatto come hai scritto ma quando clicco su uno dei sottomenu la pagine non viene caricata..

    • MaiNick ha detto:

      Ciao Mario,
      innanzitutto scusami se ti rispondo solo ora, o forse avrai già risolto il tuo dubbio, ma comunque rispondo perché può essere utile a qualche altro amico nostro.
      Allora la prima parte dell’articolo, il codice del paragrafo “Documento HTML”, rappresenta il menu dunque lo inserisce nella pagina in cui visualizzare il tuo menu. La parte di codice riferita allo stile del menu “Foglio di stile CSS”, lo puoi incorporare alla pagina tramite l’elemento all’interno della sezione , oppure collegarlo alla pagina in un documento .css tramite l’elemento , da inserire sempre nella sezione . Lo stesso discorso vale per il codice JavaScript del paragrafo “Effetti con jQuery”, lo puoi incorporare o collegarlo alla pagina tramite l’elemento .
      Se invece ti riferivi solo al codice PHP, quindi all’ultimo paragrafo “Versione History”, la prima parte del codice va inserito in ogni pagina navigabile da menu. Questa è l’unica differenza rispetto all’altro articoli per creare un menu verticale con jQuery.

  5. doc ha detto:

    Ciao,
    complimenti per lo script….

    sto cercando una versione che gestisca l’hover del mouse (apertura automatica) e che visualizzi un contenuto con un immagine o html.
    in effetti piu’ che un menu sarebbe uno slider verticale con pannelli….

  6. doc ha detto:

    grazie! ci smanetto un po’!!

  7. Nick ha detto:

    Ciao Orazio,

    il tuo script è grandioso. Vorrei applicarlo al mio sito web. Ti spiego. Se visiti il mio sito noterai che in basso ci sono tante diverse categorie di annunci. Vorrei sostituire le categorie in forma di menu espandibile. Quindi richiamare le variabili dal file PHP all’interno del menu.
    Come si può fare? Io non sono un programmatore, quindi ho bisogno di spiegazioni un pò semplificate. Ciao grande!

  8. pino ha detto:

    ciao, è possibile creare un sotto menu del sotto menu?
    grazie

  9. Micky ha detto:

    E’ davvero molto bello, c’e’ solo un piccolo problema che non riesco a risolvere.

    E se la voce del menu’ fosse cosi’ lunga da dover andare a capo ??
    Come si potrebbe fare ? E’ qualche giorno che ci sbatto la testa ma nulla…:-(

    In ogni caso, ottimo script, grazie 1000 !!!

  10. K ha detto:

    Ciao Orazio.

    Come prima cosa volevo ringraziarti per la guida ^^
    Poi volevo chiederti se potresti aiutarmi a capire perché non riesco a far funzionare questo menu _._

    Premetto che non sono niubbo ma neanche un genio in questo campo, e dato che il problema probabilmente sta in quel che ho fatto con gli script JScript, volevo chiederti se potresti dirmi un po’ più dettagliatamente cosa farci ^^’

    Allora, sto cercando di inserirlo in un tema in WordPress, e leggendo anche la risposta al commento poco sopra: le righe del menu (in “Documento HTML”) l’ho messe in un div della sidebar (sidebar.php), ed il menu appare nel sito; mentre lo stile del menu (in “Foglio di stile CSS”) l’ho messo nello style.css.
    Poi, nell’altro articolo (versione non History), hai scritto di mettere le tre righe per richiamare le librerie e gli script e l’ho fatto mettendo quelle tre righe nell’header.php.
    Poi ho messo i due script (“jquery.easing.1.3” e “script”) in una cartella (“jscript”) che ho creato nel tema, e nelle tre righe per richiamare gli script (nell’header.php) ho sia scritto l’URL degli script, sia provato lasciando solo nome ed estensione, ma non funziona.

    Al sito sto lavorando in locale: forse potrebbe essere questo il problema?

    Scusa se ho scritto tanto, ma non sapevo come esporre bene il problema ^^’

    Spero in una risposta risolutiva ^^

    Ciao,
    K

    • MaiNick ha detto:

      Ciao “K”, grazie dei complimenti.
      Se hai problemi nel caricare gli script "jquery.easing.1.3.js" e "script.js" che hai messo nella cartella “jscript”, inserisci il seguente codice in header.php per collegarli al tema:

      <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>'/jscript/jquery.easing.1.3.js">
      <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jscript/script.js">

      ti ricordo che la cartella "jscript" devi essere presente nella cartella del tema che stai utilizzando e controlla se il tema già non includa la libreria jQuery.

      Fammi sapere.

      • K ha detto:

        Funziona! XD
        Dopo aver aggiunto quelle righe funziona alla grande ^^

        Guarda, non immagini quanto ti ringrazio!
        Sono proprio contento che tu sia riuscito ad aiutarmi ^^

        Sperando che la tua risposta possa essere d’aiuto anche ad altri, ti saluto e ti ringrazio nuovamente ^^

        Ciao, ^^
        K

  11. Johnny ha detto:

    Ciao!
    Proprio un bel menu, era proprio quello che cercavo 🙂
    Complimenti e grazie per aver condiviso questa risorsa.

    Sto sviluppando un nuovo sito e l’ho inserito senza problemi, funziona alla grande proprio come nella Tua demo.
    Ho però 2 problemini che non riesco a risolvere:

    1) Quando clicco su una voce sub-menu per aprire la pagina relativa, il menu si richiude e io vorrei che rimanesse aperto.
    (Ho visto anche il secondo tutorial con la freccettina sulle voci del menu, ma preferisco usare questo per il sito che sto realizzando).

    2) Quando clicco su una voce sub-menu vorrei che la voce cliccata fosse evidenziata per far capire al visitatore a quale voce di menu corrisponde la pagina che sta vedendo.

    Spero che tu possa aiutarmi a risolvere questi 2 problemini.
    Ci sto sbattendo la testa da giorni ormai, senza venirne a capo.
    In ogni caso grazie ancora per aver messo a disposizione di tutti un così bel menu.

    J

  12. Gabrimay ha detto:

    Ciao, ottimo tutorial, vorrei sapere però se è possibile avere l’effetto del submenu che resta aperto pur senza il pulsantino a lato della barra… insomma una via di mezzo tra i due tutorial effetto fisarmonica che hai pubblicato. non so se mi sono spiegata

    grazie

    • MaiNick ha detto:

      Ciao Grabrimay, basta eliminare il tag img dal selettore utilizzato alla riga 7 del codice scritto nel paragrafo Effetti con jQuery. In questo modo l’effetto funziona con l’evento click sull’intera voce del menu principale.

      • Gabrimay ha detto:

        Gentilissimo… una domanda però… se invece volessi apportare le modifiche per far si che il menu rimanesse aperto una volta cliccato sul link…nel tuo file precedente? (precedente tutorial?)
        perché ho imbastito il sito e il menu con quello.. con un sacco di modifiche e se posso cerco di evitare di rifare tutto da capo 🙁 grazie!

  13. Carlo ha detto:

    Bravo ottimo e utile menù – mi risolverà un problema riguardo a un sito interent (appena finito ti mand il Link così giudicherai tu grazie ancora

  14. lorenzo ha detto:

    Ciao!!! domanda stupida… è possibile renderlo orizzontale?

  15. ilperu ha detto:

    Ciao, ottimo lavoro.

    Una domanda, è possibile passando da una pagina ad’un altra, oltre che a mantenere il menù aperto, evidenziare la voce del sottomenù selezionata?

    Grazie, lo renderebbe perfetto per moltissimi impieghi

    Saluti

    • MaiNick ha detto:

      Ciao, lo puoi già fare, ad esempio inserendo il seguente codice nel foglio di stile: .sub-menu-open li { background-color: #eee; } otteniamo lo sfondo grigio solo per le voci del sotto-menu aperto.

  16. Maria ha detto:

    Ciao, il tuo menu` e` proprio quello che mi serviva. Solo un richiesta: potresti renderlo responsive in modo da poter impostare una larghezza maggiore senza avere problemi sui dispositivi mobili? Grazie mille

Trackbacks

  1. […] pubblicato un secondo tutorial in cui ho riportato le modifiche richieste nei feedback, come rendere la voce del menu principale […]

Lascia un Commento

^ Torna su