Ciao Simone, volevo complimentarmi con te perchè il menu è molto funzionale. Mi presenta però problemi di compatibilità con i css che non so se ti siano noti.
internet explorer, sia nella versione 6 che nella versione 7 fa “scivolare” la tendina sotto i div successivi, mentre FF la fa vedere normalmente sopra (dove deve essere). Hai notizie in merito? (Le ho provate tutte, z-index, posizionamenti più o meno assoluti ecc ecc)
Ti ringrazio ancora per lo script.

Io l’ho testato e funziona correttamente.
Ma il problema si verifica con l’esempio originale o hai apportato le modifiche al CSS per adattarlo ad un tuo sito? Puoi postare un link per vedere il problema?

Ciao Simone, grazie per la risposta. Il css l’ho adattato per riprendere la grafica originale fornitami dato che sto ricreando praticamente ex novo il sito per alleggerirlo e volevo, in luogo del prototype usato in precedenza da chi ci aveva fatto il taglio e i css, utilizzare le potenzialità di jquery che integrerò per gli effetti con un thickbox.
Un esempio lo puoi trovare nella pagina di test che è http://www.romagna.net/TEST/test.php
il css è nella stessa cartella con il nome di test.css
Ti ringrazio
Criss

Ho capito qual’è il problema: non dipende dal menù ma dagli stili che hai dato ai div center, colonna_sx e colonna dx.
Ho risolto il problema eliminando il position relative a center (praticamente non serve) e posizionando le due colonne con float left e right.
Ecco una bozza del css che ho modificato:

#center { }
#colonna_sx {
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ff7800 14px solid;
BACKGROUND: url(http://www.romagna.net/images/background/colonnaSx_bottom.gif) #ffffff no-repeat left bottom;
FLOAT: left;
MARGIN-left: 0;
WIDTH: 234px;
}
#colonna_dx {
BORDER-TOP: #d2cccc 14px solid;
BACKGROUND: url(http://www.romagna.net/images/background/container_bottom.gif) #ecebeb no-repeat left bottom;
WIDTH: 680px;
float: right;
}

Fammi sapere se funziona.

Ciao Simone…fantastico, il problema è risolto. Mi si son creati altri piccoli “scompensi” grafici ma adesso vedo di risolverli. Ti chiedo un’altra cosa tanto che ci sono…sai nulla dei comportaenti diversi tra FF e IE riguardo alle colonne che si espandono verso il basso? Mi spiego meglio: il menu a sx si espande normalmente verso il basso quando apro le apposite voci (è sempre con jquery il menu) e la colonna “fluidifica” della dimensione giusta con IE. Con FF invece il menu scende ma la colonna rimane fissa. Ne sai nulla?
Intanto ti ringrazio ancora. Buona giornata.
Criss

Ciao Simone…ho sistemato tutto..o meglio quasi.
Ho creato con jquery e l’ausilio di una libreria di easing per gli effetti un menu verticale. Sembra che il javascript non venga considerato. Me ne sono accorto per puro caso dato che su IE6 funziona, su iE7 per firefox funziona e FF funziona. Sull’IE7 standard invece no…hai per caso qualche idea?
thank’s

Ciao Simone, complimenti per il menu..molto facile e veloce da utilizzare….ma una domanda..è possibile cambiare lo sfondo associato al sottomenu?…mi spiego meglio..è possibile avere un colore o immagine di sfondo per la barra..ma tenerne un’altro per i menu che si aprono?

grazie per la risposta e complimenti ancora

Ciao Valerio, certo che puoi farlo.
Basta che lavori con i fogli di stile andando a definire il background per i vari li, tipo:

#menu li li { background: #999 }

In questa maniera gli li presenti all’interno del primo li avranno uno sfondo grigio (semplice stile a cascata).
(#menu l’ho messo come esempio per indicare l’id che hai associato al tuo menu)

Ciao Simone, provo a richiedere a te e abusare ancora un po’ della tua gentilezza dato che ho chiesto in vari forum ma nessuno ha saputo darmi risposta. Sai per caso perchè in explorer 7 con il jquery sembra non funzionare l’hide? Non capisco se sia un problema di css o appunto di javascript. Il menu non è il tuo ma un menu verticale con gli effetti di easing.

il menu è questo:

VOCE1

VOCE1 1
VOCE1 2
VOCE1 3

VOCE2

VOCE2 1
VOCE2 2
VOCE2 3

il css corrispondente:
#VerColMenu, #VerColMenu ul
{
color: #E27514;
list-style-type: none;
padding: 0px 21px 46px 10px;
}

#VerColMenu a
{
text-decoration: none;
color: #E27514;
}

#VerColMenu a:hover, #VerColMenu a:active {
font-weight: bold;
color: #E27514;
}

