Personalizzazione del widget Barra di menu



Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche ai widget Barra di menu, essa non supporta le attività relative agli stili personalizzati. Se necessario, è possibile cambiare le regole CSS del widget Barra di menu e creare una barra di menu avente lo stile preferito. Per un elenco più dettagliato delle attività relative agli stili, consultate www.adobe.com/go/learn_dw_sprymenubar_custom_it.

Tutte le regole CSS negli argomenti che seguono fanno riferimento alle regole predefinite disponibili nei file SpryMenuBarHorizontal.css o SpryMenuBarVertical.css (a seconda della selezione effettuata). Durante la creazione di un widget Barra di menu Spry, Dreamweaver salva i file CSS nella cartella SpryAssets del sito. Questi file contengono anche utili commenti relativi ai vari stili che possono essere applicati ai widget.
Nonostante sia possibile modificare facilmente le regole del widget Barra di menu direttamente nel file CSS associato, è possibile anche utilizzare il pannello Stili CSS per modificare il CSS della barra di menu. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.

Modifica dello stile del testo di una voce di menu

Il file CSS associato al tag <a> contiene le informazioni relative allo stile applicato al testo. Al tag <a> sono associati anche numerosi altri valori di classe relativi allo stile del testo che si riferiscono ai differenti stati del menu.

 Per modificare lo stile del testo di una voce di menu, utilizzare la tabella che segue per localizzare la regola CSS appropriata, quindi modificare il valore predefinito:

Stile da modificare

Regola CSS per la barra di menu orizzontale o verticale

Proprietà relative e valori predefiniti

Testo predefinito

ul.MenuBarVertical a, ul.MenuBarHorizontal a

color: #333; text-decoration: none;

Colore del testo quando il cursore del mouse si trova su di esso

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

color: #FFF;

Colore del testo quando attivo

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

color: #FFF;

Colore della voce della barra di menu quando il cursore del mouse si trova su di essa

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover

color: #FFF;

Colore della voce di sottomenu quando il cursore del mouse si trova su di essa

ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

color: #FFF;

Modifica del colore di sfondo di una voce di menu

Il file CSS associato al tag <a> contiene le informazioni relative al colore di sfondo della voce di menu. Al tag <a> sono associati anche numerosi altri valori di classe relativi al colore dello sfondo che si riferiscono ai differenti stati del menu.

 Per modificare il colore di sfondo di una voce di menu, utilizzare la tabella che segue per localizzare la regola CSS appropriata, quindi modificare il valore predefinito:

Colore da modificare

Regola CSS per la barra di menu orizzontale o verticale

Proprietà relative e valori predefiniti

Sfondo predefinito

ul.MenuBarVertical a, ul.MenuBarHorizontal a

background-color: #EEE;

Colore di sfondo quando il cursore del mouse si trova su di esso

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

background-color: #33C;

Colore di sfondo quando attivo

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

background-color: #33C;

Colore della voce della barra di menu quando il cursore del mouse si trova su di essa

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover

background-color: #33C;

Colore della voce di sottomenu quando il cursore del mouse si trova su di essa

ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

background-color: #33C;

Modifica della dimensione delle voci di menu

Le dimensioni delle voci di menu possono essere modificate cambiandone le proprietà width dei tag li e ul.

  1. Localizzare la regola ul.MenuBarVertical li o ul.MenuBarHorizontal li:
  2. Modificare la proprietà width specificando la larghezza desiderata (o impostare la proprietà su auto per rimuovere la larghezza fissa, quindi aggiungere la proprietà e il valore white-space: nowrap; alla regola).
  3. Localizzare la regola ul.MenuBarVertical ul o ul.MenuBarHorizontal ul.
  4. Modificare la proprietà width specificando la larghezza desiderata (o impostare la proprietà su auto per rimuovere la larghezza fissa).
  5. Localizzare la regola ul.MenuBarVertical ul li o ul.MenuBarHorizontal ul li:
  6. Aggiungere le seguenti proprietà alla regola: float: none; e background-color: transparent;.
  7. Eliminare la proprietà e il valore width: 8.2em;.

Posizionamento dei sottomenu

La posizione dei sottomenu Barra di menu Spry è controllata dalla proprietà margin nei tag ul del sottomenu.

  1. Localizzare la regola ul.MenuBarVertical ul o ul.MenuBarHorizontal ul.
  2. Modificare i valori predefiniti margin: -5% 0 0 95%; specificando i valori desiderati.