Menù con CSS e JavaScript

venerdì 06 luglio 2007 - 11.52

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: ven 6 lug 2007 - 11:52

Ciao a tutti,
vorrei realizzare per la mia applicazione ASP.NET un menù dinamico, ricorrendo a JavaScript e/o ai CSS, che sia abbastanza leggero e semplice.
Ecco una prima bozza ... in cui già si vede qualcosa ...

<HTML>
<HEAD>
<STYLE>
.DMenubar ul{margin: 0; padding: 0; list-style-type: none; }
/*Top level list items*/
.DMenubar ul li {position: relative; display: inline; float: left; background-color: #1c5841; }
/* LINK MENU, LA LARGEZZA CI VUOLE */
.DMenubar ul li a {width: 9em; font-size: 0.8em; color: #ffd700; font-weight: bold; font-family: Verdana, Helvetica, sans-serif; vertical-align: middle; text-decoration: none }
.DMenubar ul li a:hover {background-color: #ffd700; color: #1c5841; }
/* LINK MENU PRIMO LIVELLO, LA LARGEZZA CI VUOLE */
.DMenubar ul li ul {left: 0; position: absolute; top: 1em; visibility: hidden; }
/*Sub level menu list items (undo style from Top level List Items)*/
.DMenubar ul li ul li {display: list-item; float: none; }
/*All subsequent sub menu levels offset after 1st level sub menu */
.DMenubar ul li ul li ul {top: 0; }
.DMenubar ul li ul li a {width: 15em; color: #ffd700; text-decoration: none; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// VETTORE ID DEI MENU DELLA PAGINA, SEPARATI DA VIRGOLA
var menuids = ["DMenubar"] ;
function DM_BuildSubmenus() {
var ultags, i, t ;
for (i = 0; i < menuids.length; i++) {
ultags = document.getElementById(menuids[i]) ;
if (ultags != null) {
ultags = ultags.getElementsByTagName("ul") ;
if (ultags != null) {
for (t = 0; t < ultags.length; t++) {
if (ultags[t].parentNode.parentNode.id == menuids[i]) { // SOTTO MENU (TIPO LI), MI SOSTO SOTTO
ultags[t].style.top = ultags[t].parentNode.offsetHeight + "px" ;
}
else { // SOTTO MENU (TIPO UL), MI SOSTO A DESTRA
ultags[t].style.left = ultags[t-1].getElementsByTagName("a")[0].offsetWidth + "px" ;
}
ultags[t].parentNode.onmouseover = function(){this.getElementsByTagName("ul")[0].style.visibility = "visible"} ;
ultags[t].parentNode.onmouseout = function(){this.getElementsByTagName("ul")[0].style.visibility = "hidden"} ;
}
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", DM_BuildSubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", DM_BuildSubmenus)
</SCRIPT>
</HEAD>

<BODY topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
 
</td>
</tr>
<tr>
<td bgcolor="#1c5841" bordercolor="#1c5841" nowrap>
<div class="DMenubar">
<ul id="DMenubar">
<li><a href="#" title="Item 1"> Item 1</a></li>
<li><a href="#" title="Item 2"> Item 2</a></li>
<li>
<a href="#" title="Folder 1"> Folder 1</a>
<ul>
<li><a href="#"> Sub Item 1.1</a></li>
<li><a href="#"> Sub Item 1.2</a></li>
<li><a href="#"> Sub Item 1.3</a></li>
<li><a href="#"> Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#" title="Item 3"> Item 3</a></li>
<li><a href="#" title="Folder 2"> Folder 2</a>
<ul>
<li><a href="#"> Sub Item 2.1</a></li>
<li>
<a href="#" title="Folder 2.1"> Folder 2.1</a>
<ul>
<li><a href="#"> Sub Item 2.1.1</a></li>
<li><a href="#"> Sub Item 2.1.2</a></li>
<li><a href="#"> Sub Item 2.1.3</a></li>
<li><a href="#"> Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Item 4"> Item 4</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</TABLE>
</BODY>
</HTML>

Ho cercato di ridurre al minimo il codice JavaScript.
E' possibile ottenere qualcosa di analogo riducendo ancora o eliminando l'uso di JavaScript?

Ho notato poi il seguente errore. Se ci sono altri tag A, LI, UL, ... nella pagina, questi assumo lo stesso aspetto di quelli contenuti nel menu (ovvio perchè c'è lo stile).
Vorrei in pratica assegnare ai tag contenuti nel menù ... CLASS = "PIPPO", in modo che gli altri tag nella pagina non siano infulenzati dallo stile del menù. Qualche idea?

Grazie per l'attenzione,
Davide

micto27 Profilo | Senior Member

385 messaggi | Data Invio: lun 9 lug 2007 - 05:14

Ciao,

prova a dare un'occhiata qui

http://www.softcomplex.com/products/tigra_menu/

è pratico e abbastanza potente

Michele

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: mar 17 lug 2007 - 13:48

Grazie, ... ho visto il link, ma sono riuscito a ottenere quello di cui avevo bisogno già col mio codice.
L'unica cosa che non mi esalta è che, se sotto il menù c'è una drop down list, quando si apre il menù, questo ci passa sotto. In qualche forum, si dice sia un problema di IE, ma non ho trovato una soluzione, ho provato pure con lo z-index.

Davide

chicca53 Profilo | Newbie

1 messaggi | Data Invio: mer 25 mag 2011 - 15:21

Sono passati un pò di anni, ma ho il tuo stesso problema:
"L'unica cosa che non mi esalta è che, se sotto il menù c'è una drop down list, quando si apre il menù, questo ci passa sotto. In qualche forum, si dice sia un problema di IE, ma non ho trovato una soluzione, ho provato pure con lo z-index."

Ti ricordi come l'hai risolto ?
Grazie mille

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !