X

CSS: menù orizzontale compatibile con tutte le versioni Firefox e Internet Explorer

In questo blog per avere un menù che portasse direttamente alle pagine ‘statiche’ avevo sino ad adesso utilizzato il SuckerTree Horizontal Menu che avevo trovato su Dynamic Drive CSS Library.
Una soluzione molto elegante quando si vuole creare un menù per un sito con una semplice lista non ordinata <ul>.
Il problema era che le larghezze dei pulsanti non le volevo fisse

ma volevo che si adattassero al contenuto.


Omettendo la larghezza o impostandola a 100% il problema si risolveva nei browser più evoluti come Firefox 2.0 e Internet Explorer 7. In Internet Explorer 6 (e inferiori) i pulsanti si disponevano uno su riga occupando l’intera larghezza del div contenitore e producendo un effetto visivo orribile.
Avendo tentato innumerevoli hack senza successo ho.. cambiato menù adottando quello proposto da solarDreamStudios.

La soluzione è un po’ più complessa ma permette una compatibilità pressochè totale.
Ecco il CSS

[html]
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: “.”;
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block ;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none ; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto ;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move – Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
[/html]

Per permettere la funzionalità del dropdown in ogni occasione si usa un piccolo javascript

[html]
navHover = function() {
var lis = document.getElementById(“navmenu”).getElementsByTagName(“LI”);
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=” iehover”;
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” iehover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, navHover);
[/html]

Nel tag head mettiamo del codice condizionale per IE5.5 per richiamare il javascript
(Per una corretta visualizzazione cliccate su PLAIN TEXT)

[html]
<!–[if gte IE 5.5]>
<script language=”JavaScript” src=”dhtml.js” type=”text/JavaScript”></script>
<![endif]–>
[/html]

Ed ecco, infine, un codice esempio per l’utilizzo.
(Per una corretta visualizzazione cliccate su PLAIN TEXT)

[html]

[/html]

Sergio Gandrus: Da febbraio 2024 lavoro come CTO presso Deva Connection Il mio stack è PHP/MySQL/Git/Docker. Lavoro con Agile (Scrum) e utilizzo principalmente AWS come cloud provider. Sono papà e marito. Nel tempo libero mi piace leggere, il buon vino e viaggiare.

View Comments (7)

  • Ciao
    Dove devo inserire il codice javascript???
    perchè ho provato a metterlo al di fuori di tutto [XD]
    dentro head e dentro body ma mi viene fuori sempre questo errore:
    navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i

    Soluzione?

  • @EraKlon

    Il javascript va messo tra i tag HEAD.
    Devi fare attenzione alle doppie virgolette usa quelle verticali e non quelle inclinate

    document.getElementById("navmenu") <--- OK document.getElementById(”navmenu”) <--- NO!

    inoltre è chiaro che il codice javascript debba stare tra tag che lo richiamino ossia

    < script language="javascript" >
    ...
    codice
    ...
    < /script >

    Leva gli spazi

  • Riscontro delle problematiche con la visualizzazione dei sottomenu con IE7. Sembra che il codice non sia compatibile.

    Può controllare? Grazie

  • @Mattia

    a suo tempo feci molte prove (anche con IE7) e non ebbi nessun tipo di problema.
    Ricontrolli il codice. Soprattutto se ha fatto delle personalizzazioni.

  • @Elisa

    vale la risposta per Mattia. A suo tempo ho testato con successo su tutti i browser più utilizzati.
    ps c'è ancora qualcuno con IE6? :D

  • ciao,

    ma perché non fare una pagina di esempio per ogni codice? sarebbe più semplice capire l'effetto immediato dello script! (come fa html.it)