Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Beginning JavaScript Lesson 24:
Positioning Menus & Boxes

Code Tutorials



Site Development



Downloads



Help!!



Home

The Basic Page

Here's the example we'll be coding in this lesson. Note how the menus are positioned under the opening links at all resolutions. This is done by using percentage values to lay out the page as well as position the menus.

This method of positioning menus is simple and effective, but it's hard to get the exact same alignment in both IE and Netscape. The alignment difference isn't much, but it does prevent being accurate to the pixel in both browsers.

To begin making the example, just lay out a couple of links side by side. I used a table for laying out the links:

<html>
<head>
<title>Menu Positioning</title>
</head>

<body>
<table width="100%" cellspacing=0 cellpadding=0 border=0>
<tr>
<td width="50%" align="center">
<a href="javascript://">
Search Engines</a>
</td>
<td width="50%" align="center">
<a href="javascript://">
Coding Sites</a>
</td>
</tr>
</table>

</body>
</html>

The above is just a page with a couple of dead links in a layout table. Now lets move on to the initial styling of our menus.

Initial <div> Styling

We'll save the exact position of the menus for last. Right now we need to code and ID the <div>s. At this stage attention is centered around giving each menu the look that we want: border, background-color, width, etc.

Here's the code I used to make the first <div> box menu. I put it beneath the <table> code. I coded the second menu similarly beneath the first.

<div id="search">
<a href="http://www.google.com/" target="_blank" class="menulink">
Google</a><br><br>

<a href="http://www.yahoo.com/" target="_blank" class="menulink">
Yahoo!</a><br><br>

<a href="http://www.about.com/" target="_blank" class="menulink">
About.com</a><br><br>

<a href="javascript://" onMouseOver="menu('search','hidden')" class="menulink">
CLOSE</a><br><br>

</div>

Next I started styling the boxes. First I set the "position:" to "absolute". Then I set a width, border, and background-color. I initially position the boxes with pixels just to keep them apart for styling and set their "visibility:" to "visible".

Below is the styling for the first box ID'd "search".

#search {
position: absolute;
top: 40px;
left: 20px;
width: 150px;
border: solid 3px #000000;
background: #ffff00;
padding: 3px;
visibility: visible;
}

The "sites" box styling is similar. I made sure to put it more to the left so the boxes wouldn't overlap. This is just to make them easy to see for styling. I'll be changing these positions in a minute.

The Function

The function to open and close the menu comes next. I decided to use onMouseOver events to both open and close the menus. Hovering over the big, opener links opens a menu. Hovering over the menu's "CLOSE" will close the menu.

Here's the event coding for the first menu ("search"):

<a href="javascript://"
onMouseOver="menu('search','visible')">
Search Engines</a>

I'll bet you're more than familiar with this function call. It's the same as we've been using. The function is named "menu()" and the two parameters relate to which menu is being activated and whether or not it is visible.

The events in the menu's "CLOSE" link are similar:

<a href="javascript://"
onMouseOver="menu('search','hidden')" class="menulink">
CLOSE</a>

The function "menu()" is our old tried and true friend for opening menus:

<script language="JavaScript">

function menu (whichMenu,whatState){
if (navigator.appName == "Microsoft Internet Explorer")
{
document.all[whichMenu].style.visibility = whatState;
}

else {document[whichMenu].visibility = whatState;}
}

</script>

You should be able to recognize everything we've covered so far. Now lets position our menus to be in the same relative area regardless of monitor resolution.

Final Positioning With Percentage Values

Now its time to give the menus their final position under their respective links. Since both links are at the same height, the only problem will be getting a good horizontal alignment.

First, use pixels to get the first menu near its link and set the height with pixels. It's the width of the page, not height, that will be the real positioning issue.

#search {
position: absolute;
top: 40px;
left: 100px;
width: 150px;
border: solid 3px #000000;
background: #ffff00;
padding: 3px;
visibility: visible;
}

What I've done is just fiddled around until I found a height I liked. This same height will be applied to the second menu as well.

Now lets set the "left:" for the menus. I began with a "left:" value of 20% and adjusted from there ending up with:

#search {
position: absolute;
top: 40px;
left: 15%;
width: 150px;
border: solid 3px #000000;
background: #ffff00;
padding: 3px;
visibility: visible;
}

I then used percentages and trial and error to place the second menu with "left: 65%". That's it, now the menus will be in the same relative position regardless of resolution.

Netscape presents these types of menus a little to the left of IE. This may not be a problem, but if it is, your options are to use advanced JavaScript techniques or to make to separate style sheets with different "width:"s and direct the browser to the appropriate stylesheet.

Summary & Exercises

Making menus for horizontal nav bars requires a little more precise positioning than a vertical nav column. Begin making these pages by coding and styling the nav bar itself.

Proceed by making the menus and giving them initial pixel positions. Style their visual elements: width, borders, etc.

Finish the project by substituting percentages for "top:" and "width:" as necessary. Remember that Netscape presents these boxes a little below and to the left of IE's rendering. The positioning will be the same with the same browser at all resolutions.

Try using the method in this lesson to make a nav bar with four or five links across.



To Pop Up Exam

Back To Beginning JavaScript Index