View Full Version : Tabs Menu (mouseover)

02-05-2006, 06:24 PM
Hey guys ^^

I'm testing http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://www.javascriptkit.com" onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com" onMouseover="showit(1)">Freewarejava</a><br>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpastejava.shtml">Scripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JS tutorials</a> | <a href="http://www.javascriptkit.com/javatutors/index.shtml">Advanced JS tutorials</a> | <a href="http://www.javascriptkit.com/java/">Applets</a> | <a href="http://www.javascriptkit.com/howto/">Web Tutorials</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index.shtml">Applets</a> | <a href="http://freewarejava.com/tutorials/index.shtml">Tutorials</a> | <a href="http://freewarejava.com/javasites/index.shtml">Sites and Zines</a> | <a href="http://freewarejava.com/jsp/index.shtml">JSP</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
else if (document.layers){

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

function clear_delayhide(){
if (window.delayhide)

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;


The only problem is after a few seconds the bottom menu dissapers. How can i make it stay after the user has selected the link?

Thanks alot ^^

02-05-2006, 09:56 PM
What do you mean selected? When a user clicks on a link, the whole page should disappear, replaced with the contents of the new page.

02-06-2006, 10:49 AM
yes.. But when the user arrives to the new page the menu is all refreshed..

For exapmle when i click on "JavaScript Kit" it should show me the following menu. "Scripts | JS tutorials | Advanced JS tutorials | Applets | Web Tutorials" And from this menu when i select for example "JS tutorials" it will open a new page with the details.. But in the new page I don't see the list "Scripts | JS tutorials | Advanced JS tutorials | Applets | Web Tutorials" it is blank like the start.. I want the new page to keep the link passed by the original page..

Hope i have explained my self..

Thank you.

02-06-2006, 09:12 PM
Well, once again, when you surf over to javascriptkit, they won't have this menu on their page. If you are using this all on one domain and have it on several pages on your site, then I think I see what you want. A simple method would be to put body onload events on the pages that you wish to have certain content displayed by default. For example, if on the page in question, you want the first content to be visible, use this in your body tag:

<body onload="showit(0);">

For the second content use 1 instead of 0. In javascript, most of the time counting begins with 0 not 1. I also notice that the content will disappear after it is hovered. This is a feature but, if you don't want it to do that, find the below lines and add the part in red to them:

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

02-16-2006, 04:00 PM


But i have a another question.

Let's think i use all the links on a local domain. And my main menu contains 2 links

<a href="home.html" onMouseover="showit(0)">HOME</a> | <a href="news.html" onMouseover="showit(1)">NEWS</a><br>

The my sum menu has the following links

submenu[0]='<font size="2" face="Verdana"><b><a href="newpage1.htm">shevi</a> | <a href="page1.html">page 1</a> | <a href="page2.html">page 2</a> | <a href="page3.html">page 3</a> | <a href="page4.html">page 4</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="newpage1.htm">shevi1</a> | <a href="page1.html">page 11</a> | <a href="page2.html">page 21</a> | <a href="page3.html">page 31</a> | <a href="page4.html">page 41</a></b></font>'

Think i select the main menu "NEWS" and the submenu "page 21"

When it opens the page i want it to show the menu with the link selected..In this case menu "NEWS" and the submenu "page 21" underlined (or whatever css style i have put)


02-17-2006, 09:37 AM
As long as that is the only reason you would get to the 21 page or if it is not, as long as having the situation like that each time the 21 page is reached, just hard code it onto page 21.

02-20-2006, 08:29 AM
Thanks alot:)