DD Tab Menu with onMouseout option?

[seg]

Hi,
I am looking at two menu scripts: Tabs Menu (mouseover) and DD Tab Menu

I like the DD Menu because it seems to be compliant with most browsers and it is search engine-friendly (very nice)! The Tabs Menu (mouseover) defaults back to a blank (or pre-set) submenu after rolling off, which is what I really need.

Has anyone been successful in getting DD Menu to do the same after rolling off the menu and/or submenu? Would this be easy to do?

[seg]

I seem to have mostly figured the problem out.

I added this function to create a delay time out:

function do_mouseout(){
navTimeout = window.setTimeout('expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])',1000);
}

I added an item to each onMouseover to clear the delay time out and added an onMouseout with the delay time out function to the tab items.

Original code:

<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com" onMouseover="expandcontent('sc2', this)">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com" onMouseover="expandcontent('sc3', this)">CodingForums</a></li>
<li><a href="http://www.webmasterpick.com" onMouseover="expandcontent('sc4', this)">WebmasterPick</a></li>

New code:

<li><a href="http://www.dynamicdrive.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc1', this)" onMouseout="do_mouseout()">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc2', this)" onMouseout="do_mouseout()">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc3', this)" onMouseout="do_mouseout()">CodingForums</a></li>
<li><a href="http://www.webmasterpick.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc4', this)" onMouseout="do_mouseout()">WebmasterPick</a></li>

I also added an onMouseover and an onMouseout to the submenu items.

Original code:

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<a href="http://www.dynamicdrive.com/dynamicindex1/ ">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/"> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a>
</div>

<div id="sc2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a>
</div>

<div id="sc3" class="tabcontent">
Web Coding and discussions forum. Visit <a href="http://www.codingforums.com">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more.
</div>

<div id="sc4" class="tabcontent">
<a href="http://www.webmasterpick.com">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>.
</div>

New code:

<div id="sc1" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc1', this);tabHighlight()" onMouseout="do_mouseout()">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<a href="http://www.dynamicdrive.com/dynamicindex1/ ">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/"> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a>
</div>

<div id="sc2" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc2', this);tabHighlight()" onMouseout="do_mouseout()">
<a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a>
</div>

<div id="sc3" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc3', this);tabHighlight()" onMouseout="do_mouseout()">
Web Coding and discussions forum. Visit <a href="http://www.codingforums.com">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more.
</div>

<div id="sc4" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc4', this);tabHighlight()" onMouseout="do_mouseout()">
<a href="http://www.webmasterpick.com">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>.
</div>

[seg]

I have a two questions:

1) I made the above changes and everything seems to work fine. Does anyone see a problem with the items I added?

2) The tabs highlight when rolling over them, but when I roll over a submenu, the associated tab is no longer highlighted. How can I associate each submenu with each tab menu so the correct tab remains highlighted?

Here is my current code:

<html>
<head>
<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width:480px;
height:40px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

function do_mouseout(){
//clearTimeout(navTimeout);
navTimeout = window.setTimeout('expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])',1000);
}

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


</script>
</head>

<body>
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc1', this)" onMouseout="do_mouseout()">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc2', this)" onMouseout="do_mouseout()">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc3', this)" onMouseout="do_mouseout()">CodingForums</a></li>
<li><a href="http://www.webmasterpick.com" onMouseover="clearTimeout(navTimeout);expandcontent('sc4', this)" onMouseout="do_mouseout()">WebmasterPick</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc1', this);tabHighlight()" onMouseout="do_mouseout()">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<a href="http://www.dynamicdrive.com/dynamicindex1/ ">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/"> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a>
</div>

<div id="sc2" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc2', this);tabHighlight()" onMouseout="do_mouseout()">
<a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a>
</div>

<div id="sc3" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc3', this);tabHighlight()" onMouseout="do_mouseout()">
Web Coding and discussions forum. Visit <a href="http://www.codingforums.com">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more.
</div>

<div id="sc4" class="tabcontent" onMouseover="clearTimeout(navTimeout);expandcontent('sc4', this);tabHighlight()" onMouseout="do_mouseout()">
<a href="http://www.webmasterpick.com">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>.
</div>


</DIV>
</body>
</html>

[bholland]

Does anyone have any idea on how to answer the above question? How can you keep the primary tab highlighted while on the sub navigation? Any help would be appreciated!

Thanks,

B