problema menù espandibile

save83

Nuovo Utente
8 Mar 2012
1
0
0
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:

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>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ho provato con Chrome Firefox e addirittura con IE

ma il problema che dici di avere

la voce primaria si sposta in alto, di poco,

non l'ho riscontrato

Forse il problema non è nel codice che hai postato

cmq .. molto bello
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Piccolo Problema menù espandibile toogle Javascript 6
F Problema hover voce di menù Javascript 2
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
andreaco Problema menù a scomparsa laterale HTML e CSS 10
Antares82 Problema menù a tendine PHP 6
B Problema con menù a tendina HTML e CSS 4
I Problema Menù a cascata complesso HTML e CSS 4
C Problema menù HTML e CSS 6
L problema con menù css HTML e CSS 1
E problema link nel menù XML 0
SilentMohai Problema di visualizzazione menù Javascript con InternetExplorer Javascript 0
P Problema con un menù a tendina PHP 7
M problema menù orizzonatale JS internet explorer Javascript 41
M [HTML/JAVASCRIPT] Problema Blocco Menù HTML e CSS 0
G problema con menù e pulsanti flash Flash 0
P Problema: menù a tendina Javascript 1
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
H problema carrello woocommerce PHP 2

Discussioni simili