Log in

View Full Version : second level contents on the DD Tab Menu keep disappearing?!


stuckynolte
12-30-2011, 08:21 PM
1) Script Title:
DD Tab Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Describe problem:
I'm trying to use background images for the tabs, but when I add the images to the css the second level contents disappear. Below is a link to a test page I'm using to show the issue. The top example shows how it's supposed to work with the second level contents, and the bottom shows what happens one the images are added.

http://www.vintagebankks.com/test-nav.html

Here is the css I'm using:


.solidblockmenu ul{ float:left; width:710px; margin:6px 0 0 260px; padding:15px 25px 0 30px; }

.solidblockmenu li { display: inline; }

.solidblockmenu li a{ float: left; color: #006993; padding: 9px 11px; text-decoration: none; background-position: 0 -45px; height: 25px; display: block; text-indent: -999em;}

.solidblockmenu li a:hover, .solidblockmenu li a.current{ color: #00adee; background-position: 0 0;}

.solidblockmenu li a.personal { background-image: url(http://www.vintagebankks.com/images/nav/personal-banking.gif); width: 138px; }
.solidblockmenu li a.smbusiness { background-image: url(http://www.vintagebankks.com/images/nav/small-business-banking.gif); width: 194px;}
.solidblockmenu li a.commercial { background-image: url(http://www.vintagebankks.com/images/nav/commercial-banking.gif); width: 156px; }

.tabcontainer{
clear: left;
width:1026px; /*width of 2nd level sub menus*/
height:27px; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
background: url(http://www.vintagebankks.com/images/sub-nav-repeat.jpg) top repeat-x; text-align:center;
padding:8px 0 0 0;
}

*:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
margin-top: -1em;
}

* html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
margin-top: -1em;
}

.tabcontent { display:none; color:#FFF; font-size: .85em; font-family: proxima-nova, sans-serif; font-weight: 300; line-height: 20px; letter-spacing:.06em; }
.tabcontent ul { margin:0; padding:0; display:inline; }
.tabcontent ul li { margin:0; padding:1px 10px 0 15px; list-style:none; display:inline; color:#FFF; border-left: 1px solid #003f67; }
.tabcontent li:first-child { margin-left: 0; border-left: none; list-style: none; display: inline; }
.tabcontent li a, a:visited { margin:0; padding:0; list-style:none; color:#FFF; text-decoration:none; }
.tabcontent li a:hover, a:active { margin:0; padding:0; list-style:none; color:#cceffc; text-decoration:none; }


Here is my html:


<div id="header">
<div id="ddtabs3" class="solidblockmenu">
<ul><img src="/images/what-are-you-looking-for.png" alt="What are you looking for today?" width="153" height="23" align="left" class="looking" />
<li><a href="/personal-banking/personal-info.htm" rel="sb1" title="PERSONAL" class="personal" >Personal</a></li>
<li><a href="/small-business-banking/small-business-info.htm" rel="sb2" title="SMALL BUSINESS" class="smbusiness" >Small Business</a></li>
<li><a href="/commercial-banking/commercial-info.htm" rel="sb3" title="COMMERCIAL" class="commercial" >Commercial</a></li>
</ul>
</div>
<!-- END HEADER -->
</div>
<DIV class="tabcontainer ieclass">

<div id="sb1" class="tabcontent">
<ul>
<li><a href="/personal-banking/checking-solutions.htm ">CHECKING SOLUTIONS</a></li>
<li><a href="/personal-banking/saving-solutions.htm">SAVING SOLUTIONS</a></li>
<li><a href="/personal-banking/loan-solutions.htm">LOAN SOLUTIONS</a></li>
<li><a href="/personal-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="/personal-banking/online-services.htm">ONLINE SERVICES</a></li>
<!--<li><a href="/personal-banking/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

<div id="sb2" class="tabcontent">
<ul>
<li><a href="/small-business-banking/checking-solutions.htm">CHECKING SOLUTIONS</a></li>
<!--<li><a href="/small-business-banking/cash-management.htm">CASH MANAGEMENT</a></li>-->
<li><a href="/small-business-banking/credit-lending.htm">CREDIT &amp; LENDING</a></li>
<li><a href="/small-business-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="/small-business-banking/online-services.htm">ONLINE SERVICES</a></li>
<!--<li><a href="/small-business-banking/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

<div id="sb3" class="tabcontent">
<ul>
<li><a href="/commercial-banking/checking-solutions.htm ">CHECKING SOLUTIONS</a></li>
<!--<li><a href="/commercial-banking/cash-management.htm">CASH MANAGEMENT</a></li>-->
<li><a href="/commercial-banking/credit-lending.htm">CREDIT &amp; LENDING</a></li>
<li><a href="/commercial-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="/commercial-banking/online-services.htm">ONLINE SERVICES</a></li>
<!--<li><a href="/commercial/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

</DIV>

Any help would be greatly appreciated!
vwphillips
12-31-2011, 12:52 PM
the original script changes class names

this version only changes class names if a class name does not already exist


<!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">
<!-- BC_OBNW -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="http://www.vintagebankks.com/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript">var jslang='EN';</script>
<link href="http://www.vintagebankks.com/stylesheets/solidblocksmenu.css" rel="stylesheet" type="text/css" />
<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
**********************************************/

//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com
//**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu

//Only 2 configuration variables below:

var ddtabmenu={
disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]

currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

definemenu:function(tabid, dselected){
this[tabid+"-menuitems"]=null
this[tabid+"-dselected"]=-1
this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
var menuitems=this[tabid+"-menuitems"]
this.clearrevert2default(tabid)
for (i=0; i<menuitems.length; i++){
if (!menuitems[i].cls){
menuitems[i].className=""
}
if (typeof menuitems[i].hasSubContent!="undefined")
document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
}
if (!targetitem.cls){
targetitem.className="current"
}
if (typeof targetitem.hasSubContent!="undefined")
document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (ddtabmenu.currentpageurl==menuurl)
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

revert2default:function(outobj, tabid, e){
if (!ddtabmenu.isContained(outobj, tabid, e)){
window["hidetimer_"+tabid]=setTimeout(function(){
ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"])
}, ddtabmenu.snap2original[1])
}
},

clearrevert2default:function(tabid){
if (typeof window["hidetimer_"+tabid]!="undefined")
clearTimeout(window["hidetimer_"+tabid])
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
var menuitems=document.getElementById(tabid).getElementsByTagName("a")
this[tabid+"-menuitems"]=menuitems;
for (var x=0; x<menuitems.length; x++){
menuitems[x].cls=menuitems[x].className;
if (menuitems[x].getAttribute("rel")){
this[tabid+"-menuitems"][x].hasSubContent=true
if (ddtabmenu.disabletablinks){
menuitems[x].onclick=function(){return false}
}
if (ddtabmenu.snap2original[0]==true){
var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
}
}
else {//for items without a submenu, add onMouseout effect
menuitems[x].onmouseout=function(e){if (!this.cls){this.className=""; } if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
}
menuitems[x].onmouseover=function(){
ddtabmenu.showsubmenu(tabid, this)
}
}
for (var x=0; x<menuitems.length; x++){
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
ddtabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+"-dselected"]=menuitems[x]
var setalready=true
}
else if (parseInt(dselected)==x){
ddtabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+"-dselected"]=menuitems[x]
}
}
}

}
</script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs4", 0) //initialize Tab Menu #3 with 2nd tab selected

</script>
</head>
<body>






<br /><br /><br />

<div id="header">
<div id="ddtabs4" class="solidblockmenu">
<ul>
<li><a href="http://www.vintagebankks.com/personal-banking/personal-info.htm" rel="sb1" title="PERSONAL" class="personal">Personal</a></li>
<li><a href="http://www.vintagebankks.com/small-business-banking/small-business-info.htm" rel="sb2" title="SMALL BUSINESS" class="smbusiness">Small Business</a></li>
<li><a href="http://www.vintagebankks.com/commercial-banking/commercial-info.htm" rel="sb3" title="COMMERCIAL" class="commercial" >Commercial</a></li>

</ul>
</div>
<!-- END HEADER -->
</div>
<div class="tabcontainer ieclass">

<div id="sb1" class="tabcontent">
<ul>
<li><a href="http://www.vintagebankks.com/personal-banking/checking-solutions.htm ">CHECKING SOLUTIONS</a></li>
<li><a href="http://www.vintagebankks.com/personal-banking/saving-solutions.htm">SAVING SOLUTIONS</a></li>
<li><a href="http://www.vintagebankks.com/personal-banking/loan-solutions.htm">LOAN SOLUTIONS</a></li>

<li><a href="http://www.vintagebankks.com/personal-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="http://www.vintagebankks.com/personal-banking/online-services.htm">ONLINE SERVICES</a></li>
<!--<li><a href="http://www.vintagebankks.com/personal-banking/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

<div id="sb2" class="tabcontent">
<ul>
<li><a href="http://www.vintagebankks.com/small-business-banking/checking-solutions.htm">CHECKING SOLUTIONS</a></li>
<!--<li><a href="http://www.vintagebankks.com/small-business-banking/cash-management.htm">CASH MANAGEMENT</a></li>-->
<li><a href="http://www.vintagebankks.com/small-business-banking/credit-lending.htm">CREDIT &amp; LENDING</a></li>

<li><a href="http://www.vintagebankks.com/small-business-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="http://www.vintagebankks.com/small-business-banking/online-services.htm">ONLINE SERVICES</a></li>
<!--<li><a href="http://www.vintagebankks.com/small-business-banking/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

<div id="sb3" class="tabcontent">
<ul>
<li><a href="http://www.vintagebankks.com/commercial-banking/checking-solutions.htm ">CHECKING SOLUTIONS</a></li>
<!--<li><a href="http://www.vintagebankks.com/commercial-banking/cash-management.htm">CASH MANAGEMENT</a></li>-->
<li><a href="http://www.vintagebankks.com/commercial-banking/credit-lending.htm">CREDIT &amp; LENDING</a></li>

<li><a href="http://www.vintagebankks.com/commercial-banking/convenience.htm">CONVENIENCE</a></li>
<li><a href="http://www.vintagebankks.com/commercial-banking/online-services.htm">ONLINE SERVICES 2</a></li>
<!--<li><a href="http://www.vintagebankks.com/commercial/special-programs.htm">SPECIAL PROGRAMS</a></li>-->
</ul>
</div>

</div>





</body>
</html>
stuckynolte
01-03-2012, 03:54 AM
Thanks so much for your help! That took care of it!
stuckynolte
01-03-2012, 04:07 AM
I do have one more question though. How can I customize the active states of the main tabs? Ideally, this is how I'd like for it to work:

I have three folders set up for each of the banking sections: personal, small business, commercial. Whenever someone is on a page outside of these sections I'd like for the PERSONAL tab to be in it's roll over state.

Then whenever someone is on a page within any of those folders I'd like for the corresponding tab to be in it's rollover state. For example, if they are on the Small Business online services page, the SMALL BUSINESS tab would be in it's rollover state.

Is this possible to set within the javascript?
vwphillips
01-03-2012, 10:18 AM
ddtabmenu.definemenu("ddtabs4", 0) //initialize Tab Menu ddtabs4 with 1st tab selected


change the second parameter