Il menu viene utilizzato per facilitare la navigazione dell'utente attraverso le sezioni del sito. Per attirare l'attenzione del visitatore, il menu dovrebbe essere funzionale, facile da usare e allo stesso tempo essere combinato con il design dell'intera risorsa.
Istruzioni
Passo 1
Prima di creare un menu, decidi il suo tipo. È possibile creare una casella a discesa orizzontale o verticale che verrà mostrata all'utente quando l'utente passa sopra di essa con il cursore del mouse. Quando scegli un menu particolare, puoi essere guidato da quanto sarà conveniente per i visitatori usarlo e come sarà combinato con il design.
Passo 2
Dopo aver scelto un tipo di menu, apri il file di pagina utilizzando l'editor di testo che utilizzi per modificare l'HTML. Passa alla sezione di codice desiderata in cui desideri inserire l'elemento dell'interfaccia.
Passaggio 3
Successivamente, crea un elenco di opzioni creando un blocco e creando un elenco numerato con ID assegnato. Per esempio:
- Collegamento 1
- Collegamento 2
- Collegamento 3
In questo esempio, ho creato un elenco puntato di tre elementi e l'ho posizionato in un livello div con l'ID del pannello ID.
Passaggio 4
Vai al blocco di sezione della tua pagina e crea il menu del foglio di stile a cascata appropriato. Se desideri creare un menu orizzontale, puoi includere l'attributo in linea per l'elenco risultante:
#panel ul li {display: inline; }
Passaggio 5
Per creare una linea orizzontale lungo l'intera lunghezza della pagina, puoi utilizzare il seguente codice:
#panel ul {margine sinistro: 0; imbottitura: 2px 0; }
Passaggio 6
Quindi puoi eseguire la divisione visiva in rettangoli:
#panel ul li a {margin-left: 3px; bordo: 1px; imbottitura: 2px 3px; sfondo: blu; }
Questo codice imposta i rientri di testo dagli elementi del bordo tramite gli attributi margin-left e padding e imposta anche un colore di sfondo per ciascuno degli elementi dell'elenco. In questo esempio, il colore è blu, ma puoi cambiarlo a tua discrezione.
Passaggio 7
Per puntare all'elemento della pagina corrente che è selezionato nella scheda, impostare i parametri appropriati sulla classe aperta:
#menu ul li a # open {sfondo: rosso; bordo-basso: 1px; }
La pagina corrente selezionata nel pannello verrà ora visualizzata in rosso.
Passaggio 8
Salva le modifiche al file e verifica la funzionalità del codice scritto aprendo la tua pagina tramite un browser. Per impostare opzioni di visualizzazione aggiuntive, puoi sempre aggiungere CSS o HTML per migliorare l'aspetto dell'oggetto.
