I am trying to get a css nav bar working.
but for some reason, my code gives me this result
and it should look like this when finished (but black and blue instead of black and read)
here is what I have so far
main html doc
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="solidblocksmenu.css" />
<script type="text/javascript" src="ddtabmenu.js"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs3", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>
</head>
<body>
<div id="ddtabs3" class="basictab">
<ul>
<li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
Sub contents here
</div>
<div id="sc2" class="tabcontent">
Sub contents here
</div>
<div id="sc3" class="tabcontent">
Sub contents here
</div>
</DIV>
</body>
</html>
solidblocksmenu.css
Code:
.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.jpg) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.current{
color: white;
background: transparent url(blockactive.jpg) center center repeat-x;
}
.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}
*: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;
}
ddtabmenu.js
Code:
//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++){
menuitems[i].className=""
if (typeof menuitems[i].hasSubContent!="undefined")
document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
}
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++){
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){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
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]
}
}
}
}
if you can spot my error(s) please let me know, i really like this nav bar.
edit: i got it working
i needed to change this line from the html doc:
Code:
<div id="ddtabs3" class="basictab">
to this:
Code:
<div id="ddtabs3" class="soldblockmenu">