Create a vertical pulldown script that displays navigational headers and when you click on a header new links appear underneath it, this effect works both in Firefox and Internet Explorer.
We will be doing all of our code in just 1 file to make this easier, later on you can split it all up into different files for your applications but for the ease of this tutorial everything will be in the same file.

This is a great effect for websites that have limited room and want to clean up there navigation a bit. It also provides visitors to your website the choice to display certain links or not, if there are links they do not want to see they can just hide them.

So first we need to start off by creating our HTML document and defining our javascript function in the of our document.

PLAIN TEXT
JavaScript:
  1. <html>
  2. <head>
  3. <title>Creating javascript pulldown menus</title>
  4. <script language="Javascript" type="text/javascript">
  5. <!-- Hide from old browsers
  6.  
  7. function displayMenu(currentMenu) {
  8. var thisMenu = document.getElementById(currentMenu).style
  9.  
  10. // The above creates a new function that will expand and contract certain menus that are specified.
  11.  
  12. if (thisMenu.display == "block") {
  13. thisMenu.display = "none"
  14. } else {
  15. thisMenu.display = "block"
  16. }
  17. return false
  18. }
  19. // -->
  20. </script>

So the above piece of code may seem a bit long, confusing and daunting and first, but fear not it is actually quite easy to understand. All we are doing is starting a <script> section in the <head> of our HTML document, then we define a new function. This is the function we will be using to actually contract and expand the menus. It just says, if the menu is already expanded, then contract it and then we have a } else { statement that says if it is already contracted, expand it.

Now we need to do a bit of CSS work for our menus to work properly.

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. .menu {
  3. display: none;
  4. margin-left: 15px;
  5. color: #000;
  6. }
  7. .menu a {
  8. color: #000;
  9. }
  10. .menu a:hover {
  11. color: #B22222;
  12. margin-left: 20px;
  13. }
  14. </style>
  15. </head>

The above piece of code is the CSS in our menu, Im just putting this in so that it may be a BIT more aesthetically pleasing to our eyes, obviously if you use this script in your own websites/applications then you style the menus to how you like.

Now we start the actual body of our HTML document and start to create our menus.

PLAIN TEXT
HTML:
  2. <h3>Click on a menu header to expand or contract it</h3>
  3.  
  4. <b><a href="#" onClick="return displayMenu('tutMenu')">Tutorial Categorys</a></b><br />

I thought I would cut it off there and explain that little snippet of code, what we are doing here is creating a text link and using an event handler on it. We are using the onClick event handler. What this does is ON CLICK of the link we execute an action. In the case of this piece of code we are calling our displayMenu function that we created earlier. You may also notice the piece of text in there that says 'tutMenu'. This is defining the name of this specific menu, because if we didnt name our menus then the javascript function wouldnt know which menu to expand or contract.

Now we are going to create the navigational options that you get when you click on the header.

PLAIN TEXT
HTML:
  1. <div class="menu" id="tutMenu">
  2. <a href="#">PHP Tutorials</a><br />
  3. <a href="#">Javascript Tutorials</a><br />
  4. <a href="#">CSS Tutorials</a><br />
  5. <a href="#">Kick Arse Tutorials</a><br />
  6. </div>

This is our navigational menu, we are using the menu class we created in our CSS style before. And I just put # in the menu links just for filler, when you use this script in an actual website application you would change those # to the actual links you want to visit when you click on the tutorials.

Now I am just going to create another 2 menu headers and 2 more sets of menu navigation links for more filler and to give you an idea of what it looks like and how it works with more then 1.

PLAIN TEXT
HTML:
  1. <b><a href="#" onClick="return displayMenu('linksMenu')">Links</a></b>
  2. <div class="menu" id="linksMenu">
  3. <a href="#">Home</a><br />
  4. <a href="#">About Us</a><br />
  5. <a href="#">Contact Us</a><br />
  6. <a href="#">Send Us Hate E-mail</a><br />
  7. </div>
  8.  
  9. <b><a href="#" onClick="return displayMenu('randomMenu')">Random</a></b>
  10. <div class="menu" id="randomMenu">
  11. <a href="#">Funny Animals</a><br />
  12. <a href="#">Funny People</a><br />
  13. <a href="#">Funny Websites</a><br />
  14. <a href="#">Funny Webmasters</a><br />
  15. </div>
  16. </body>
  17. </html>

So all I've done above is create 2 new menus as filler menus.

Now for all you people that would like to see the completed code in its entirity here you go -

PLAIN TEXT
HTML:
  3. <title>Creating javascript pulldown menus</title>
  4. <script language="Javascript" type="text/javascript">
  5. <!-- Hide from old browsers
  7. function displayMenu(currentMenu) {
  8. var thisMenu = document.getElementById(currentMenu).style
  10. // The above creates a new function that will expand and contract certain menus that are specified.
  12. if (thisMenu.display == "block") {
  13. thisMenu.display = "none"
  14. } else {
  15. thisMenu.display = "block"
  16. }
  17. return false
  18. }
  19. // -->
  20. </script>
  21. <style type="text/css">
  22. .menu {
  23. display: none;
  24. margin-left: 15px;
  25. color: #000;
  26. }
  27. .menu a {
  28. color: #000;
  29. }
  30. .menu a:hover {
  31. color: #B22222;
  32. margin-left: 20px;
  33. }
  34. </style>
  35. </head>
  37. <h3>Click on a menu header to expand or contract it</h3>
  38.  
  39. <b><a href="#" onClick="return displayMenu('tutMenu')">Tutorial Categorys</a></b><br />
  40. <div class="menu" id="tutMenu">
  41. <a href="#">PHP Tutorials</a><br />
  42. <a href="#">Javascript Tutorials</a><br />
  43. <a href="#">CSS Tutorials</a><br />
  44. <a href="#">Kick Arse Tutorials</a><br />
  45. </div>
  46. <b><a href="#" onClick="return displayMenu('linksMenu')">Links</a></b><br />
  47. <div class="menu" id="linksMenu">
  48. <a href="#">Home</a><br />
  49. <a href="#">About Us</a><br />
  50. <a href="#">Contact Us</a><br />
  51. <a href="#">Send Us Hate E-mail</a><br />
  52. </div>
  53.  
  54. <b><a href="#" onClick="return displayMenu('randomMenu')">Random</a></b><br />
  55. <div class="menu" id="randomMenu">
  56. <a href="#">Funny Animals</a><br />
  57. <a href="#">Funny People</a><br />
  58. <a href="#">Funny Websites</a><br />
  59. <a href="#">Funny Webmasters</a><br />
  60. </div>
  61. </body>
  62. </html>

Notes
When you are using the <div class=" " id=" "> you MUST define the id=" " as the same name that you defined in the head in the displayMenu('') function. So for example, in one of the menus I have defined the displayMenu('') parameter as randomMenu, so for my id=" " I must define it as id="randomMenu".

You must also remember that anyone with javascript disabled in there web browsers will not be able to use this navigation, so it is always a good idea to provide alternatives to your main navigation and provide links in your footer, this is also a good idea for Search Engines, because a lot of search engine spiders do not have javascript and will not be able to crawl any of the links located in your navigation. So a fix for that is to just place your links in the footer of your website to provide maximum usability.

Well, thank you for taking the time to read my tutorial. I hope you have come away from this tutorial with some new knowledge.

Thanks
Sean

Share and enjoy our tutorial : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Furl
  • Slashdot
  • Netscape
  • BlinkList
  • Ma.gnolia
  • Reddit
  • Technorati