Scoprite come aggiungere e configurare i menu di un sito Adobe Muse. Scoprite come creare menu per dispositivi mobili e stati di rollover e come modificare le etichette dei menu.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

La navigazione è uno degli aspetti più importanti da considerare quando si crea un sito Web. Quando si progetta un sito Web, occorre scegliere con cura il tipo e la collocazione degli elementi di navigazione del sito. L’esperienza di utilizzo di un sito Web dipende infatti dalla facilità di navigazione nel sito stesso.

Adobe Muse consente di creare rapidamente un sistema di navigazione usando i widget Menu. Sebbene sia possibile creare manualmente i collegamenti tra le pagine, i widget Menu offrono un modo intuitivo e flessibile per aggiungere elementi di navigazione al sito.
Come gli altri widget, per aggiungere i menu è sufficiente trascinare il widget Menu sulla pagina. In questo modo le etichette dei menu vengono automaticamente popolate con i nomi delle pagine. Se poi si modifica il nome di una pagina nella vista Pianificazione, l’etichette di menu corrispondente viene aggiornata automaticamente.

È possibile aggiungere menu orizzontali e verticali. Inoltre, Adobe Muse consente di creare menu di tipo sandwich e stati di rollover. In questo articolo viene spiegato come fare tutto ciò in Adobe Muse.

 

Aggiungere un widget Menu

  1. Con la pagina mastro aperta per la modifica in vista Progettazione, aprite la Libreria di widget. Se non è già aperta, scegliete Finestra > Libreria di widget.

  2. Nel pannello Libreria di widget, fate clic su Menu per espandere l’elenco dei widget Menu. A seconda del design del sito e dalla posizione in cui desiderate inserire il menu, selezionate una delle seguenti opzioni:

    • Orizzontale per aggiungere un menu orizzontale.
    • Verticale per aggiungere un menu verticale.
    Selezionare il widget per menu verticale o orizzontale in Adobe Muse
    Selezionare il widget per menu verticale o orizzontale
  3. Con lo strumento Selezione trascinate il widget e collocatelo nella posizione desiderata nel layout. Ad esempio, posizionate un widget menu Orizzontale nella sezione dell’intestazione.

    Posizionate il widget Menu sopra l’immagine di sfondo con il nastro marrone nell’intestazione.
    Posizionate il widget Menu sopra l’immagine di sfondo con il nastro marrone nell’intestazione.

    Il menu presenta automaticamente i nomi delle pagine che avete creato, nello stesso ordine in cui appaiono nella mappa del sito. Le etichette del menu vengono automaticamente collegate alle pagine e sono dinamiche. Se in seguito rinominate o spostate le pagine, il menu viene aggiornato automaticamente e i collegamenti continuano a funzionare come previsto.

  4. Fate clic sul selettore di colore nel pannello di controllo e impostate il colore del menu. Quindi, utilizzate il campo Dimensione testo per impostare la dimensione del testo del menu.

    Scegliere la dimensione e il colore del testo
    Impostate il colore e la dimensione del font per definire il testo dei pulsanti del widget Menu orizzontale.

Configurare e personalizzare i widget Menu

