How to Create simple dropdown menu in HTML and CSS

drop down menues
drop down menues | Source

Drop down menu in html you should know to create websites


Menus are the important parts of a website. A drop down menu contains some text with links. Now a day’s most of the developer use external java script and jQuery file to make drop down menu more attractive. I divided this tutorial into 3 sections. In this tutorial I am going to show how to create a simple drop down menus using HTML and CSS. At first I will explain the HTML part.

The Basic Structure:

There are two rows in the following table. Each row is divided into two SPAN. First span is always visible and second span is hidden by default.

<TABLE BORDER="0" ALIGN="left">

<TR>

<TD VALIGN="top" WIDTH="250">

<SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'">

<FONT SIZE="-1"><b>Search Engine</b></FONT></SPAN><BR>

<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">

<FONT SIZE="-1"><A HREF="http://www.bing.com/">Bing</A></FONT><BR>

<FONT SIZE="-1"><A HREF="http://www.yahoo.com/">Yahoo</A></FONT><BR>

<FONT SIZE="-1"><A HREF="http://www.google.com/">Google</A></FONT><BR>

</SPAN></TD>

</TR>

<TR>

<TD VALIGN="top" WIDTH="250">

<SPAN onMouseOver="document.all.menu2.style.display = 'block'" onMouseOut="document.all.menu2.style.display = 'block'">

<FONT SIZE="-1"><b>My Hubs</b></FONT></SPAN><BR>

<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">

<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/basic-html-tags-you-must-know-to-create-websites">Basic HTML</A></FONT><BR>

<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/How-to-Make-Money-as-a-Web-Developer">How to Make Money</A></FONT><BR>

<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/Margin-and-Padding-in-CSS">Margin and Padding in CSS</A></FONT><BR>

</SPAN>

</TR>

</TABLE>

I use Event Handler to apply onMouseOver and OnMouseOut event on menu.
document.all.menu1.style.display . It starts from left to right. Here “document” means the current document. Then “all” means everything inside current document. “menu1” remains always hidden. Here “style” is connected with display. When we move mouse over the first span then it tells the second span to display. When we release the mouse from first span, second span remains visible because we use onMouseOut event handler and it is set to ‘block’. This is the basic concept. The basic difference between two rows is the ID. When we move mouse on each row title, it will cause the menu with different ID to trigger the effect.

The CSS Code

This is the style sheet part. Let’s take a look at the following code:

<STYLE TYPE="text/css">

#menu1 { display : none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#menu2 { display : none; font-family:Verdana, Arial, Helvetica, sans-serif; }

a:link {color:red; text-decoration:none}

a:hover {color:green; text-decoration:underline}

</STYLE>

We got two menus with different ID associated with those menus. By default each of the menus set to hidden. I set menu font to Verdana, Arial, Helvetica, sans-serif. The second part of two lines applies effect on link with no underline and its color is set to red. When mouse passes over the link then it turns green with underline.

The Final Product

<HTML>
<TITLE>Simple drop down menu using HTML and CSS</TITLE>
<HEAD>
<STYLE TYPE="text/css">
#menu1 { display : none; font-family:Verdana, Arial, Helvetica, sans-serif; }
#menu2 { display : none; font-family:Verdana, Arial, Helvetica, sans-serif; }

a:link {color:red; text-decoration:none}
a:hover {color:green; text-decoration:underline}

</STYLE>
<HEAD>
<BODY BGCOLOR="FFFFFF">
<TABLE BORDER="0" ALIGN="left">
<TR>
<TD VALIGN="top" WIDTH="250">
<SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'">
<FONT SIZE="-1"><b>Search Engine</b></FONT></SPAN><BR>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">

<FONT SIZE="-1"><A HREF="http://www.bing.com/">Bing</A></FONT><BR>
<FONT SIZE="-1"><A HREF="http://www.yahoo.com/">Yahoo</A></FONT><BR>
<FONT SIZE="-1"><A HREF="http://www.google.com/">Google</A></FONT><BR>

</SPAN>
</TD>
</TR>
<TR>
<TD VALIGN="top" WIDTH="250">
<SPAN onMouseOver="document.all.menu2.style.display = 'block'" onMouseOut="document.all.menu2.style.display = 'block'">

<FONT SIZE="-1"><b>My Hubs</b></FONT></SPAN><BR>
<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">

<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/basic-html-tags-you-must-know-to-create-websites">Basic HTML</A></FONT><BR>
<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/How-to-Make-Money-as-a-Web-Developer">How to Make Money</A></FONT><BR>
<FONT SIZE="-1"><A HREF="http://smga22.hubpages.com/hub/Margin-and-Padding-in-CSS">Margin and Padding in CSS</A></FONT><BR>

</SPAN>
</TR>
</TABLE>
</BODY>
</HTML> 


In this table we got two rows with two spans each. If you want to add more menus just add another row in your table with different menu# level and add this menu in style section. Moreover, you can apply animation on hover with your html dropdown menu.

I look forward to see what you can do.

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working