Creazione di barre dei menu con Spry
Quando il puntatore del mouse passa sopra una barra dei menu, viene visualizzato un sottomenu. Menu barsallow per un sacco di opzioni di menu a cui accedere da un mainmenu pulito, ordinato. L’interattività che forniscono quando un visitatore passa il puntatore del mouse su un’opzione di menu aggiunge un elemento dinamico a una pagina Web.
I widget della barra dei menu possono essere orizzontali o verticali:
- Le barre dei menu verticali sono in genere allineate in frame, colonna tabella, o altri oggetti di layout (come un DIV o un DIV AP) sul lato sinistro della pagina.
- Le barre dei menu orizzontali in genere sono allineate nella parte superiore della pagina e possono essere posizionate lì senza essere inserite in un oggetto layout.
Il widget Spry per l’inserimento dei widget della barra dei menu consente di generare barre dei menu con due livelli di sottomenu. Pertanto, un utente può fare clic su un’opzione di menu, vedereun sottomenu con un nuovo set di opzioni, scegliere una di queste opzioni e scegliere daun secondo sottomenu.
Per generare un widget della barra dei menu, attenersi alla seguente procedura:
- Salva la pagina in cui verrà inserito il widget.
- Scegliere Inserisci > Spry > Spry Barra dei menu. Quando viene visualizzata la finestra di dialogo della barra dei menu Spry, scegliere Formato orizzontale o verticale.
- Dopo aver generato un widget barra dei menu, è possibile definire alcune proprietà barra dei menu di base nell’ispettore Proprietà. Seleziona le voci di menu o i sottomenu sul lato sinistro dell’ispettore Proprietà; quindi modificali come preferisci (vedi Figura4):
- Nella casella di testo, inserisci il testo che apparirà nel menu.
- Nella casella Link, inserire il link che si aprirà quando l’elemento isicked.
- Nella casella Titolo, inserisci il testo di accessibilità che apparirà nella finestra del browser quando un utente passa il puntatore del mouse su un’opzione di menu.
- Lasciare vuota la casella di destinazione per aprire il collegamento nella stessa finestra del browser, orenter _blank per aprire il collegamento in una nuova finestra del browser.
- Utilizzare i pulsanti più (+) e meno (-) sopra le colonne menu o sottomenu (osub-sottomenu) per aggiungere o eliminare nuove voci di menu. Utilizzare i pulsanti Sposta elemento su Eposta elemento giù come necessario per modificare l’ordine delle voci di menu.
Figura 4 Defininglevels delle opzioni della barra dei menu nell’ispettore proprietà.
Quando si crea o si seleziona un widget della barra dei menu, viene visualizzato un pulsante Disattiva stili nell’ispettore proprietà. La disattivazione degli stili non influisce sul modo in cui lo stileè reso in un browser, ma disattiva la formattazione nella Finestra del documento. È possibile regolare la formattazione di varie proprietà della barra dei menu della barra dei menu selezionata utilizzando il pannello Stili CSS.
Ogni barra dei menu genera almeno una dozzina di stili CSS. La maggior parte di questi stili CSS definisce il posizionamento e la dimensione dei menu e dei sottomenu che appaiono quando auser passa il puntatore del mouse su un’opzione di menu. Il posizionamento predefinito di questi menu di solito va bene e non deve essere regolato. È possibile creare una barra dei menu personalizzata definendo i propri collegamenti e testo, e dargli un formato adistintivo personalizzando i colori del testo e dello sfondo.
Alcune delle opzioni di stile CSS controllano elementi relativamente poco appariscenti della barra dei menu, ma tutti possono essere modificati nel pannello Stili CSS. Per modificare gli stili associati a un widget della barra dei menu, espandere SpryMenuBarHorizontal per visualizzare un elenco di stili di classe associati a questo foglio di stile. La selezione di uno di questi stili di classe nella parte superiore del pannello Stili CSS consente di modificare le proprietà di tale stile nella metà inferiore del pannello Stili CSS.
Per cambiare lo sfondo o il colore del testo per la barra dei menu, selezionare styleul.MenuBarHorizontal a (per una barra dei menu verticale, ul.MenuBarVertical a). Con lo stile selezionato nel pannello Stili CSS, utilizzare la casella campione di colore di sfondo nella metà inferiore del pannello Stili CSS per scegliere un nuovo colore di sfondo e utilizzare il campione di colore per cambiare il colore del carattere (vedere Figura 5).
Figura 5 Modifica del colore del testo per una barra dei menu.
Un’altra opzione è quella di cambiare lo sfondo e il colore del testo di un’opzione di menu hovered-overhorizontal, utilizzando questi elementi:
- ul.MenuBarHorizontal a. MenuBarItemHover
- ul.MenuBarHorizontal a. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a. MenuBarSubmenuVisible
Lo stile per le barre dei menu verticali è simile, ma con Verticale al posto Diorizontal nel nome dello stile.
Come stai iniziando a vedere, le barre dei menu Spry offrono molti, moltielementi personalizzabili. Per i migliori risultati, esperimento. In sostanza, si modifica il contenuto delle barre dei menu nell’ispettore delle proprietà o selezionando uno degli stili CSS generati e modificandolo nello Stylespanel CSS.
Ok, sei da solo ora! Buon divertimento con questi e altri Sprywidgets. E ricorda di rimanere in contatto e fammi sapere come stanno lavorando sui tuoi siti.