Una volta aggiunto il widget Menu nel layout, potete personalizzarlo in base alle vostre necessità. Potete configurare il menu utilizzando il pannello Opzioni.  Il pannello Opzioni è un pannello contestuale che consente di modificare le impostazioni specifiche per il widget in questione. Utilizzate questo pannello per controllare il comportamento dei widget e il modo in cui ne viene visualizzato il contenuto.

  1. Selezionare il widget Menu e fate clic sulla freccia blu nell’angolo in alto a destra del widget. Viene visualizzato il pannello Opzioni.

    Configurare il widget Menu dal pannello Opzioni
    Configurare il widget Menu dal pannello Opzioni
  2. Configurate il widget Menu dal pannello Opzioni. Potete configurare le seguenti opzioni:

    • Tipo di Menu specifica quali pagine includere nella navigazione del sito. Selezionate Pagine principali per includere solo le pagine di primo livello. Selezionate Tutte le pagine per includere anche le pagine secondarie. Le pagine secondarie vengono visualizzate come sottomenu. Selezionate Manuale per scegliere manualmente le pagine da includere nel widget Menu.
    • Direzione: specificate se aggiungere il menu in orizzontale o in verticale.
    • Modifica insieme: selezionate questa casella di controllo per aggiornare tutte le voci di menu insieme. Per impostazione predefinita, questa casella di controllo è selezionata. Se la deselezionate, le configurazioni scelte vengono applicate solo alla voce di menu selezionata.
    • Dimensione elemento: specificate se le voci di menu devono essere distribuite uniformemente per larghezza o per dimensione.
    • Mostra icona a sinistra: per impostazione predefinita, questa casella di controllo non è selezionata. Selezionatela per aggiungere un’icona a sinistra di ogni voce di menu.
    • Mostra etichetta: per impostazione predefinita, questa casella di controllo è selezionata. Se la deselezionate, le etichette dei menu non vengono più visualizzate.
    • Mostra icona a destra: selezionate Disattivato per disattivare le icone a destra. Selezionate Attivato per configurare le icone a destra delle voci del menu. L’icona a destra è utile se desiderate aggiungere delle frecce per indicare che sono presenti dei sottomenu. Inoltre, potete scegliere l’opzione Solo sottomenu per configurare l’icona a destra per le sole voci di menu che hanno un sottomenu.
    • Posizionamento parti: consente di specifica il punto di inizio per le parti interne di ogni scheda.
    Configurare i widget Menu con il pannello Opzioni
    Configurare i widget Menu con il pannello Opzioni

Modificare e formattare le etichette del menu

In questa sezione viene descritto come aggiornare le etichette di testo che presentano i nomi delle pagine nelle voci di menu. Considerate un widget per menu orizzontale che utilizza un design di base con semplici collegamenti testuali, con la stessa formattazione applicata a tutti gli stati.

  1. Fate doppio clic e selezionate l’etichetta di menu da modificare.

  2. Per modificare il testo della voce di menu, aprite il pannello Testo (Finestra > Testo). Con l’etichetta selezionata, usate il pannello Testo per formattare il testo selezionando le opzioni desiderate:

    • Font: selezionate il font da applicare all’etichetta del menu.
    • Stile font: se necessario, selezionate Corsivo o Grassetto.
    • Dimensione: selezionate la dimensione del font per l’etichetta del menu.
    • Colore: nel campo a discesa Colore, immettete il codice esadecimale del colore da applicare. Oppure selezionate un colore utilizzando il contagocce.
    Modificare le etichette nei widget Menu
    Modificare le etichette nei widget Menu
  3. Utilizzate il pannello Testo per configurare i valori del margine dell’etichetta di menu. Se avete già uno stile per i collegamenti ipertestuali che desiderate applicare all’etichetta di menu, selezionatelo dal campo a discesa accanto a abc.

    Per applicare uno stile di paragrafo, selezionatelo dal campo a discesa Stile paragrafo nel pannello Testo.

  4. Per applicare Riempimento e Traccia alle etichette dei menu, fate doppio clic e selezionate l’etichetta di menu. Dalla barra degli strumenti nella parte superiore della pagina, selezionate il colore di riempimento e di traccia.

    Dalla barra degli strumenti potete anche modificare lo Spessore traccia e attivare il raggio d’angolo per le etichette di menu.

    Applicare le impostazioni di riempimento e tratto alle etichette di menu
    Applicare le impostazioni di riempimento e tratto alle etichette di menu

