Menu orizzontale


Original: http://www.sovavsiti.cz/css/horizontal_menu.html

Missione

Credo che l’unico appropriato markup HTML per un menu è una lista, e cioè non ordinate lista contrassegnata dal tag

    . Styling tale elenco è in verticale piuttosto semplice, ma che cosa se avete bisogno di un menu orizzontale?

    Beh, la prima opzione che mi è venuta in mente stava tramontando elenco articoli di visualizzazione proprietà di linea, invece di loro blocco predefinito. Tuttavia, che impedirebbe l’applicazione di blocco solo gli stili come sfondo, padding, ecc Ecco perché ho preso un altro approccio – galleggianti.

    Tutti i seguenti esempi condividono lo stesso codice sorgente HTML – un semplice elenco risultante in questo rendering (senza stile):

  • Articolo 1
  • Articolo 2
  • Articolo 3 (lungo)
  • Articolo 4
  • E in tutti i campioni le voci di elenco sono lanciata usando la regola
    li {float: left}

    Soluzioni
    1. Imbottitura fissa

  • Articolo 1
  • Articolo 2
  • Articolo 3 (lungo)
  • Articolo 4
  • Le voci di menu qui sopra hanno larghezza variabile e sono separati da imbottitura fissa (1em).

    2. Imbottitura variabile

  • Articolo 1
  • Articolo 2
  • Articolo 3 (lungo)
  • Articolo 4
  • Le voci di menu di cui sopra sono distribuiti in modo uniforme su tutta la larghezza della barra del menu. Ogni elemento ha la sua larghezza impostata al 24%.

    3. Articoli Boxed

  • Articolo 1
  • Articolo 2
  • Articolo 3 (lungo)
  • Articolo 4
  • In questo esempio sono le voci di menu di larghezza fissa (6em) e margine destro fissa (1em). Sfondi e bordi vengono applicati a LIS anziché l’intero menu.

    4. Rollover

  • Articolo 1
  • Articolo 2
  • Articolo 3 (lungo)
  • Articolo 4
  • Infine, il campione precedente può essere facilmente migliorata con effetto rollover. Le ancore all’interno dei LIs hanno la loro larghezza impostato al 100% e per il loro: hover pseudo classe è impostata su uno sfondo diverso. Utilizzando uno sfondo grafico, questo effetto potrebbe essere ancora più interessante.
    Note e problemi di compatibilità

    Ho provato la pagina su Windows 95/98 nei seguenti browser:

    IE 5.0
    IE 6
    Opera 6
    K-Meleon 0.6 (motore di rendering di Mozilla)
    Mozilla, nightbuild del 6/4/2002
    Konqueror 3.0.0

    Tutti i browser elencati sopra visualizzata la pagina nello stesso modo, tranne piccole differenze di proprietà di default non viene impostato esplicitamente nel foglio di stile. Durante lo sviluppo ho incontrato i seguenti problemi:

    Questo approccio non è adatto per i browser più vecchi come NN4 o IE4/Win. Gli sviluppatori sono tenuti a servire un foglio di stile alternativo per i browser o nascondere il foglio di stile da loro a tutti (ad esempio tramite @ import).

    Il menu deve essere avvolto da un div che viene utilizzato per lo styling colore di sfondo, a sinistra margine / padding, ecc ho trovato alcun modo di stile della UL stessa, perché non riesco a cancellare il galleggiante interno. Pertanto l’altezza del OL è sempre uguale a zero.

    La proprietà float degli elementi della lista viene cancellata tramite
    clear=”left”> <br

    I tentativi di farlo da

    fallito in IE / Win e Opera, per vari motivi. E ‘un peccato, perché l’attributo clear non è consentito nei doctype severe.

    Per qualche strana ragione, margin: 1em 0 applicato sul div avvolto attorno a un menu non ha effetto in IE / Win, così tra i menu e i paragrafi appena sotto di loro ci sono nessuno spazio vuoto. Funziona bene in Opera e K-Meleon però.

    A causa di IE5/Win bug, il div avvolgendo la larghezza del menu deve essere esplicitamente impostato su 100%. Altrimenti le percentuali nel campione # 2 vengono contate a partire dalla larghezza della finestra, non la larghezza dell’elemento genitore.

    Sentitevi liberi di copiare il codice (foglio di stile viene incorporato nel documento HTML) e usarlo come si vuole. Eventuali commenti, suggerimenti, correzioni, ecc sono molto apprezzati a marek@sovavsiti.cz.

    Grazie,

    Marek