menu a discesa sono una tecnica sofisticata di stile per la visualizzazione dei link di navigazione sito. Un menu a discesa organizza una serie di collegamenti in una determinata categoria. Viene mostrato solo il link categoria di livello superiore fino a quando un visitatore del sito detiene il mouse sopra il link in alto nel menù, momento in cui si rivela il resto del menu. Nascondere il menu fino a quando non viene attivato in questo modo consente un gran numero di link per adattarsi in un piccolo spazio, in modo che un sito web con molte pagine può utilizzare un colpo di testa compatto barra dei menu di navigazione.

istruzione

1

Creare un menu di navigazione con PHP recuperando il nome e l'indirizzo relativo di ogni collegamento dal sistema. Su un sito più piccolo, queste informazioni possono essere difficile codificato nello script che crea la barra di navigazione; mentre un sito più grande sarà probabilmente utilizzare un Content Management System per memorizzare le informazioni di collegamento in un database e recuperare quando le pagine sono accessibili. Ad esempio, è possibile creare un menu con la lettura fuori un array di array.

<? Php

// Assegnare valori agli array

$ HomeLink = array ( 'casa', 'index.php')
ANDARE
$ CONTACTLINK = array ( 'contatto', 'contact.php')
ANDARE

$ TopLink = array ( 'name', 'URL')
ANDARE
$ Nextlink = array ( 'name', 'URL')
ANDARE
$ ThirdLink = array ( 'name', 'URL')
ANDARE
$ FourthLink = array ( 'name', 'URL')
ANDARE

$ Discesa = array ($ TopLink, $ Nextlink, $ thirdLink, $ fourthLink);

$ TopNavMenu = array ($ HomeLink, $ discesa, $ CONTACTLINK)
ANDARE

// Leggere i valori della matrice in elementi HTML

$ Menu = '<id ul = \ "topnav \">'
ANDARE

foreach ($ topNavMenu da $ item) {
if (! is_array ($ item [0])) {
$ Menu. = '<Li> <a href=\"'.$item[1].'\">'. $ Item [0]. '</a> </ Li>'
ANDARE
}altro{
// Se questo è il menu a discesa
$ Menu. = '<Li> <ul>'
ANDARE
foreach ($ item da $ link) {
$ Menu. = '<Li> <a href=\"'.$link[1].'\">'. $ Link [0]. '</a> </ Li>'
ANDARE
}
$ Menu. = \ "</ Ul> </ li> \"
ANDARE
}
}

$ Menu. = \ "</ Ul> \"
ANDARE

// Infine, l'uscita il risultato al browser:

menu di $ echo
ANDARE

?>

2

Creare la funzionalità discesa con JavaScript. Quando la pagina viene caricata, utilizzare JavaScript per nascondere le voci di menu a tendina; in questo modo il vostro menu è ancora accessibile a browser alternativi che potrebbero non avere le capacità JavaScript. Quando il visitatore del sito tiene il suo mouse sopra la voce in alto nel menu a discesa, visualizzare le opzioni di discesa impostando l'attributo di 'stile' degli elementi rilevanti:

<Script type = \ "text / javascript \">
window.onload = function () {initializeDropdown ();}

funzione initializeDropdown () {
hideDropdown (); // primo, chiamare la funzione per nascondere il menu a discesa.
// Trova la prima lista non ordinata che è un nodo figlio dell'elemento topnav

var discesa = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
ANDARE
dropdown.onmouseover = function () {revealDropdown ();}
dropdown.onmouseout = function () {hideDropdown ();}
}

Funzione hideDropdown () {
var discesa = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
ANDARE
articoli var = dropdown.getElementsByTagName ( 'li')
ANDARE
for (var i = 0; i <items.length; i ++) {// ciclo tra le voci del menu a discesa
se (i! = 0) {// perché vogliamo il primo a rimanere visibile
articoli [i] .style.display = 'none'
ANDARE
}
}
}

Funzione revealDropdown () {
var discesa = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
ANDARE
articoli var = dropdown.getElementsByTagName ( 'li')
ANDARE
for (var i = 0; i <items.length; i ++) {// ciclo tra le voci del menu a discesa
articoli [i] = .style.display 'block'
ANDARE
}
}

</ Script>

3

Stile vostro menu con (Cascading Style Sheets) CSS. Rimuovere l'imbottitura supplementare e il punto elenco dei marker. Probabilmente si vorrà le voci di elenco di livello superiore di galleggiare a sinistra; ma le vostre voci di elenco a discesa non dovrebbe. Si potrebbe desiderare di dare il vostro menu di attributi di stile aggiuntivi, come un colore di sfondo o l'immagine, i bordi intorno ai collegamenti, e gli attributi altro stile personalizzato secondo i propri gusti e in sintonia con il disegno complessivo layout della pagina web.

Posizionare una dichiarazione come questa nell'intestazione del documento:

<Style type = \ "text / css \">

topnav ul {margin: 0; padding: 0; } Topnav li {float: left; list-style: none; margin-right: 30px; padding: 0;} topnav li ul li {float: none;}

</ Style>

4 Mettere tutto insieme e testare la vostra pagina su un server PHP abilitato visualizzando in un browser. Si dovrebbe vedere un menu a base di navigazione a tendina.