Hvordan lage en Javascript-rullegardinmeny med PHP

Rullegardinmenyer er en stilig, sofistikert teknikk for å vise nettsiden navigasjonslenker. En rullegardinmeny organiserer en rekke linker under en gitt kategori. Bare den øverste nivå kategorien linken blir vist til et nettsted besøkende holder musen over den øverste linken i menyen, da resten av menyen er avslørt. Skjule menyen til den er aktivert på denne måten gjør at et stort antall linker til å passe inn i en liten plass, slik at et nettsted med mange sider kan bruke en kompakt header navigasjonsmenylinjen.

Bruksanvisning

1

Opprett en navigasjonsmeny med PHP ved å hente navn og relativ adresse for hver lenke fra systemet. På et mindre område, kan denne informasjonen bli hard kodet inn i manuset som skaper navigeringslinjen; mens en større området vil trolig bruke et Content Management System for å lagre koblingen informasjon i en database og hente det når sider åpnes. For eksempel kan du lage en meny ved å lese ut en rekke arrays.

<? Php

// Tildele verdier til arrays

$ Homelink = array ( 'hjem', 'index.php')
GÅ
$ CONTACT = array ( 'kontakt', 'contact.php')
GÅ

$ Toplink = array ( 'navn', 'URL')
GÅ
$ Nextlink = array ( 'navn', 'URL')
GÅ
$ ThirdLink = array ( 'navn', 'URL')
GÅ
$ FourthLink = array ( 'navn', 'URL')
GÅ

$ Dropdown = array ($ Toplink, $ Nextlink, $ thirdLink, $ fourthLink);

$ TopNavMenu = array ($ Homelink, $ dropdown, $ CONTACT)
GÅ

// Lese ut tabellverdiene i HTML-elementer

$ Meny = '<ul id = \ "topnav \">'
GÅ

foreach ($ topNavMenu som $ element) {
if (! is_array ($ element [0])) {
$ Menyen. = '<Li> <a href=\"'.$item[1].'\">'. $ Element [0]. </a> </ Li> '
GÅ
}ellers{
// Hvis dette er rullegardinmenyen
$ Menyen. = '<Li> <ul>'
GÅ
foreach ($ element som $ link) {
$ Menyen. = '<Li> <a href=\"'.$link[1].'\">'. $ Linken [0]. </a> </ Li> '
GÅ
}
$ Menyen. = \ "</ Ul> </ li> \"
GÅ
}
}

$ Menyen. = \ "</ Ul> \"
GÅ

// Slutt, utgang resultatet til leseren:

echo $ menyen
GÅ

?>

2

Lag rullegardin funksjonalitet med Javascript. Når siden lastes, bruker Javascript for å skjule rullegardinmenyelementene; denne måten menyen er fortsatt tilgjengelig til alternative nettlesere som kanskje ikke har Javascript evner. Når nettsiden besøkende holder henne musen over toppen elementet i rullegardinmenyen, avdekke dropdown elementer ved å sette 'stil' egenskap av de relevante elementer:

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

fungere initializeDropdown () {
hideDropdown (); // først, kaller funksjonen for å skjule rullegardinmenyen.
// Finne første sorterte liste som er et barn node i topnav element

Var dropdown = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
GÅ
dropdown.onmouseover = function () {revealDropdown ();}
dropdown.onmouseout = function () {hideDropdown ();}
}

funksjon hideDropdown () {
Var dropdown = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
GÅ
Var elementer = dropdown.getElementsByTagName ( 'li')
GÅ
for (var i = 0; i <items.length; i ++) {// løkke gjennom elementene i nedtrekksmenyen
if (jeg! = 0) {// fordi vi ønsker den første til å være synlig
elementer [i] .style.display = "none"
GÅ
}
}
}

funksjon revealDropdown () {
Var dropdown = document.getElementById ( 'topnav'). getElementsByTagName ( 'ul') [0]
GÅ
Var elementer = dropdown.getElementsByTagName ( 'li')
GÅ
for (var i = 0; i <items.length; i ++) {// løkke gjennom elementene i nedtrekksmenyen
elementer [i] .style.display = 'blokk'
GÅ
}
}

</ Script>

3

Style meny med CSS (Cascading Style Sheets). Ta ut det ekstra polstring og listen markør dot. Du vil sannsynligvis ønske de øverste nivå listeelementer å flyte venstre; men dine rullegardinlisteelementer bør ikke. Du ønsker kanskje å gi din meny ekstra stil attributter, for eksempel en bakgrunnsfarge eller bilde, rammer rundt linkene, og andre tilpassede stil attributter som passer din smak og for å passe inn med den generelle layout design av nettsiden din.

Plasser en uttalelse som dette i overskriften på dokumentet:

<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 Sett det hele sammen og teste din side på en PHP-aktivert server ved å vise den i en nettleser. Du skal se en enkel dropdown navigasjonsmeny.