Horizontal Menu Tutorial

Menu HorizontalIt’s not very often that I make a video tutorial that I really love, but I think I did it today!

In this video tutorial I show you everything that goes into making a full website design with a Horizontal Menu.

I not only show you everything, I try to do it using the least amount of code possible. In doing that I think you will be able to easily make your own web designs.

You will benefit by watching this tutorial first CSS Website Layouts. After that print out the code that follows the video and you are well on your way to making your on sites with horizontal menus.

If your HTML, CSS, or JavaScript knowledge is a bit sketchy click on those links.

    Leave questions or comments below.

    Code From the Video

    Here are links to all of the code, or see it below:

    MenuExample.html

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

    <html>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <title>Playing With Layouts</title>

    <LINK REL=”StyleSheet” HREF=”menu.css”>

    <script language=”javascript” src=”menu.js”></script>

    <style>

     

    body {

    background-color: #FFF;

    }

     

    #header {

    background-color: #006;

    color: #FFF;

    padding: 20px;

    }

     

    #footer {

    background-color: #006;

    color: #FFF;

    padding: 20px;

    }

     

    #lypsum {

    padding: 15px;

    background-color: #FAF0E6;

    margin-right: 220px;

    margin-top: 5px;

    }

     

    #brain2 {

    padding 5px;

    padding-bottom: 15px;

    border-width: 2px;

    border-style: dotted;

    border-color: #4682B4;

    background-color: #E0FFFF;

    width: 200px;

    text-align: center;

    float: right;

    margin-left: 10px;

    margin-right: 5px;

    margin-top: 5px;

    }

    </style>

    </head>

     

    <body>

     

    <div id=”header”><h2>This is the Title Bar</h2></div>

     

    <div id=”menu”>

     

    <!– This dropdown menu is created by using a table named “navbar”. It has a default width of 800 pixels –>

    <table class=”navbar” width=”1000″>

    <tr>

     

    <!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal”. We are defining the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

     

    <!– 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 class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 2</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 3</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 4</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 5</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 6</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 7</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

    </tr>

    </table>

    </div>

     

    <div id=”brain2″>

    <h3>What a Brain</h3>

     

    <p>

    <img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

    </p>

     

    <p>

    Here I am demonstrating how to style a div element. This is pretty exciting stuff.

    </p>

     

    <p>

    Here I am demonstrating how to style a div element. This is pretty exciting stuff.

    </p>

     

    <p>

    Here I am demonstrating how to style a div element. This is pretty exciting stuff.

    </p>

     

    <p>

    Here I am demonstrating how to style a div element. This is pretty exciting stuff.

    </p>

    </div>

     

    <div id=”lypsum”>

    <h3>Just Some Random Text</h3>

     

    <p>

    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

    </p>

     

    <p>

    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

    </p>

     

    <p>

    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

    </p>

     

    </div>

     

    <div id=”footer”><h2>This is the Footer</h2></div>

     

    </body>

    </html>

    Menu.js

    function expand(s)

    {

    var td = s;

    var d = td.getElementsByTagName(“div”).item(0);

    // Accesses the first div in the table

     

    td.className = “menuHover”;

    d.className = “menuHover”;

    }

    function collapse(s)

    {

    var td = s;

    var d = td.getElementsByTagName(“div”).item(0);

    // Accesses the first div in the table

     

    td.className = “menuNormal”;

    d.className = “menuNormal”;

    }

    Menu.css

    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;}

     

    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; /* Sets the vertical alignment to the top of the div */

    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; /* States that this div should not display */

    position: static;} /* Tells the element to just flow with everything else */

     

    div.menuHover

    {border: 2.5px solid white;

    background-color: #0000FF;

    display: inline; /* Tells the div to generate an inline box with no line break*/

    position: absolute;} /* Positions the element relative to the parent */

     

    a.menuitem:link

    {text-decoration: none;

    color: white;

    padding: 2.5px;

    background-color: #0000FF;

    border-bottom: 2.5px solid white;

    display: block;} /* Display a line break before and after the box */

     

    a.menuitem:visited

    {text-decoration: none;

    color: white;

    padding: 2.5px;

    background-color: #0000FF;

    border-bottom: 2.5px solid white;

    display: block;} /* Display a line break before and after the box */

     

    a.menuitem:hover

    {text-decoration: none;

    color: black;

    padding: 2.5px;

    background-color: lightblue;

    border-bottom: 2.5px solid white;

    display: block;} /* Display a line break before and after the box */

     

    a.menuitem:active

    {text-decoration: none;

    color: black;

    padding: 2.5px;

    background-color: lightblue;

    border-bottom: 2.5px solid white;

    display: block;} /* Display a line break before and after the box */

    Menu.html

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

    “http://www.w3.org/TR/html4/loose.dtd”>

    <html>

     

    <head>

    <LINK REL=”StyleSheet” HREF=”menu.css”>

    <script language=”javascript” src=”menu.js”></script>

    </head>

     

    <body>

     

    <div id=”menu”>

     

    <!– This dropdown menu is created by using a table named “navbar”. It has a default width of 800 pixels –>

    <table class=”navbar” width=”800″>

    <tr>

     

    <!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal”. We are defining the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

     

    <!– 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 class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <!– <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 2</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 3</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 4</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    <td class=”menuNormal” width=”160″ onmouseover=”expand(this);”

    onmouseout=”collapse(this);”>

    <p>Menu 5</p>

    <div class=”menuNormal” width=”155″>

    <table class=”menu” width=”155″>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 1</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 2</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 3</a>

    </td></tr>

    <tr><td class=”menuNormal”>

    <a href=”page.htm” class=”menuitem”>Item 4</a>

    </td></tr>

    </table>

    </div>

    </td>

     

    –>

     

    </tr>

    </table>

    </div>

     

    </body>

    </html>

     

    11 Responses to “Horizontal Menu Tutorial”

    1. jagannath ghosh says:

      Hi Derek,
      I am not able to link external java to html while creating menu bar, It doesn’t come horizontal, what I did I made a folder in desktop, with menu.css, menu.js, and menu.html, when I am trying to apply java to html, menu bar doesn’t come horizontal whereas it shows only css and html with no java in it…I guess I m doing something wrong. Please advice. I am also using this http://rendur.com/ to learn css, which very useful…….Please advice what steps do I need to follow to avoid problem.

      • admin says:

        Did you fix this problem?

        • Jagannath says:

          Hi Derek,
          No, Derek. I am trying my best to fix this problem but again with the same results.

          What I am doing
          1. I made a folder in desktop
          2. open in notepad and named menu.css
          3. another notepad menu.js
          4. another menu.html

          But when tried to link those each other, css link is working but menu.js is not working.
          I find two codes in your turorials for menu.html
          which one I shall use and where
          I never did this before, that is why I am having this problem.
          Please suggest

    2. Romelo says:

      Good Day sir,

      Thanks for this tutorial i learned a lot from you. I hope you will continue to share your expertise.

      God bless and Thank you.

      • admin says:

        God bless you as well for the kind words 🙂 I have videos planned out for over a year so you can expect me to continue making them. Thank you for watching

    3. Damian says:

      Hi, I’m playing around with your examples and there is one thing.
      Can you change tabs -> spaces -> & nbsp.
      It is hard to read with everything aligned to the left. Original formatting would help a lot.
      Cheers

    4. Greg says:

      I think my question is similar to Damian’s above. I dev’ed a drop-down like this in CSS3 via Lynda.com for my portfolio website when taking HTML5 Fall, 2012. But now i’m dev’ing a site for someone and the menu bar looks better centered because of logo being on the left. I can get it to center by putting a bunch of &nbsp in the div section but it looks unprofessional and I then get wraparound when zooming in.

    5. Greg says:

      Can you tell me how to center the whole menu bar on the screen? I tried this with my CSS3 menu bar and it’s not going well. I’ll start playing with yours and see if i can get it to center. If there’s something incorrect about this comment please advise how to correct it, as my comment from yesterday is gone.

    Leave a Reply

    Your email address will not be published.

    Google+