Creare stati di rollover per le voci di menu

  1. Con lo strumento selezione, selezionate l’etichetta di menu per la quale desiderate creare lo stato di rollover. Aprite il pannello Stati. Gli stati predefiniti del pulsante sono già definiti. Fate clic sulla miniatura Rollover nel pannello Stati per modificare questo stato.

  2. Con l’etichetta di menu ancora selezionata, usate il selettore colore Riempimento e fate clic sul campione bianco con diagonale rossa per non applicare alcun riempimento (trasparente).

  3. Fate clic sullo strumento testo e dal selettore colore nel pannello di controllo scegliete un colore avorio per lo stato Rollover.

  4. Nel pannello Stati, selezionate lo stato Mouse premuto. Con lo strumento testo ancora selezionato, impostate il testo per lo stato di mouse premuto su un colore più scuro, selezionando un campione di colore nel selettore colore del pannello di controllo.

  5. Nel pannello Stati, selezionate lo stato Attivo. Fate clic sul collegamento Riempimento nel pannello di controllo per aprire il menu Riempimento.

  6. Nel menu Riempimento, fate clic sul selettore colore e impostate il colore di riempimento su Nessuno. Fate clic sull’icona cartella accanto alla sezione Immagine. Nella finestra di dialogo Importa, individuate e selezionate il file dell’immagine di sfondo, denominato top-nav-over.png. Fate clic su Seleziona per selezionarlo. La finestra di dialogo Importa viene chiusa automaticamente.

  7. Sempre nel menu Riempimento, verificate che l’opzione Adatta sia impostata su Dimensione originale. Quindi, nella sezione Posizione, fate clic sul punto centrale nel simbolo con nove punti. L’immagine di riempimento di sfondo viene posizionata al centro, senza alcun colore di riempimento e con le sue dimensioni originali. Fate clic ovunque per chiudere il menu Riempimento.

    Definire gli stati dei pulsanti
    Definite lo stato attivo della voce di menu.

    Poiché l’opzione predefinita Modifica insieme è stata abilitata nel widget Menu orizzontale, tutte le modifiche apportate al pulsante sono state automaticamente applicate a tutti i pulsanti della barra di navigazione.

  8. Scegliete File > Salva per salvare il lavoro. Fate clic sulla X nella scheda A-Mastro per chiudere la pagina in vista Progettazione e tornare alla Pianificazione. Tutte le miniature di pagina vengono aggiornate con il contenuto aggiunto alla pagina mastro.

    Nota:

    Le guide delle aree di intestazione e piè di pagina possono essere modificate solo nelle pagine mastro del sito. Se desiderate modificare le dimensioni di tali aree, fate doppio clic sulla pagina mastro per aprirla in vista Progettazione e riposizionate le guide.

Creare un menu per dispositivi mobili

Adobe Muse consente anche di creare un menu di tipo sandwich o per dispositivo mobile. Quando si crea questo tipo di menu, un sottomenu a discesa appare quando si passa il cursore sopra il menu principale. Per creare questo tipo di menu, consultate Creare sottomenu con i widget Composizione.

Escludere delle pagine dal menu

Quando create una nuova pagina di primo livello nel sito in vista Pianificazione, Adobe Muse aggiunge automaticamente la pagina al menu. Tuttavia, in alcune situazioni potreste volere testare una pagina prima renderla accessibile ai visitatori, o nascondere una determinata pagina. Adobe Muse consente di escludere dalla navigazione pagine specifiche, che non verranno quindi elencate come voci di menu nel widget Menu.

Per escludere le pagine dal menu Widget:

  1. Se avete già creato la mappa del sito, passate alla vista Pianificazione di Adobe Muse. Per questa procedura, supponiamo di avere una mappa del sito con le pagine Home, Portfolio, La mia storia, Contatti e Prodotti.

    Visualizzare la mappa del sito nella vista Pianificazione
    Visualizzare la mappa del sito nella vista Pianificazione

    Se passate alla pagina mastro e trascinate un widget Menu, tutte le pagine vengono incluse nel menu.

  2. Per escludere una pagina, nella vista Pianificazione fate clic con il pulsante destro del mouse sulla pagina da escludere sulla pagina da escludere. Fate clic su Opzioni menu > Escludi pagina dai menu.

    Ad esempio, per escludere la pagina Prodotti, fate clic con il pulsante destro del mouse su Prodotti. Quindi, selezionate Opzioni menu > Escludi pagina dai menu.

    Escludere determinate pagine dai widget Menu
    Escludere determinate pagine dai widget Menu

    Ora tornate alla pagina mastro per visualizzare il menu e osservate come la voce Prodotti sia stata rimossa dal widget Menu.

    Nota:

    Per eliminare l’intero menu, passate alla pagina in cui avete aggiunto il widget Menu. Selezionate il widget e premete il tasto Canc.

    Se desiderate che una voce di menu appaia senza collegamento, fate clic con il pulsante destro del mouse sulla pagina in questione nella vista Pianificazione. Selezionate Opzioni menu > Includi pagina senza collegamento ipertestuale.

    Questa opzione è utile in diversi casi, ad esempio se avete una pagina Prodotti con rollover e desiderate che i visitatori possano fare clic solo sulle categorie di prodotti, ma non sulle etichette Prodotti principali.

Utilizzo dei widget per menu

Utilizzo dei widget per menu
Questo video di Brian Wood illustra come inserire nella pagina un widget per menu.
Adobe Press - Peachpit

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online