sottomenu

taiku

sottomenu

Salve a tutti, avrei una domanda sui menu con i css.
Dovendo apportare delle modifiche al menu del mio sito (quello in firma), inserendo dei sottomenu, sto provando a rielaborare un template già pronto che però opera con uno script.
A prescindere dal fatto che ancora non riesco del tutto ad ottimizzare il funzionamento, ma quello è solo questione di pazienza, il problema principale è che ie7 mi blocca l'esecuzione dello script.
Mi chiedo a questo punto se ci sia un modo per ottenere lo stesso risultato senza utilizzare script ma solo codice css.:?:?
Grazie a tutti.

karedas

Ciao Taiku
Servirebbero più informazioni a riguardo.
Intanto che tipo di script; in caso ti riconduco alla nostra sezione "Script lato client".
Se il problema principale invece è il tuo foglio di stile servirebbe sapere con maggior precisione cosa intendi e cosa vorresti realizzare con essi poichè attualmente non saprei su cosa basarmi per aiutarti.
Ciao aspetto una tua risposta!

taiku

Si tratta di un codice in JS, e ie7 mi dice che le impostazioni di protezione non consentono l'esecuzione dello script.
Poichè credo che il problema sia non soltanto mio, vorrei qualcosa che non abbia problemi di visualizzazione per chi legge il sito.
Se necessario posso postare il codice css e JS.

taiku

posto anche il codice css:

.menuNavigazione{
width:110px;
margin:0;
padding: 0;
list-style:none;
padding:10px 0;
}

.menuNavigazione li{
position:relative;
}

.menuNavigazione a{
display:block;
text-decoration:none;
border-right:3px solid;
padding:5px 10px 5px 0;
background:#000;
color:#FFFFFF;
}

.menuNavigazione a:link,
.menuNavigazione a:visited{
border-color:#999;
}

.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
border-color:#444;
text-decoration:none;
}

/* SOTTO MENU /
.menuNavigazione ul{
list-style:none;
padding:0;
}
/ SOTTO MENU SENZA JS /
.menuNavigazione ul{
margin:0 0 0 10px;
}
/ SOTTO MENU CON JS:ON OFF /
.menuNavigazione ul.subMenu-off{
position:absolute;
visibility:hidden;
height:0;
overflow:hidden;
}
.menuNavigazione ul.subMenu-on{
margin:0;
width:110px;
position:absolute;
top:-1px;
left:110px;
}
/ COLLEGAMENTI */
.menuNavigazione a{
display:block;
text-decoration:none;
padding:2px 0;
}

/* COLORI /
.menuNavigazione a:link,
.menuNavigazione a:visited{
background:transparent;
color:#000;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
background:#FFF;
color:#009;
}
/ VOCI CON SOTTO MENU */
.menuNavigazione.subMenu-on a.continua:link,
.menuNavigazione.subMenu-on a.continua:visited,
.menuNavigazione.subMenu-off a.continua:link,
.menuNavigazione.subMenu-off a.continua:visited{
background-image:url(continua.gif);
background-position:right center;
background-repeat:no-repeat;
}

in html:

e il javascript:

/* CONFIG */
menuClassName = "menuNavigazione";

