coding...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> DHTML </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
// ##### these are some values you can change.. that effect the display ##### \\
// in milliseconds (1000 = 1 second)... this is how many milliseconds it takes to close a window
closeDelay = 1000;
// in pixels... this is the space between the category and the actual menu
// NOTE: Setting this to "1" will give it a double border effect.. to save you
// ** some time, put it as "2" if you want it to have a "1" pixel space
spaceBetweenCat_and_Menu = 0;
// ##### COLORS ##### \\
// the background color the category will change to, when the mouse is over it
catHoverBGColor = "#ffffff";
// this is the color that the category background will be when regular...
// if it isn't the same as the one specified in the stylesheet (under the div.navi selector) you will notice it!
catRegBGColor = "#bbc6d3";
// this is the color of text when you hover over the categories
catHoverTextColor = "#00285b";
// this is the color of the text when the category is regular..
// make sure it's the same as of that in the stylesheet (under the "div.navi a" selector)
catRegTextColor = "#00285b";
// ##### DO NO TOUCH BELOW THIS LINE, UNLESS YOU KNOW WHAT YOU'RE DOING! ##### \\
opened_menu = false;
last_menu = 0;
// detect browser...
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = (userAgent.indexOf('opera') != -1);
var is_moz = (navigator.product == 'Gecko');
var is_ie = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_moz));
function openMenu(current) {
if(!document.getElementById) return;
opened_menu = true;
old_menu = last_menu;
last_menu = current;
if(old_menu) {
deleteMenu(old_menu);
}
// get object...
obj = document.getElementById("menu-" + current);
obj_sub = document.getElementById(current);
// copy
obj2 = obj;
obj3 = obj;
// get the left
offsetwidth = obj.offsetLeft;
while((obj2 = obj2.offsetParent) != null) {
offsetwidth += obj2.offsetLeft;
}
// now get the top...
offsettop = obj.offsetHeight;
while((obj3 = obj3.offsetParent) != null) {
offsettop += obj3.offsetTop;
}
// depends on browser...
if(!is_ie) {
obj_sub.style.top = ((obj.offsetHeight + obj.offsetTop) + spaceBetweenCat_and_Menu) + "px";
obj_sub.style.left = (obj.offsetLeft - 1) + "px";
} else {
obj_sub.style.top = (offsettop + 1 + spaceBetweenCat_and_Menu) + "px";
obj_sub.style.left = (offsetwidth) + "px";
}
obj.style.backgroundColor = catHoverBGColor;
obj.style.color = catHoverTextColor;
obj_sub.style.visibility = "visible";
}
function deleteMenu(current) {
if(!document.getElementById) return;
if(opened_menu == true && last_menu == current) return;
obj = document.getElementById("menu-" + current);
obj_sub = document.getElementById(current);
obj.style.backgroundColor = catRegBGColor;
obj.style.color = catRegTextColor;
obj_sub.style.visibility = "hidden";
}
function deletionTimeout(current) {
opened_menu = false;
setTimeout("deleteMenu('" + current + "');",closeDelay);
}
function keepOpen(sub_menu) {
opened_menu = true;
last_menu = sub_menu;
}
-->
</script>
<style type="text/css">
<!--
/* this controls the actual CONTAINER that
** all the categories are in. The background
** color is also specified in the javascript above,
** so make sure to check it! */
div.navi {
width: 100%;
background: #bbc6d3;
border: solid 1px #000000;
z-index: 100;
}
/* simply the color of the link...
** it's also set in the javascript above,
** so make sure to check it! */
div.navi a {
color: #00285b;
}
/* this controls the actual formatting
** of each category box. */
.categories {
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 85%;
display: block;
padding: 4px;
float: left;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #000000;
}
/* Controls the formatting for the sub menu box
** that holds all the options... The only things
** you should change here is the width... which is
** only when an option extends beyond the 200px.
** setting the width will allow for the options
** to be lined up, and nice and neat. Otherwise,
** do not change ANYTHING else here. The positioning
** is dynamically generated in the javascript above
** according to where it's located on the page. */
div.sub_menu {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
visibility: hidden;
width: 200px;
}
/* This is the formatting for each of the options.
** A few things here are critical to formatting, but
** if you want to change them, be my guest, but it may
** take a few tries to get it right :) The other thing
** you may want to edit is the path to background image */
div.sub_menu a {
font-family: verdana, arial, sans-serif;
font-size: 80%;
border: #000000 1px solid;
border-bottom: none;
z-index: 100;
display: block;
width: 95%;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
color: #000000;
white-space: nowrap;
background: #ffffff url(images/nav_bullet.gif) no-repeat 6px 9px;
text-decoration: none;
}
/* This is just to add a bottom border to the last
** option of every menu. */
div.sub_menu a.bottomCELL {
border-bottom: 1px solid #000000;
}
/* Simply the formatting for each of the options when
** the cursor is moved over them. You should ONLY put
** things here, that are DIFFERENT from the "div.sub_menu a"
** selector above. And just make sure to change the path to
** the background image. */
div.sub_menu a:hover {
color: #000000;
background: #b5caff url(images/nav_bulletOVER.gif) no-repeat 6px 9px;
}
-->
</style>
</head>
<body>
<div class="navi" style="margin-top: 50px;">
<!-- DIRECTIONS ON HOW TO ADD/REMOVE CATEGORIES
** You do not have to edit ANY javascript.
** All you have to do is add another <a> tag below.
** Make sure you follow the patterns set by the previous links.
** Your "id" should be proceeded by "menu-".. so if you wanted to call it
** "portfolio" the id would be "menu-portfolio"
** Then simply follow suit for the rest of the tag, that's all for THIS section
** keep going down to learn how to add the actual menus... -->
<!-- NOTE: I have each of these links going to a "sitemap" (a page that contains an outline of all pages of your site
** so that users who have javascript disabled, or using browsers that don't support javascript can still navigate your site. -->
<a href="sitemap.php" id="menu-general" class="categories" onmouseover="openMenu('general');" onmouseout="deletionTimeout('general');">General</a>
<a href="sitemap.php" id="menu-tutorials" class="categories" onmouseover="openMenu('tutorials');" onmouseout="deletionTimeout('tutorials');">Tutorials</a>
<a href="sitemap.php" id="menu-tools" class="categories" onmouseover="openMenu('tools');" onmouseout="deletionTimeout('tools');">Tools</a>
<a href="sitemap.php" id="menu-other" class="categories" onmouseover="openMenu('other');" onmouseout="deletionTimeout('other');">Other</a>
<!-- CONTINUED DIRECTIONS
** Once you have added the link for the category above
** Add a division like the following.
** You MUST use the same name as you used with the link (just take off the "menu-")
** or else it will not work!
** otherwise, simply follow suit.
** Adding an option to the menu, is as easy as simply adding a hyperlink using the <a> tag! Very easy!
** That should be it! Everything if formatted with the stylesheet! -->
<div class="sub_menu" id="general" onmouseover="keepOpen('general');" onmouseout="deletionTimeout('general');">
<a href="index.php">Home</a>
<a href="forums/index.php">Message Board</a>
<a href="wallpaper.php">Wallpaper</a>
<a href="links.php?link=links_affiliations">Affiliations</a>
<a href="links.php?link=links_freehosts">Free Web Hosts</a>
<a href="links.php?link=links_paidhosts">Paid Web Hosts</a>
<a href="links.php?link=links_programs" class="bottomCELL">Programs</a>
</div>
<div class="sub_menu" id="tutorials" onmouseover="keepOpen('tutorials');" onmouseout="deletionTimeout('tutorials');">
<a href="htmltutorial.php?htmltut=1">HTML Tutorial</a>
<a href="xhtmltutorial.php">XHTML Tutorial</a>
<a href="csstutorial.php?csstut=1">CSS Tutorial</a>
<a href="javascripttutorial.php?js_tut=1">Javascript Tutorial</a>
<a href="tricks.php">Primers</a>
<a href="photoshop.php">Photoshop Tutorials</a>
<a href="webdesigntutorial.php?webtut=1" class="bottomCELL">Start Building</a>
</div>
<div class="sub_menu" id="tools" onmouseover="keepOpen('tools');" onmouseout="deletionTimeout('tools');">
<a href="editor.php" target="_blank">Online Editor</a>
<a href="javascript.php">Javascripts</a>
<a href="metatag.php">Meta Tag Generator</a>
<a href="rgb_convert.php" class="bottomCELL">RGB Conversion to HEX</a>
</div>
<div class="sub_menu" id="other" onmouseover="keepOpen('other');" onmouseout="deletionTimeout('other');">
<a href="coonie.php">What does cooney like?</a>
<a href="contact.php">Contact</a>
<a href="about.php">About</a>
<a href="request.php">Request Query</a>
<a href="submit.php" class="bottomCELL">Submit Query</a>
</div>
<!-- This is the cleaner... Very important for
** mozilla and basically any browser except IE! -->
<div style="clear: both;"></div>
</div>
</body>
</html>