The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> JavaScript Development
|
Navigation Bar Help
Discuss Navigation Bar Help in the JavaScript Development forum on Dev Shed. Navigation Bar Help JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

February 25th, 2013, 10:19 PM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 5
Time spent in forums: 51 m 16 sec
Reputation Power: 0
|
|
|
Navigation Bar Help
Hey everyone, this is my first time ever using JavaScript and I found a navigation bar that is out there, and I tried implementing it into my website, and when I do nothing happens at all. The bar doesn't even show up.
The nav bar CSS is
Code:
.basictab ul{
margin: 4px;
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover, .basictab li a.current{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.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.*/
}
.tabcontent{
display:none;
}
.js file
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]
}
}
}
}
and in the head section I have been putting <link src="ddtabmenu.js">
Any help would be appreciated. Thanks guy!
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|