Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Drop-Down menu code explained

align

  • Please log in to reply
5 replies to this topic

#1 NastyDevil

NastyDevil

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 90 posts

Posted 10 June 2010 - 10:51 AM

Hi, I a few days ago I came across Paradox's code for a drop-down menu and wanted to write my own tutorial to describe how such a menu can be modified and/or have more content added. I had remembered that I saw a very good code for such a menu on W3 schools; so I looked around and found the code.

For the purpose of this tutorial I decided that the code provided by W3 schools is perfect and I give full credit to them for the piece of code I will be using to explain concepts. Other then the code, this tutorial is written entirely by me.

The full working drop-down menu code is provided at the very end so you can follow the steps before you actually see the entire code.




Step 1: Create the table which will contain your menu

You will need a nice table (you can also use <div> but it is a little harder to align) for your main menu bar and your cub sections. You have to remember that you want your main bar to show at all times and the sub-categories to be hidden unless moused over. The table is hidden through the CSS property: visibility="hidden". This will be described in the next step. For now let's focus on making a table:

*Note: I have removed the classes and id's associated with each table cell to illustrate the concept of the table without the CSS properties.

*Note: The links in the table are relative and will not work.

<table width="100%">
 <tr bgcolor="#FF8080">
  <td>
   <a href="/default.asp">Tutorials</a><br />
   <table width="120">
   <tr><td><a href="/html/default.asp">HTML</a></td></tr>
   <tr><td><a href="/xhtml/default.asp">XHTML</a></td></tr>
   <tr><td><a href="/css/default.asp">CSS</a></td></tr>
   <tr><td><a href="/xml/default.asp">XML</a></td></tr>
   <tr><td><a href="/xsl/default.asp">XSL</a></td></tr>
   </table>
  </td>
  <td>
   <a href="/default.asp">Scripting</a><br />
   <table width="120">
   <tr><td><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td><a href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td><a href="default.asp">DHTML</a></td></tr>
   <tr><td><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  <td>
   <a href="/site/site_validate.asp">Validation</a><br />
   <table width="120">
   <tr><td><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
   <tr><td><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
   <tr><td><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
   <tr><td><a href="/site/site_validate.asp">Validate XML</a></td></tr>
   <tr><td><a href="/site/site_validate.asp">Validate WML</a></td></tr>
   </table>
  </td>
 </tr>
</table>

The table above is composed of one main table containing a smaller table in each column. Without CSS you will not see anything special.


Step 2: Provide the CSS formatting for your table

What we want to do in this step is assign different classes and id's in order to format the contents of our tables with as little code as possible. In the head of your file (or in a separate css file. You must properly reference the outside file if you are doing it.) you need to add the following code and assign the table cells their respective classes and id's:

*Note: in order for you to see the effect of the following modification you need to assign each cell the appropriate tags. I left them out for you to try and assemble both pieces of code and assign the tags; if you do not wish to try it yourself, scroll down the page and copy the complete code.

*Note: the absolute positioning of the table allows it to appear above anything that might get in it's way.

<style type="text/css">
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>



Step 3: JavaScript onmouseOver and onmouseOut functions for the table

In this step you will see the actual JS part of the code. The drop down menu should obviously "drop down" (You can also make it an onclick event if you like. Make sure you change the function names appropriately if you decide to do so.) when the user mouses over the option. To do so you need to add onmouseover and onmouseout events to your main table. These events will be called upon and show/hide the secondary table when needed. The JS functions are used to modify the visibility of each cell; as explained above it is crucial for the cells to be first set to hidden.

*Note: do not forget to add the events to your tables which need to call the JS functions!

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>


Try on your own:
*Simple
- Modify the tables or add your own columns/rows
- Change the links for those that suit your needs
*Advanced
- Modify the JavaScript to create a sliding effect for the drop down menu
- Modify the table to create a "vertical" menu



You should now have a nice page which has a bar with a drop down menu appearing when the user mouses over the option. Thank you for reading and once again all the code has been created by W3 Schools and I take absolutely no credit for the code.

Link to the original code provided by W3 Schools: Tryit Editor v1.4

Thank you for reading and hopefully you now understand how a complete drop-down menu is created/works. In a future tutorial I will be showing you how to modify this peice of code to achieve a slightly different result to meet your website's needs.



Full code for the drop down menu:
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="400px">
 <tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
   <a href="/default.asp">Tutorials</a><br />
   <table class="menu" id="tutorials" width="120">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
   <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   <a href="/default.asp">Scripting</a><br />
   <table class="menu" id="scripting" width="120">
   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   <a href="/site/site_validate.asp">Validation</a><br />
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
   </table>
  </td>
 </tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

  • 1

#2 NastyDevil

NastyDevil

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 90 posts

Posted 10 August 2010 - 09:00 AM

Has anyone attempted this or interested in more tutorials on the same topic? :(
  • 0

#3 yamman13

yamman13

    CC Regular

  • Just Joined
  • PipPipPip
  • 46 posts

Posted 10 August 2010 - 12:58 PM

I would be interested in total beginner javascript tuts, if theres no other interest :P
  • 0

#4 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 10 August 2010 - 01:00 PM

+rep
nice tutorial, I bet lots of people will find this useful
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#5 NastyDevil

NastyDevil

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 90 posts

Posted 10 August 2010 - 08:56 PM

+rep
nice tutorial, I bet lots of people will find this useful

tnx for the rep glad it can help some

I would be interested in total beginner javascript tuts, if theres no other interest :P

will take that into consideration for my next tutorial.

I was just surprised no one had commented on this for long, but great to finally hear positive feedback. The JavaScript section is very inactive so I held back on making more tutorials, but I will definitely work on another one.
  • 0

#6 bbqroast

bbqroast

    Codecall Addict

  • Senior Member
  • PipPipPipPipPipPip
  • 564 posts
  • Location:/etc/passwd

Posted 29 September 2010 - 09:30 PM

Whoah!!! Saw this a while ago and made a small page to test it.
Was just making a new site when this came to mind :D.
You know i spent hours searching for a tutorial like this and ended up ditching the idea.
Well i'm back on track now :D
  • 0
Please, write clearly with proper structure. Double spacing makes the text feel un-jointed, Capitalizing Every Word Means People Stop Before Every Word Sub-Consciously Which Is A Pain In The Backside, and use code tags! (The right most styling box).





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download