/* SCRIPT /
function closeSub(menu) {
for (var i=0; i<menu.childNodes.length; i++)
if (menu.childNodes.nodeName.toLowerCase()=="li") {
li = menu.childNodes*;
li.onmouseover = li.onactivate = li.onfocus = function() { if (this.subMenu) this.subMenu.className = this.subMenu.className.replace(/subMenu-off/g,"subMenu-on") };
li.onmouseout = li.ondeactivate = li.onblur = function() { if (this.subMenu) closeSub(this.subMenu) };
for (j=0; j<li.childNodes.length; j++)
if (li.childNodes[j].nodeName.toLowerCase()=="ul" || li.childNodes[j].nodeName.toLowerCase()=="ol") closeSub(li.subMenu = li.childNodes[j]);
}
menu.className = menu.className.replace(/\s?subMenu-on/g,"")+" subMenu-off";
}

/* ON LOAD /
window.onload = function(e) {
if(tags_ = document.getElementsByTagName('ul'))
for(i=0; i<tags_.length; i++)
if (tags_.className==menuClassName) closeSub(tags_);
if(tags_ = document.getElementsByTagName('ol'))
for(i=0; i<tags_.length; i++)
if (tags_.className==menuClassName) closeSub(tags_*);
}

la cosa strana è che con il template originale va tutto bene, modificato da me, mi viene bloccato.

meryk

Bisogna capire se è un errore di script (magari ti sei perso per strada qualche passaggio di variabile) o di stile. Usa firefox e controlla che nella console Javascript non ci siano errori sullo script (strumenti/console degli errori/ finestrella errori)

taiku

fatto.
nessun errore.
solo che firefox mi visualizza senza sottomenu.
come se fosse tutto un unico menu.

meryk

anche la versione originale non va su firefox?

taiku

E' la domanda che mi sono posto anche io.
Provato e visto che funzionava ho ricontrollato tutto e ho scoperto che - viva la mia testa vuota... - avevi ragione e mi ero mangiato un pezzo di codice per strada.
Adesso funziona su opera, firefox, navigator e su ie7 mi da uno spazio tra le voci di menu che non capisco da dove salti fuori.
Però il più è fatto.
domani con calma riguardo ancora.
Grazie per il prezioso consiglio.

karedas

Potresti scrivere il link (non attivo) della tua pagina così potremmo capire se è veramente un problema di css o di Javascript così da poterti aiutare

taiku

Purtroppo sto solo testando in locale, poichè la pagina non è ancora in rete.
E' uno studio che sto facendo per aggiungere delle pagine al mio sito.
Posso zippare la cartella ed allegarla o stasera metto in rete e vi passo l'indirizzo.
Grazie.

taiku

Ho messo in rete, se avete un attimo per dargli uno sguardo vi sarei veramente molto grato.
Il link:
ryujokan.it/prova/menu.
Non riesco ad eliminare quei fastidiosi spazi nella barra laterale che mi visualizza ie.
Grazie

karedas

Non ho capito perchè hai messo ai **<li> **del tuo menù questi attributi:

position:relative;
right:-30px;
```Potrebbe essere questo che ti crea dei problemi visivi in IE6. Magari quindi potresti provare a toglierli e spostare il tuo menù dal lato sinistro usando un "**margin-left**" o "**padding-left**" sul tag "**ul**" che contiene le tue voci.
ciao :)

taiku

Togliendo quegli attributi mi si sovrappone il sottomenu al menu.
Con margin left non succede nulla.
L'errore è su ie7, che mi da uno spazio vuoto tra le varie voci.
Con ie6 non lo ho ancora testato.
Sugli altri browser si vede benissimo.

karedas

Mhh probabilmente non sto capendo io quale sia il vero problema. Solo che non capisco di quale sottomenù tu stia parlando. In IE7 non riesco a vedere questo fantomatico errore , in IE 6 invece noto un problema con le barre del menù.

taiku

Con IE7 non hai una riga frastagliata sulla destra del menu?
Io vedo un tratteggio dal mio pc.
Mi sorge il dubbio che sia un problema mio, forse.
Il menu che io avevo intenzione di fare era in pratica lo stesso del mio sito, aggiungendo dei sottomenu.
Appena ho fatto questo, IE7 mi ha iniziato a visualizzare la riga laterale frastagliata invece che intera.
Non so se sono riuscito a chiarire meglio il problema.

taiku

Chiedo scusa se riporto in auge questo post, ma non mi sembrava il caso di aprirne uno nuovo per la stessa cosa.
Sono riuscito a realizzare il menu a scomparsa che cercavo di fare, studiando anche i vari tutorial proposti in altri post del sito.
Sul sito funziona benissimo, solo che il menu, che si trova in colonna 1, nel momento in cui si espande finisce sotto la colonna 2, per cui risulta visibile solo in parte.
Qualcuno sa come posso fare per farlo espandere sopra la colonna 2?
Grazie.

karedas

Io non riesco a vedere il menù a comparsa nel tuo sito anche perchè il vecchio link che avevi inserito non sembra essere attivo.

taiku

Si, hai ragione. Inavvertitamente ho cambiato il nome alla pagina.
Scusami, il link corretto è ryujokan.it/prova/prova.html
Grazie.

taiku

Grazie dell'aiuto ragazzi, ho risolto.
Potete chiudere la discussione.