A few articles ago I showed you how to make a basic website layout in my Styling HTML with Cascading Style Sheets Tutorial. Was it the most beautiful page? Not exactly, but it was easy to understand, which was the point in making it simple. Here it is if you missed it.
Click here to be taken to the web page to your left.
Feel free to do whatever you like with the code and if you have any problems editing it drop me a comment below.
So, we have a simple layout with a title bar, footer, side bar and main content div setup. This is the basic layout used for all WordPress themes. And, yes I am going to create a tutorial on designing custom WordPress themes very soon.
What is missing from this layout? A menu bar, right. Well, today I’m going to add a menu bar to this basic template. It will be as simple as possible, but provide you with the opportunity to style it however you would like. All of the code will be provided and yes you can use it however you would like. It is completely free!
Here is a picture of the new site with a menu bar and a little tidying up. Here is the location of this web page.
Before you try and work your way through this tutorial, you may want to watch / read, my HTML W3C Tutorial, Adding CSS Style to HTML Tutorial and The Javascript Scripting Tutorial. They are all free!
I’ll now list all of the drop down menu code. I’ll first go over all of the HTML code needed for the drop down menu, then the small amount of Javascript code and finally the CSS. This for the most part is a pure CSS drop down menu, so that is where you will find the bulk of the code.
Creating a CSS Menu Drop Down
All of the HTML Code for the Drop Down Menu
Here I’m creating a div that will contain all of the HTML code needed to create the menu. This specific code would create just one drop down item. If you want to add more just copy and paste the div with the id “dropdown1″, over and over again. My comments on the code will follow each block of code.
<div id=”menu”>
<table width=”1000″>
<tr>
<!– This dropdown menu is created by using a table named “navbar”. It has a default width of 1000 pixels –>
<td width=”160″ onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal” in the file menu.css. We are defining the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>
<!– This is the menu item name that will appear at the top of the screen –>
<p>Menu 1</p>
<!– Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested inside of each of those div’s. When a onmouseover event is triggered the div’s attribute display is switched from none to inline, which allows a visitor to see the div on screen.–>
<div id=”dropdown1″ width=”155″>
<table width=”155″>
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>
<!– Each on of these blocks of code will create another drop down box. To make more, just copy and paste this code. You may have to change the width of the menu bar above? It is currently set at 1000 pixels. After you are done adding menu drop downs, end your html code with the following:
</tr>
</table>
</div>
And then of course all of the other content for your HTML page. That is all there is to creating the HTML part of this Drop Down Menu.
The Drop Down Menus Javascripts
There is very little Javascript code needed for the Drop Down Menu. The code needed is triggered by the onmouseover and onmouseout event handlers. They simply hide the menu divs when the mouse pointer is not directly on them and then make them appear, when it is. Here is the code:
function expand(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);
td.className = “menuHover”;
d.className = “menuHover”;
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);
td.className = “menuNormal”;
d.className = “menuNormal”;
}
The above code should be saved in a file named menu.js. Like I said, the code changes the styling of the div to make it appear and disappear again and again.
CSS Menu Drop Down Code
This CSS code performs all of the styling for the Drop Down Menu. It changes the look and feel because that is what CSS is good at. I’ll list all of the code and then explain each CSS definition does.
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;}
P
{padding-top: 10px;
margin: 0px;}
H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}
table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}
table.menu
{font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;}
td.menuNormal
{padding: 0px;
color: white;
font-weight: bold;
vertical-align: top;
background-color: #0000FF;}
td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}
div.menuNormal
{display: none;
position: static;}
div.menuHover
{border: 2.5px solid white;
background-color: #0000FF;
display: inline;
position: absolute;}
a.menuitem:link
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #0000FF;
border-bottom: 2.5px solid white;
display: block;}
a.menuitem:visited
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #0000FF;
border-bottom: 2.5px solid white;
display: block;}
a.menuitem:hover
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: lightblue;
border-bottom: 2.5px solid white;
display: block;}
a.menuitem:active
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: lightblue;
border-bottom: 2.5px solid white;
display: block;}
Explanation of Each CSS Definition Above
That is basically all it takes to create a custom CSS Menu Drop Down. If you are having any problems with the code feel free to leave a comment below. I’ve included all of the files needed to create the web page here:
Till next time…
cud sum1 pls email me the cod mayb in a complete html page at saibot67@gmail.com any help wud be appreciated. thanx in advance
Here are links to all of the code used. Just click the links and then view page source in your browser. Tell me if that doesn’t work for you
menuexample.html
menu.js
menu.html
menu.css
Thanks
Derek
does this work for blogger???
i seem to be having trouble.
THANKS!
Not sure? I’ve not done much with blogger. I’ll look into it. Thanks
Found your site while trying to learn css drop down menus. Just what I needed! Will be certain to give u credit. Other tutorials were a big help also! Thank u 4 posting!
Thank you very much 🙂
I am using your posted menu files to try to create another level of dropdown, i.e., Menu1–>Item1–>Item1a. I think I have the html part, but not too good with the js and css part. Do u have a tutorial that could explain that level of css dropdown? Any help would definitely be appreciated! Thank you!
Here is a cross browser horizontal menu that is much better. i hope it helps 🙂