Creazione di un menu di web è facile e richiede minima esperienza di programmazione. Questo è possibile grazie agli sforzi di persone che hanno condiviso le loro soluzioni in articoli e pacchetti di software libero. Ci sono molte opzioni disponibili, solitamente basandosi su standard web basato su testo HTML (hypertext markup language), CSS (fogli di stile CSS), markup e lo stile.
Istruzioni
Costruire il vostro menu e sottomenu
1
Creare una pagina HTML per il contenuto. Fate questo mediante la creazione di una pagina di testo semplice con estensione HTML, fornendo la struttura di base per un documento con tag HTML:
< html >
<head>
</head>
<body>
<body>
< html >
2
Scrivere una struttura per il contenuto del sito. Iniziare elencando le sezioni principali che appariranno al primo livello del menu di navigazione del tuo sito. Quindi, per ciascuno degli elementi presenti nell'elenco principale, creare un sottomenu con i principali temi che appariranno sotto di esso. È possibile continuare questo processo per i livelli che ti piace.
3
Creare una voce di elenco per ogni termine che appare nella struttura. Questo scopo, è necessario mettere il tag di elemento di elenco HTML (< li >) intorno alle parole che l'utente può selezionare. Ad esempio, "< li > Chi siamo </li >" crea una voce di menu.
4
Aggiungere il menu principale al corpo del documento html, utilizzando un elenco non ordinato (< ul >) con un attributo id che indica che il contenuto allegato deve essere presentato come un menu.
< html >
<head>
</head>
<body>
<ul id="nav">
</ul>
<body>
< html >
5
Posizionare gli elementi dell'elenco per il vostro menu principale tra il tag ul:
< ul id = "nav" >
<li>Home</li>
<li>Articles</li>
<li>Blog</li>
<li>Photos</li>
<li>About Us</li>
</UL >
6
Creare elenchi per ogni sottomenu come HTML unordered list (< ul >) e inserire gli elementi di elenco appropriato all'interno di ciascuno di essi. Ad esempio, il sottomenu per una tipica sezione "Chi siamo" è:
< ul >
<li>Our People</li>
<li>Our History</li>
<li>Contact Us</li>
</UL >
7
Aggiungere i collegamenti al sistema di menu inserendo HTML ancorano Tag (< a >) intorno a ciascuna delle parole all'interno dei tag di elemento di elenco. Specificare "#" (pagina corrente) come l'URL da visitare quando l'utente fa clic. Ad esempio, il markup per la voce "About Us" diventa: "< li >< un href ="#"> About Us < /a >< / li >." Il link alla pagina corrente non produrrà alcuna azione visibile senza più sforzo codifica.
8
Creare le relazioni di menu e sottomenu inserendo le liste di sottomenu all'interno dei tag di ancoraggio per i termini padre appropriato. Specifica le opzioni di sottomenu da visualizzare quando il link viene cliccato. Ad esempio, la seguente indica le pagine che forniscono informazioni "su di noi:"
<li><a href="#">About Us
<ul>
<li><a href="#">Our People</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</a></li>
Stile del Menu a discesa
9
Creare una pagina (CSS) del foglio di stile CSS per specificare l'aspetto del menu. Fate questo mediante la creazione di una pagina di testo semplice con estensione "CSS", ad esempio "menu.css". Includere il foglio di stile nel documento HTML inserendo un tag link all'interno della testa del documento:
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>10
Specificare gli stili per il menu principale (#nav) e tutti i sottomenu (ul) racchiusi all'interno di esso. Le seguenti impostazioni di rimuovere lo styling, margini e spaziatura interna predefinita da elementi dell'elenco utilizzati all'interno del menu. Questo crea una tabula rasa per applicare il tuo stile di menù scelto.
NAV, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
11
Specificare gli stili per tutti i collegamenti ipertestuali (a) racchiusi all'interno del menu (#nav).
Il codice riportato di seguito indica al browser di visualizzare il collegamento come un blocco in una larghezza specificata.
In questo caso, la larghezza è indicata in unità di "em" che specifica unità relativo alla dimensione di carattere predefinito corrente (1em). L'impostazione di 10em è dieci volte la dimensione del carattere predefinito.
NAV a {
display: block;
width: 10em;
}
12
Specificare gli stili per tutte le voci di menu e sottomenu racchiuse all'interno del menu. Il codice riportato di seguito stabilisce la larghezza del blocco contenente il collegamento di menu e indica al browser di visualizzare il menu di sinistra quanto possibile fino a quando scontra con limiti di contenuto visualizzati in precedenza.
NAV li {
float: left;
width: 10em;
}
13
Specificare gli stili specifici di sottomenu (ul) del menu principale (#nav). Il codice seguente è quello che nasconde i sottomenu fino a quando l'utente passa sopra il relativo termine padre. Parte superiore sinistra dell'area visibile di un elemento HTML ha coordinate "0,0". Utilizzando in modo efficace una grande coordinata negativa per il bordo sinistro dei sottomenu li nasconde quando non in uso.
NAV li ul {
position: absolute;
width: 10em;
left: -999em;
}
14
Re-impostare il sottomenu associato alla posizione predefinita quando l'utente passa sopra una voce di menu. Questo farà sì che il sottomenu "magicamente" nuovamente in posizione visibile e scompaiono quando l'utente si sposta.
NAV li:hover ul {
left: auto;
}
Perfezionare il vostro Menu
15
Aggiungere ulteriori styling per supportare la logica di sottomenù annidati. È necessario creare regole che rispecchiano in modo specifico ogni profondità di annidamento di elemento HTML. Il seguente codice gestisce tre livelli di annidamento. Ogni livello diventa progressivamente più complesso:
NAV li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul #nav li.sfhover ul ul ul {
left: -999em;
}
NAV li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, ul li.sfhover #nav, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
16
Selezionare una soluzione di menu che può essere facilmente adattata all'applicazione con modifiche minime. Una soluzione includerà i fogli di stile CSS che indirizzo qualità estetiche, quali l'aspetto colore e font. Ancora più importante, esso deve contenere codice Javascript che implementa comportamenti sofisticati e regola per bug e limitazioni di funzionalità specifiche del browser.
17
Seguire le istruzioni per il pacchetto selezionato per specificare gli URL per le voci di menu del livello più basse. Una soluzione basata su Javascript richiede funzioni del gestore per le ancore di aggancio. Se non si utilizza Javascript, è necessario sostituire il # in vostri attributi href ancoraggio con l'URL della pagina di destinazione.
Consigli & Avvertenze
- Menu animati che slide aperto sono un esempio di effetti che possono essere raggiunti con un pacchetto di Javascript.
- Specificando dimensioni utilizzando dimensioni di costante pixel (px)-- invece di unità em - rischia di degradare dal menu aspetto e il comportamento per gli utenti che hanno impostato il proprio browser per visualizzare i caratteri più grandi.