In un sito ho inserito un menu verticale a tendina. Posizionandosi su una voce del menu principale si apre il sottomenu. Ho due problemi:
1) il sottomenu deve partire dall'inizio della voce del menu principale e non dalla parte centrale

2) la voce del menu deve essere evidenziata quando si tratta di quella pagina. Cioè se io sono sulla pagina burro, allora la voce menu "Burro" deve essere evidenziata.
Credo che in entrambi i casi devo agire nel file js, ma avendo una scarsa conoscenza non so dove mettere mano
il codice js è:
mentre codice css
codice html
1) il sottomenu deve partire dall'inizio della voce del menu principale e non dalla parte centrale

2) la voce del menu deve essere evidenziata quando si tratta di quella pagina. Cioè se io sono sulla pagina burro, allora la voce menu "Burro" deve essere evidenziata.
Credo che in entrambi i casi devo agire nel file js, ma avendo una scarsa conoscenza non so dove mettere mano
il codice js è:
Codice:
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
mentre codice css
Codice:
/*stile font menu */
.suckerdiv {line-height: 250%; font-family: 'Titillium Web', sans-serif; font-weight: bold; text-align: left; font-size:16px; padding-left:50px;}
.suckerdiv ul{margin: 30px 0 0 0; padding: 0; list-style-type: none; width: 200px; /* Width of Menu principale */}
.suckerdiv ul li{position: relative; background: url(pic/bg_prodotti.jpg) no-repeat right top;}
/*menu di secondo livello */
.suckerdiv ul li ul{font-size:14px; position: absolute; width: 120px; background-color:#1b5f82; /*sub menu width*/ top: 0; visibility: hidden;}
/* Stile dei link del menu di secondo livello */
.suckerdiv ul li a{display: block; overflow: auto; /*force hasLayout in IE7 */ color: #FFF; text-decoration: none; padding: 1px 5px; border-bottom: 0;}
.suckerdiv ul li a.active{background: url(pic/prodotti_clic.jpg) repeat right top;}
.suckerdiv ul li a:visited{}
.suckerdiv ul li a:hover{background: url(pic/prodotti_clic.jpg) repeat right top;}
.suckerdiv .subfolderstyle{}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
codice html
HTML:
<div class="suckerdiv">
<h1>I PRODOTTI</h1>
<ul id="suckertree1">
<li><a href="#">Fior di Latte</a>
<ul>
<li><a href="#" class="active">Fior di latte</a></li>
<li><a href="#">Bocconcini</a></li>
<li><a href="#">Treccine</a></li>
<li><a href="#">Ciliegine</a></li>
<li><a href="#">Nodini</a></li>
</ul>
</li>
<li><a href="#">Scamorze</a>
<ul>
<li><a href="#">Scamorza</a></li>
<li><a href="#">Scamorzina</a></li>
<li><a href="#">Scam. Affum.</a></li>
</ul>
</li>
<li><a href="#">Burro</a>
<ul>
<li><a href="#">Burro</a></li>
</ul>
</li>
</ul>
</div>
</div>