Tabs Menu (mouseover) script support!

**Paperfairy** · 02-16-2007, 04:51 AM

Script: :: Tabs Menu (mouseover)
http://www.dynamicdrive.com/dynamici...bmouseover.htm

Just a question. The script is working exactly as I want it to, but how do I get the blue box containing the links to disappear until they are rolled over? An example of what I'm talking about can be found here:

http://www.smogon.com

in the upper left corner.

Also, when I take my mouse off the link, how do I make it disappear again, or go back to the default box? Thanks.

**codeexploiter** · 02-16-2007, 06:13 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<!--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)" onmouseout="showHideDiv(0);">JavaScript Kit</a> 
|
 <a href="http://freewarejava.com" onMouseover="showit(1)" onmouseout="showHideDiv(0);">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>
</layer>
</ilayer>
<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){
clear_delayhide()
showHideDiv(1)
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

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

function showHideDiv(status)
{
	if(status == 0)
	{
		menuobj.innerHTML = "";
		menuobj.style.display = "none";
	}
	else
		menuobj.style.display = "block";
	return;
}

showHideDiv(0); //Calling the function which will hide the result area initially whenever the page loads
</script>
</body>
</html>

Check the above mentioned code which is based on the original Tabs Menu (mouseover) code which is at here

Whatever modifications i've made is in blue color so you can identify it clearly from the script's original code.

If you have any problem with the above furnished code plz let me know

**Paperfairy** · 02-17-2007, 02:42 PM

Wonderful. Thanks. A few more questions now....

How do I make that menu appear directly under whatever word/image I'm rolling over? It always appears directly to the left, which causes problems for links on the right of the table.

How do I make the table in which the links are displayed list them vertically, not horizontally?

**mburt** · 02-17-2007, 02:51 PM

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<!--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,this)" onmouseout="showHideDiv(0);">
JavaScript Kit</a> 
|
 <a href="http://freewarejava.com" onMouseover="showit(1,this)" onmouseout="showHideDiv(0);">
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>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px;position:absolute" 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,obj){
clear_delayhide()
showHideDiv(1)
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all) {
menuobj.innerHTML=thecontent
var newobj = obj
menuobj.style.left=(newobj.offsetLeft)+"px"
menuobj.style.top=parseInt(menuobj.style.top)+parseInt(menuobj.style.height)+"px"
}
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

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

function showHideDiv(status)
{
	if(status == 0)
	{
		menuobj.innerHTML = "";
		menuobj.style.display = "none";
	}
	else
		menuobj.style.display = "block";
	return;
}

showHideDiv(0); //Calling the function which will hide the result area initially whenever the page loads
</script>
</body>
</html>

But whenever you use the showit() function you must add the second argument, "this":

Code:

showit(0,this)

**mburt** · 02-17-2007, 02:55 PM

To make it verticle at the to the <head>

Code:

<style type="text/css">
#describe a {
display:block
}
</style>

**Paperfairy** · 02-17-2007, 04:49 PM

Uh... it kinda works. >_<

Here is the result: http://mangaresource.bulbagarden.net/right.shtml

Here is the page it's on (even worse!):http://mangaresource.bulbagarden.net/test.shtml

And I'm aiming for something like this: http://www.smogon.com (top right corner)

**melinda** · 02-18-2007, 07:38 PM

Quick question on the same script.

Is it possible to have some menu items with tabs and some without? I don't need a tab on every menu item. I've been trying for hours to edit it and it's not working for me.

Thanks in advance!

**codeexploiter** · 02-19-2007, 03:26 AM

Originally Posted by melinda

Quick question on the same script.

Is it possible to have some menu items with tabs and some without? I don't need a tab on every menu item. I've been trying for hours to edit it and it's not working for me.

Thanks in advance!

Yes it is possible to have tabs on some items. You can check the following code which demonstrate the same

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">First</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>

<a href="http://www.google.com" target="_blank" class="menutitle">google</a>

<div class="menutitle" onclick="SwitchMenu('sub2')">Third</div>
<span class="submenu" id="sub2">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>
</div>
</body>
</html>

In the above source code the items which are in blue color has some tabs associated with it. And the items in red color has no associated tabs.

Please note that the box kind of display can be changed by adjusting the CSS according to your requirements.

Thread: Tabs Menu (mouseover) script support!

Thread Tools

Search Thread

Tabs Menu (mouseover) script support!

Bookmarks

Bookmarks

Posting Permissions