How to Create a Javascript Drop Down Menu With PHP

Save

Dropdown menus are a stylish, sophisticated technique for displaying website navigation links. A dropdown menu organizes a number of links under a given category. Only the top-level category link is shown until a website visitor holds their mouse over the top link in the menu, at which time the rest of the menu is revealed. Hiding the menu until it is activated in this manner allows a large number of links to fit into a small space, so that a website with many pages may use a compact header navigation menu bar.

Things You'll Need

  • Text editor
  • Web browser
  • Server running PHP
  • Create a navigation menu with PHP by retrieving the name and relative address of each link from your system. On a smaller site, this information may be hard coded into the script that creates the navigation bar; whereas a larger site will probably use a Content Management System to store link information in a database and retrieve it when pages are accessed. For example, you might create a menu by reading out an array of arrays.

    <?php

    //assign values to the arrays

    $homeLink = array('home', 'index.php')
    GO
    $contactLink = array('contact', 'contact.php')
    GO

    $topLink = array('name', 'URL')
    GO
    $nextLink = array('name', 'URL')
    GO
    $thirdLink = array('name', 'URL')
    GO
    $fourthLink = array('name', 'URL')
    GO

    $dropDown = array($topLink, $nextLink, $thirdLink, $fourthLink);

    $topNavMenu = array($homeLink, $dropDown, $contactLink)
    GO

    //read out the array values into HTML elements

    $menu = '<ul id=\"topNav\">'
    GO

    foreach($topNavMenu as $item){
    if(!is_array($item[0])){
    $menu .= '<li><a href=\"'.$item[1].'\">'.$item[0].'</a></li>'
    GO
    }else{
    //if this is the dropdown menu
    $menu .= '<li><ul>'
    GO
    foreach($item as $link){
    $menu .= '<li><a href=\"'.$link[1].'\">'.$link[0].'</a></li>'
    GO
    }
    $menu .= \"</ul></li>\"
    GO
    }
    }

    $menu .= \"</ul>\"
    GO

    //finally, output the result to the browser:

    echo $menu
    GO

    ?>

  • Create the dropdown functionality with JavaScript. When the page loads, use JavaScript to hide the dropdown menu items; this way your menu is still accessible to alternative browsers that might not have JavaScript capabilities. When the website visitor holds her mouse over the top item in the dropdown menu, reveal the dropdown items by setting the ‘style’ attribute of the relevant elements:

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

    function initializeDropdown(){
    hideDropdown();//first, call the function to hide the dropdown menu.
    //find the first unordered list that's a child node of the topNav element

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

    function hideDropdown(){
    var dropdown = document.getElementById('topNav').getElementsByTagName('ul')[0]
    GO
    var items = dropdown.getElementsByTagName('li')
    GO
    for(var i=0; i<items.length; i++){//loop through the items in the dropdown menu
    if(i != 0){//because we want the first one to remain visible
    items[i].style.display = 'none'
    GO
    }
    }
    }

    function revealDropdown(){
    var dropdown = document.getElementById('topNav').getElementsByTagName('ul')[0]
    GO
    var items = dropdown.getElementsByTagName('li')
    GO
    for(var i=0; i<items.length; i++){//loop through the items in the dropdown menu
    items[i].style.display = 'block'
    GO
    }
    }

    </script>

  • Style your menu with CSS (Cascading Style Sheets). Remove the additional padding and the list marker dot. You will probably want the top-level list items to float left; but your dropdown list items should not. You may wish to give your menu additional style attributes, such as a background color or image, borders around the links, and other custom style attributes to suit your taste and to fit in with the overall layout design of your web page.

    Place a statement like this in the header of your document:

    <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>

  • Put it all together and test your page on a PHP-enabled server by viewing it in a browser. You should see a basic dropdown navigation menu.

References

  • Photo Credit internet image by Raimundas from Fotolia.com laptop image by PinkShot from Fotolia.com computer image by Kit Wai Chan from Fotolia.com
Promoted By Zergnet

Comments

You May Also Like

  • How to Create a Restaurant Menu Card

    Running a restaurant and keeping pace in the highly competitive food business can be a challenge. Restaurant owners need all the advantages...

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

NEW!
M
What's for Dinner, Pinner?
Get recipes based on your pins!
GO