voddie
09-17-2008, 10:03 AM
Hi All
Please be gentle this is my first posting.
Im still quite green when it comes to js, so have been searching online through tutorials on how to code properly.
I have created a js menu using code from a tutorial and I am trying to merge another function into my coding.
I have a working example online at http://www.vodev.co.uk/menutest
There is also a zip file containing all the files to download at http://www.vodev.co.uk/menutest/menutest.zip.
The js used is
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
The menu works as it should very well.
I want to make it that the selected page is highlighted so when arrive at index.html (Home) the background should be blue as when hover over buttons.
I have tried making the Home li in the html styled different from the css file to show this hoping that it would overide the css style but it does not work.
How can i go about amending the js/adding a new function to the js to highlight the current page.
Any help or advice would be greatly apreciated
Thanks in advance
Voddie
Please be gentle this is my first posting.
Im still quite green when it comes to js, so have been searching online through tutorials on how to code properly.
I have created a js menu using code from a tutorial and I am trying to merge another function into my coding.
I have a working example online at http://www.vodev.co.uk/menutest
There is also a zip file containing all the files to download at http://www.vodev.co.uk/menutest/menutest.zip.
The js used is
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
The menu works as it should very well.
I want to make it that the selected page is highlighted so when arrive at index.html (Home) the background should be blue as when hover over buttons.
I have tried making the Home li in the html styled different from the css file to show this hoping that it would overide the css style but it does not work.
How can i go about amending the js/adding a new function to the js to highlight the current page.
Any help or advice would be greatly apreciated
Thanks in advance
Voddie