Submenu area always visible some way to hide it?

[dsmcbride]

1) Script Title: Mouseover Tabs Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...seovertabs.htm

3) Describe problem:
Is there a way to hide the SUBmenu area until/unless you hover over the tab? Right now, the submenu area is always visible ... with/without submenu entries .. like http://www.qantas.com.au

Tanks
David

[rangana]

Remove highlighted:

<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>

[dsmcbride]

thanks for the reply .. removing the [selected] still displays the submenu area ... it's is just blank/empty ) but still using the real estate on the page ... what I'd like to have happen is to have the submenu area be visible ONLY when hovering over a menu ...

Thanks
David

[ddadmin]

Well, the menu you cited on the external site is a little different in that the sub menu DIV is actually absolutely positioned, and overlays the regular contents when it's shown. You can modify this script to behave similarly first by editing mouseovertabs.css with the changes in red:

.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 90%;
height: 24px;
padding: 5px;
border: 1px solid silver;
position: absolute;
z-index: 100;
visibility: hidden;
}

This causes the sub menu DIV to be absolutely positioned and initially hidden completely. Then inside mouseovertabs.js, you'll want to add the two lines in red below to complete the change:

showsubmenu:function(linkobj){
	var tabsmenutree=this.tabsmenutree[linkobj._parentid]
	this.hidesubmenu(linkobj._parentid)
	var selected=parseInt(linkobj._pos)
	tabsmenutree.submenu.style.visibility="visible"
	tabsmenutree.submenu_divs[selected].style.display="block"
	this.css(tabsmenutree.tabs[selected], "selected", "add")
	tabsmenutree.submenu._prevselected=selected
},

hidesubmenu:function(tabsmenuid){
	var tabsmenutree=this.tabsmenutree[tabsmenuid]
	var prevselectedindex=tabsmenutree.submenu._prevselected
	if (typeof prevselectedindex!="undefined"){
		tabsmenutree.submenu.style.visibility="hidden"
		tabsmenutree.submenu_divs[prevselectedindex].style.display="none"
		this.css(tabsmenutree.tabs[prevselectedindex], "selected", "remove")
	}
},

[dsmcbride]

Perfect!!! .. thanks ... is it also possible to again hide the submenu area when the mouse is outside the menu or submenu area?

Thanks again
David

[rangana]

I was suppose to make a response about this earlier, but ddadmin beat me.

Anyway, try to remove the changes ddadmin suggested, and add highilighted instead:

this.addEvent(submenu, function(e){
		submenu.style.display='';
		mouseovertabsmenu.clearhidetimer(this.hidetimer)
	}, "mouseover")
	if (disappearBool==true){
		this.addEvent(submenu, function(e){ //hide submenu contents when mouse rolls out of submenu DIV
			if (!mouseovertabsmenu.isContained(this, e)){
				var cursubmenuobj=this
				this.hidetimer=setTimeout(function(){mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)}, mouseovertabsmenu.disappeardelay)
			submenu.style.display='none';
			}
		}, "mouseout")
	}

[dsmcbride]

rangana:

I removed all the changed proposed by DDADMIN (css and js) ... and added the two lines of code you suggested. However a) the submenu are appears when the screen is first loaded -- perhaps this is because of the CSS changes and b) the submenu does not disappear when the mouse is moved off the menu/submenu area ... essentially it appears your suggested changes have no effect

[rangana]

Oh, thanks for pointing that out. I forgot to inform you to add highlighted too:

init:function(tabsmenuid, submenuid, disappearBool){
	this.tabsmenutree[tabsmenuid]={} 
	this.tabsmenutree[tabsmenuid].tabs=[] //array referencing the active tab links in this menu (ones with a "rel=gotsubmenu" attr)
	this.tabsmenutree[tabsmenuid].submenu=null //reference submenu DIV for this menu
	this.tabsmenutree[tabsmenuid].submenu_divs=[] //array referencing the submenu contents (external DIVs with class="tabsmenucontent")
	var submenu=document.getElementById(submenuid)
	submenu.style.display='none'; // Hide the SUBMENU
	submenu._parentid=tabsmenuid
	this.tabsmenutree[tabsmenuid].submenu=submenu //remember this DIV as menu's submenu container
	var remoteurl=submenu.getElementsByTagName("a")[0].getAttribute("href")
	this.ajaxload(tabsmenuid, submenuid, disappearBool, remoteurl)
}

...it hides the submenu on load.

Hope that fits your desire.
[/code]

[dsmcbride]

rangana:
yes, now the menu does not come up initially, but unfortunately it also does not display when hovering over the menu choices

thanks for your help ...i really appreciate it
david

[rangana]

My apologies. Never in my entire life I had been so forgetful as I am now.

Add highlighted too:

showsubmenu:function(linkobj){
document.getElementById('mysubmenuarea').style.display='';
	var tabsmenutree=this.tabsmenutree[linkobj._parentid]
	this.hidesubmenu(linkobj._parentid)
	var selected=parseInt(linkobj._pos)
	tabsmenutree.submenu_divs[selected].style.display="block"
	this.css(tabsmenutree.tabs[selected], "selected", "add")
	tabsmenutree.submenu._prevselected=selected
},

You could add as many of that as you wish, if you had multiple submenus.

Hope that was it.

Let me know if I miss something else.