In un precedente articolo Tutorial Jquery: menù a tendina ho ricevuto il seguente commento:

Ciao Mirko, ho seguito alla lettera il tuo tutorial… nel mio caso mi servirebbe un menu con una tendina che si aprisse verso l’alto e non verso il basso… sapresti darmi qualche suggerimento su come fare? ti ringrazio!

Si può fare? Sì, vediamo subito di aiutare Paolo.

Il problema che si riscontra è generalmente questo: normalmente, gli elementi html vengono disposti dall’alto verso il basso (oltre che da sinistra verso destra). Noi dobbiamo invertire questo caso, ed è possibile solo utilizzando il posizionamento assoluto.

Partiamo dal precedente esempio. Il codice html era questo:

<ul id="navbar">
	<li><a href="pagina1.html">Pagina 1</a></li>
	<li>
            <a href="#">Pagina 2</a>
            <ul>
               <li><a href="paginaA.html">Pagina A</a></li>
               <li><a href="paginaB.html">Pagina B</a></li>
               <li><a href="paginaC.html">Pagina C</a></li>
            </ul>
        </li>
	<li><a href="pagina3.html">Pagina 3</a></li>
</ul>

Mentre il foglio di stile è disponibile qui.

Bene, la prima cosa da fare, come detto, è dare una posizione assoluta (position: absolute) ai sotto-menù. È però prima necessario indicare qual è l’elemento di riferimento (position: relative): nel nostro caso sarà #navbar, cioè il menù principale.
Quindi la posizione: dal basso, dalla parte inferiore del menù principale (“bottom”) è sufficiente spostare il sotto-menù dello stesso numero di pixel dell’altezza del menù principale (che nel precedente esempio è di 25 pixel). Ovvero (riporto solo le regole che incidono su questo caso, per il resto – come già detto – guardate l’esempio precedente):

#navbar {
	height: 25px;
	position: relative;  /* Necessario perché fa da riferimento alla posizione dei sotto-menù (successiva regola) */
}
#navbar ul {
	bottom: 25px; /* Deve essere uguale all'altezza di #navbar (precedente regola) */
	position: absolute;
}

Graficamente il nuovo menù apparirà così:
jquery_submenu

Anche qui, aggiungiamo ai sotto-menù la regola display: none, così che di default, al caricamento della pagina, non vengano mostrati.

Infine, proprio come nel precedente esempio, possiamo aggiungere lo stesso codice Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#navbar li").hover(function (){
			$(this).children("ul").slideToggle();
		});
	});
</script>

Ed ecco il risultato finale:
http://docs.mirkopagliai.it/html/menu-tendina/esempio6_versoalto.html

Notare che:

  1. per praticità, il codice css è nella stessa pagina html, non ho usato un foglio di stile esterno;
  2. al menù principale (#navbar) ho aggiunto un margine superiore semplicemente per distanziarlo e rendere visibile l’effetto.
Espandi/comprimi Commenti

[…] ottobre 2010  (26) settembre 2010  (19) agosto 2010  (12) Ultimi 10 commentiMirko Pagliai | Tutorial Jquery: menù a tendina verso l’alto su Tutorial Jquery: menù a tendinaPaolo Modugno su Tutorial Jquery: menù a tendinamattia su […]

Paolo Modugno
(01/04/2012, 20:01)

Grazie!!!!! il tuo blog adesso è nei miei preferiti!!!

XHTML - Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>