JavaScript Section

Free JavaScript Collection

powered by

Main Navigation Script Category Menu

<frameset cols="175,*">
    <frame src="category-menus.html" name="left">
    <frame src="home-page.html" name="right">
</frameset>
</html>

<title>script.omduena.com: JavaScript, java script, javascripts, script, javascript free code!</title>

<style type="text/css">
a
{text-decoration: none;}

.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}

.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures?  1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}
//  End -->
</script>
</HEAD>

<BODY>

<div class="title" id="title1" style="top: 0px"> 
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="http://script.omduena.com/img/category-menus/closed.gif" border="0">Category 1</a>
</div>

<div class="submenu" id="submenu1" style="top: 20px">
 <a href="page01.html" target="right">Item # 1</a><br>
 <a href="page02.html" target="right">Item # 2</a>
</div>

<div class="title" id="title2" style="top: 20px"> 
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="http://script.omduena.com/img/category-menus/closed.gif" border="0">Category 2</a>
</div>

<div class="submenu" id="submenu2" style="top: 40px">
 <a href="page03.html" target="right">Item # 3</a><br>
 <a href="page04.html" target="right">Item # 4</a><br>
 <a href="page05.html" target="right">Item # 5</a><br>
 <a href="page06.html" target="right">Item # 6</a>
</div>

<div class="title" id="title3" style="top: 40px"> 
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="http://script.omduena.com/img/category-menus/closed.gif" border="0">Category 3</a>
</div>

<div class="submenu" id="submenu3" style="top: 60px">
 <a href="page07.html" target="right">Item # 7</a><br>
 <a href="page08.html" target="right">Item # 8</a><br>
 <a href="page09.html" target="right">Item # 9</a>
</div>

<div class="title" id="title4" style="top: 60px"> 
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="http://script.omduena.com/img/category-menus/closed.gif" border="0">Category 4</a>
</div>

<div class="submenu" id="submenu4" style="top: 80px">
 <a href="page10.html" target="right">Item # 10</a><br>
 <a href="page11.html" target="right">Item # 11</a><br>
 <a href="page12.html" target="right">Item # 12</a><br>
 <a href="page13.html" target="right">Item # 13</a>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://script.omduena.com">The JavaScript Source</a></font>
</center><p>

Click Here if you need help to install the JavaScript

The Free source for javascript, java script, menu, form, calendar, forms, calendars, Ajax DHTML XML XSL XSLT RSS AJAX ASP ADO PHP

About Us :: Add to Favorite :: Make Home Page :: Tell your Friends :: Advertise :: Privacy

Copyright© 2002 Omduena, Inc. All rights reserved