menu CSS

andreatop

menu CSS

Ciao ragazzi,
ho trovato su internet un menu fatto in css che fa al caso mio. L'ho modificato e sostanzialmente ho ottenuto quello che volevo. Unico problema è che al passaggio del mouse sulla parola, che apre in sottomenù, a volte crea problemi con i browser. Vi chiedo se potete fare anche voi delle prove con ie7 - firefox - safari e magari se vi riesce risolvermi il problema in modo che sia ok in tutti i browser. Grazie.

[html]

<div id="menu_div">

<ul>
<li><a href="../link1.html" title="link1">link1</a></li>
<li><a href="../link2.html" title="link2">link2</a></li>
<li><a href="../link3.html" title="link3">link3</a></li>
</ul>

</li>

</li>
<li>TRE</a>

<ul>
<li><a href="../link1.html" title="link1">link1</a></li>
<li><a href="../link2.html" title="link2">link2</a></li>
<li><a href="../link3.html" title="link3">link3</a></li>
</ul>

</li>
<li><a href="../about.html">about</a>

</ul>

</li>
</ul>

</div>
</div>

[/html]


 /* Menu */
#menu_div {
background-color: White;
width: 912px;
height: 27px;
}

.menu1_div {
width: 225px;
height: 27px;
margin-right: 4px;
float:left;
text-align: center;
}

.menu2_div {
width: 225px;
height: 27px;
font-size:8pt;
float:left;
text-align: center;
}

           /*Parte CSS Menu */

/* style the outer div to give it width */

.menu {
width:912px;
height:20px;
margin-top:100px;
}

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:150px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li {
float:left;
width:228px;
position:relative;
text-align: center;
font-size:12px;
}


/* style the links for the top level */

.menu a {
display:block;
font-size:10px;
text-decoration:none;
color:Black;
text-align: center;
width:227px; 
height:15px; 
background: White; 
}

.menu a:visited {
display:block;
text-decoration:underline; 
}

/* style the table so that it takes no part in the layout - required for IE to work */

.menu table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;}



/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {
visibility:hidden;
position:absolute;
bottom:15px;
left:0; 
width:228px;
}


/* style the top level hover */

.menu :hover > a, .menu ul ul :hover > a {
color:Black;
background: White;
}

/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
height:auto;
}

claudio.c

Ciao,
riusciresti a postare un link con il menu? Da una rapida occhiata non mi piacciono quelle tabelle all'interno degli ul.

andreatop

Claudio_c

Grazie della risposta. Stasera o domani vedo di metterlo online e di darti il link. Ora sono fuori per lavoro. Ciao

lumpi

L'unico problema che ho trovato è relativo a text-decoration: underline; in .menu a:visited che in FF2 e IE7 non funziona mentre in Safari si.
Per il resto a me non ha dato problemi.

Se ci fai sapere che problemi ti da.

Ciao

andreatop

Allora prometto che stasera vi metto il link con il menù.

Vi spiego il problema per bene. Questo è un menù con 3 voci che con l'hover fa aprire (sopra le 3 voci) 3 sottomenu, 1 per voce. Con alcuni browser però non è semplice far alzare il sottomenu che si richiude subito, se non passo sulla voce in maniera decisa. Questo è l'unico problema e stasera con il link lo vedrete meglio.
Intanto vi aggiorno intanto che ho fatto tanti test con i browser anche considerando il sistema operativo. Vi faccio un elenco:

XP
firefox ok
ie ok

VISTA
firefox ok
ie ok
safari ok
opera ok
google chrome ok

TIGER OSX
firefox problema
safari problema

LINUX UBUNTU 8.10
firefox ok
opera problema

Vi ringrazio dell'aiuto e spero che mi riusciate ad aiutare. Grazie. Andrea

andreatop

Allora ragazzi,

vista la vostra gentilezza ho provveduto subito a metterlo online.

Eccolo a questo link: http://www.webalice.it/andreatop/prova/

Fatemi sapere, grazie.

lumpi

La butto li... non è che il codice html non valido c'entra qualcosa?

Io non ho la possibilità di provarlo su diversi sistemi operativi.

Ciao

andreatop

Ciao lumpi,

grazie per la risposta. Cosa intendi per html non valido? Ciao.

claudio.c

Ciao,
effettivamente facendo la validazione tramite la web developer toolbar di firefox, la pagina restituisce un bel pò di errori. Penso siano tutti quei commenti condizionali.
Purtroppo ora non riesco a studiarmelo bene, se vuoi dei menu che funzionino alla grande prova su ttp://lwis.net/free-css-drop-down-menu/, sicuramente trovi quello che fa a caso tuo.

Claudio

ramtha

Ciao,
come ha scritto claudio_c la validazione da un bel po si errori.

Conosco i commenti condizionali (forse non abbastanza) ma in questo caso che scopo hanno visto che togliendoli non ho variazioni in IE7?

Mi puoi dare un link dove approfondire?

Scusate ho scritto col nick della collega...

Lumpi

andreatop

Grazie lumpi e grazie Claudio.

Cosa intendi per link > dove approfondire? comunque intanto mi vedo quel link di claudio. Grazie e continuate a darmi una mano, grazie.

lumpi

Non capisco a che cosa possa servire un commento tipo

<!--[if IE 7]><!--></a><!--<![endif]-->
```perciò se conosci delle pagine dove poter approfondire l'argomento ti sarei grato se me le potessi passare.

Ciao

andreatop

lumpi non so cosa possa significare.

io ho modificato un menu drop-up già esistente. c'era già.

novità sul perchè faccia quel verso?

alle brutte mi sapete dire come cambio un menu drop-down a drop-up? grazie

claudio.c

Ciao,
nella pagina che ti ho segnalato c'è il menu che fa a caso tuo: ttp://lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.upward.html.

E' crossbrowser e richiede un pò di JS solo per IE6.

Claudio.

andreatop

Grazie claudio. ora spippolo appena ho 2 minuti e provo a modificarlo come più mi piace.

Vi faccio sapere come ho risolto. Ciao.

andreatop

Allora ragazzi nel weekend ho spippolato e ho risolto grazie al link di claudio_c. l'ho aggiustato e ora funziona. Grazie a tutti ciao

claudio.c

Ottimo, ciao!
Claudio.

andreatop

Ciao claudio_c,

avrei un'altra cosa da chiederti. Io quel menu che mi hai linkato te, l'ho modificato e messo sul sito. Mi sono accorto che con IE6 non fa.

Leggendo a destra e sinistra mi sa che potrebbe funzionare con dei javascript, ma non so bene come funzionino e come usarli nel mio. Mi dai una mano? Ciao.

claudio.c

Ciao,
prova a segnalarmi il link che verifico. Su IE6 il link che ti ho girato funziona.

andreatop

Grazie Claudio, il sito è: www.eleonoraspacchini.com . dove ho sbagliato per te? grazie mille. Andrea.