PDA

View Full Version : Submenu area always visible some way to hide it?



dsmcbride
11-03-2008, 10:21 PM
1) Script Title: Mouseover Tabs Menu

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex1/mouseovertabs.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
11-04-2008, 12:49 AM
Remove highlighted:


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

dsmcbride
11-04-2008, 04:02 PM
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
11-05-2008, 12:43 AM
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
11-05-2008, 03:26 AM
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
11-05-2008, 03:37 AM
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
11-05-2008, 12:54 PM
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 :confused:

rangana
11-05-2008, 12:58 PM
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
11-05-2008, 01:53 PM
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
11-05-2008, 02:13 PM
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.

rangana
11-05-2008, 02:40 PM
To sum it up, you need a total of 4 changes on the JS file:


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")
}
.
.
.
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)
}
.
.
.
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
},

dsmcbride
11-05-2008, 03:34 PM
rangana:

yes .. that's MUCH better :) now is there someway to hide the submenu when not hovered over menu or submenu ?

again ... much thanks
david