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
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
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
R problema con else PHP 0

Discussioni simili