Buon giorno a tutti, spero di postare nella sezione giusta.
Inanzitutto ringrazio anticipatamente chi mi aiuterà.
Ho un piccolo problema con un menù espandibile.
Questo funziona e si visualizza correttamente in firefox, ma se lo apro con safari e chrome succede che all'apertura del sotto menù con le voci secondarie, la voce primaria si sposta in alto, di poco, però non mi piace per niente.
Vi posto il codice pagina:
Inanzitutto ringrazio anticipatamente chi mi aiuterà.
Ho un piccolo problema con un menù espandibile.
Questo funziona e si visualizza correttamente in firefox, ma se lo apro con safari e chrome succede che all'apertura del sotto menù con le voci secondarie, la voce primaria si sposta in alto, di poco, però non mi piace per niente.
Vi posto il codice pagina:
PHP:
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
HTML:
<style>
#menu_vert {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-decoration: none;
width: 200px;
position: absolute;
top: 25px;
left: 10px;
background-color: #FFF;
}
ul#menu {
width: 170px;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #FFF;
}
ul#menu li,
ul#menu a {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding-right: 5px;
color: #999;
padding-left: 0px;
}
#menu_vert #menu .sottosettori ul {
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
display: none;
padding-top: 15px;
}
#menu_vert #menu .sottosettori ul li {
line-height: normal;
}
ul#menu li {
line-height: 38px;
}
#menu li:hover{
}
ul#menu a {
text-decoration: none;
outline: none;
line-height: 25px;
}
#menu_vert #menu .sottosettori ul li a{
color: #999;
text-align: left;
line-height: 25px;
font-size: 10px;
padding-left: 0px;
font-family: Verdana, Geneva, sans-serif;
}
#menu li ul li{
padding-left: 0px;
}
#menu_vert #menu .sottosettori ul li a:hover {
color: #666;
}
#menu li.sottosettori {
background-image: url(../IMG/graffica.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: left;
padding-left: 32px;
}
#menu li.settori_web_foto {
background-image: url(../IMG/settore_bianco.jpg);
text-align: left;
background-position: left top;
background-repeat: no-repeat;
padding-right: 15px;
padding-left: 32px;
}
#menu li.sottosettori:hover {
background-image: url(../IMG/graffica_r.jpg);
}
</style>
<script type="text/javascript" src="../js/expandingMenu.js"></script>
</head>
<body>
<div id="menu_vert">
<ul id="menu">
<li class="sottosettori">GRAFICA
<ul>
<li><a href='immagine_coordinata.html'>immagine coordinata</a>
<li><a href='loghi.html'>loghi</a></li>
<li><a href='editoria.html'>editoria</a></li>
</ul>
</li>
<li class="sottosettori">STAMPA
<ul>
<li><a href='grande_formato.html'>digitale grande formato</a> </li>
<li><a href='piccolo_formato.html'>digitale piccolo formato</a></li>
<li><a href='litografia.html'>litografia</a></li>
<li><a href='editoriale.html'>editoriale</a></li>
</ul>
</li>
<li class="sottosettori">SOLUZIONI DIGITALI
<ul>
<li><a href='vetrofanie.html'>vetrofanie</a> </li>
<li><a href='decorazioni_automezzi.html'>decorazioni automezzi</a></li>
<li><a href='carwrapping.html'>carwrapping</a></li>
<li><a href='serigrafia.html'>serigrafia</a></li>
<li><a href='segnaletica_interna.html'>segnaletica interna</a></li>
<li><a href='segnaletica_esterna.html'>segnaletica esterna</a></li>
</ul>
</li>
<li class="sottosettori">INCISORIA
<ul>
<li><a href='targhe.html'>targhe</a>
<li><a href='timbri.html'>timbri</a></li>
</ul>
</li>
<li class="sottosettori">OGGETTISTICA
<ul>
<li><a href='gadget.html'>gadget</a>
<li><a href='abbigliamento.html'>abbigliamento<br/>personalizzato </a></li>
</ul>
</li>
<li class="settori_web_foto">FOTO</li>
<li class="settori_web_foto">WEB</li>
</ul>
</div>
</body>
</html>