#VerColMenu .level-1 {
padding: 14px 0px 12px 0px;
background: url(‘http://www.romagna.net/images/background/menu_verticale.gif’) no-repeat left bottom;
*height:20px;
}
#VerColMenu .level-1 a {
color: #E27514;
margin-left: 9px;
text-transform: uppercase;
}

#VerColMenu ul.level-2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url(‘http://www.romagna.net/images/background/menu_verticale.gif’) no-repeat left top;
}
#VerColMenu ul.level-2 li {
margin-bottom: 5px;
}
#VerColMenu ul.level-2 li:first-child {
padding-top: 10px;
background-position: left 14px;

}
#VerColMenu ul.level-2 a {
color: #CB6205;
text-transform: none;
}

mentre il js:
$(function(){
$(“ul#VerColMenu li ul”).hide();

$(“ul#VerColMenu>li>a”).click(function() {

$(this).addClass(“current”);
var $subnav = $(this).next();
if($subnav.is(“:visible”)) {
$subnav.animate({height: “toggle”}, 750, “easeInOutExpo”).prev().removeClass(“current”);
}
if(!$subnav.is(“:visible”)) {
$(“ul#VerColMenu li ul:visible”).animate({height: “toggle”}, 750, “easeInOutExpo”).prev().removeClass(“current”);
$subnav.animate({height: “toggle”}, 750, “easeInOutExpo”);
}
return false;

});

});

La libreria di easing non la riporto perchè mi sembra non sia utile. Al limite la posterò se serve.

Il tutto visibile all’indirizzo http://www.romagna.net/TEST/testrimini.php

ti ringrazio per l’aiuto.
Criss

Hai provato a mettere
$(“ul#VerColMenu li ul”).hide();

dentro la funzione
$(document).ready(function() …

Non so se può essere questo il problema anche perché non ho avuto mai problemi con jquery su IE7.

ciao Simone, purtroppo il problema non era questo. Non so più dove sbattere la testa. Mi viene in mente solo una cosa..a questo punto forse sto sbagliando strada perchè non penso che un js si comporti diversamente a seconda del browser…probabilmente sono i css da riadattare..ma non capisco dove

Ciao Simone, complimenti per il menù davvero ottimo, mi capita spesso di utilizzarlo! Ho notato però che se volessi la barra di un colore (bianco) e le tendine di un altro (rosso) avrei sempre il difetto “grafico” che a tendina aperta il link che fa aprire la tendina stessa resterebbe bianco. Questo perchè cmq una volta che sono sulla tendina non sono in grado di fare riferimento al link che ha fatto scattare l’apertura e quindi non sono in grado di dargli lo stesso colore della tendina. (Spero di essermi spiegato).

In proposito, sempre che non mi sia perso qualcosa della tua soluzione, ho modificato lo script jquery.onfocus.js in questo modo (fammi sapere se il tutto ti sembra plausibile):

(function() {
$.fn.onfocus = function(){

$(this).find(“ul”).removeClass().addClass(“subMenu-off”);

$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);

/*assegno uno stile anche alla voce padre in modo da lasciarla evidenziata quando è aperta la tendina*/
$(this).children(“a.continua”).removeClass().addClass(“prova”);
});
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);

/*rimuovo lo stile*/
$(this).children(“a.prova”).removeClass().addClass(“continua”);
});
};
})(jQuery);

Ciao Davide, mi fa piacere sapere che il menù ha fatto comodo a qualcuno

Riguardo alla modifica che hai proposto, direi che è corretta. Forse si potrebbe semplificarla facendo così:

[...]
$(this).children(”a”).addClass(”prova”);
[...]
$(this).children(”a.prova”).removeClass().addClass(”continua”);

Però è da provare, perché non so se la prima istruzione vada ad influire anche sui tag “a” dei sottomenù.
Se ti capita di testarla, fammi sapere.

Grazie