Hur man skapar en Javascript rullgardinsmenyn Med PHP

rullgardinsmenyerna är en elegant , sofistikerad teknik för att visa länkar webbplats navigering . En rullgardinsmeny organiserar ett antal länkar under angiven kategori . Endast den högsta nivån kategori länk visas tills en webbplats besökare håller musen över den översta länken i menyn , då resten av menyn är avslöjat . Dölja menyn tills den aktiveras på detta sätt tillåter ett stort antal länkar för att passa in i ett litet utrymme , så att en webbplats med många sidor kan använda en kompakt header bar navigeringsmenyn . Saker du behöver
Text Redaktör Web Server Browser Review kör PHP
Visa fler instruktioner
1 Server - side PHP Scripting

Skapa ett navigeringen med PHP genom att hämta namn och relativa adressen för varje länk från ditt system . På en mindre plats , kan denna information hårdkodade i manuset som skapar navigeringsfältet , medan en större plats kommer förmodligen att använda ett Content Management System för att lagra länk information i en databas och hämta den när sidorna hämtas . Till exempel kan du skapa en meny genom att läsa ur en samling av matriser .

< ? Php

//tilldela värden till arrayer

$ HomeLink = array ( ' hem ' , ' index.php ' ) ; $ contactLink = array ( ' kontakt ' , ' contact.php ');

$ toplink = array ( ' name' , 'url ' ) ; $ Nextlink = array ( ' name' , 'url ' ) ; $ thirdLink = array ( ' name' , 'url ' ) ; $ fourthLink = array ( ' name' , 'url ');

$ dropDown = array ( $ toplink , $ Nextlink , $ thirdLink , $ fourthLink ) ,

$ topNavMenu = array ( $ HomeLink , $ listrutan $ contactLink ) ,

//läsa ut matrisvärdena in HTML-element

$ menu = '

" ,


foreach ( $ topNavMenu som $ post ) {if ( is_array ( $ post [ 0 ] ) ) { $ menu = '

• ' $ artikeln [ 0 ] " < /a > < /li > ' , . . . } else { //om det är rullgardinsmenyn $ menu = '
• " , . foreach ( $ objektet som $ link ) { $ menu = '
  • < a href = " ' . . $ link [ 1 ] ' " > ' $ link [ 0 ] " < /a > < /li > ' , . . . } $ menu = " . < /ul > < /li > " ; } }
    

    $ menu = " < /ul > ";
    

    //slutligen mata ut resultatet till webbläsaren : .
    

    echo $ meny;
    

    ? >
    2 JavaScript körs i klientens webbläsare

    Skapa dropdown funktionaliteten med JavaScript . När sidan laddas , använder JavaScript för att dölja rullgardinsmenyn poster , på detta sätt din meny är fortfarande tillgänglig för alternativa webbläsare som kanske inte har JavaScript kapacitet . När hemsidan besökaren håller hennes musen över den översta posten i rullgardinsmenyn , avslöja dropdown objekt genom att ställa in "stil" attributet för de relevanta delar :