How to Create a Javascript Drop Down Menu With PHP

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.

Difficulty:

Moderate

Instructions

Things You'll Need

• Text editor
• Web browser
• Server running PHP

1. Server-side PHP Scripting internet image by Raimundas from Fotolia.com

   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');
   $contactLink = array('contact', '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, $dropDown, $contactLink);

   //read out the array values into HTML elements

   $menu = '<ul id="topNav">';

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

   $menu .= "</ul>";

   //finally, output the result to the browser:

   echo $menu;

   ?>

2. JavaScript runs in the client's browser laptop image by PinkShot from Fotolia.com

   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];
   dropdown.onmouseover = function(){revealDropdown();}
   dropdown.onmouseout = function(){hideDropdown();}
   }

   function hideDropdown(){
   var dropdown = document.getElementById('topNav').getElementsByTagName('ul')[0];
   var items = dropdown.getElementsByTagName('li');
   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';
   }
   }
   }

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

   </script>

3. Style your web page's appearance with CSS computer image by Kit Wai Chan from Fotolia.com

   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>

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

• PHP Manual: foreach()
• PHP Manual: string concatenation operator
• W3Schools: JavaScript onmouseover event