[JavaScript] aiuto per menù a tendina...

[>>VK<<] · 27-12-2006, 11:22

ho preso da htlm.it questo esempio di menu a tendina in java scrip

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>

<title>Menù a tendina</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />

<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: left;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 0px solid black;
border-left-width: 0px;
background-color: #000000;
}

.headerlinks a{
margin: auto 3px;
font-weight: bold;
color: white;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #000000;
border: 0px solid black;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: 50;
}

.submenus li a:hover{
background-color: white;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 0px;
}

</style>

<script type="text/javascript">

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>

</head>
<body >
<br /><br />
<div align="left">

<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: none">
<div class="headerlinks"><a href="http://www.html.it">| Gallery</a></div>
<ul class="submenus">
<li><a href="#">Prova</a></li>
<li><a href="#">Testo</a></li>
<li><a href="#">Prova</a></li>
<li><a href="#">Testo</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.ciao.it">| Video</a></div>
<ul class="submenus">
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://www.ciao.it">| Biografia</a></div>
<ul class="submenus">
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://www.ciao.it">| Filmografia</a></div>
<ul class="submenus">
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://www.ciao.it">| Download</a></div>
<ul class="submenus">
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
<li><a href=".">Prova</a></li>
<li><a href=".">Testo</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://www.freephp.html.it">| Forum</a></div>
<ul class="submenus" style="width: 14em">
<li><a href="">Prova</a></li>
<li><a href="">Testo</a></li>
<li><a href="">Prova</a></li>
</ul>
</li>

</ul>

<div id="clearmenu" style="clear: left"></div>

</div>
<br /><br /><br /><br /><br /><br />
</body>
</html>

alcune cose c'e lo già fatta a modificarne pur sapendo 0 di java scrip, ora volevo chiederere il vostro aiuto per:

- poter cambiare font del menù
- per fare in modo che le parole con collegamento ipertestuale nn siano blu
- per fare in modo che il sub menù nn sia così grande ma sia grande quanto basta per contenere la parola.

P.S
se volete vedere com'è salvate il codice in un file htm.

grazie in anticipo.