Anylink Drop Menu CSS

[JeffSinNHUSA]

When hovering over entries in a sub menu, is there a way to change the background color of the main menu link that the sub menu belongs to?

This would help the user know which menu they are in.

Thanks

[jscheuer1]

Add this variable (red) to the configuration in anylink.js:

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
var activecolor='#ddf' //set background color for active anchor link

Add these two functions to anylink.js right before the function dropdownmenu(obj, e, dropmenuID):

function findanchor (obj){
var returnobj=obj.previousSibling;
while (typeof returnobj.tagName=='undefined')
returnobj=returnobj.previousSibling;
return returnobj;
}

function revertanchors (){
var drops=document.getElementsByTagName('div')
for (var i_tem = 0; i_tem < drops.length; i_tem++)
if (drops[i_tem].className=='anylinkcss')
findanchor(drops[i_tem]).style.backgroundColor='';
}

Add these two lines (red) at the beginning of the function dropdownmenu(obj, e, dropmenuID):

function dropdownmenu(obj, e, dropmenuID){
revertanchors();
obj.style.backgroundColor=activecolor;
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dr . . .

Finally, replace the delayhidemenu() function with this one:

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden';findanchor(dropmenuobj).style.backgroundColor='';",disappeardelay)
}

[JeffSinNHUSA]

John - thanks for your help.

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden';findanchor(dropmenuobj).style.backgroundColor='';",disappeardelay)
}

This caused the iframes (that we added for selects) to continue to display after moving off the submenu.

The new code did highlight the anchor menu, but the anchor menu did not revert to the original background color when selecting a new anchor menu or moving off a submenu.

[jscheuer1]

My modifications were for the original code and work with that. The iframe bit for selects had its own modifications to the delayhidemenu function and others. For both effects to work, the two sets of modifications would need to be combined. That would take care of:

This caused the iframes (that we added for selects) to continue to display after moving off the submenu.

The other is a mystery as it all worked from the original code. Give me the link to your page with the iframe modifications but not these latest modifications and I'll see what can be done.

[jscheuer1]

Fix this on your stylesheet first:

A.navLink {
	text-decoration: underline;
	color: #336699;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}

		
A.navLink:navLink:visited	/* after visiting a link */
{	
	text-decoration:none;
	color:Purple;
	font-style:normal
}

The red part is a typo, remove it. You might want a different color than purple for the visited, that was just an example. You may need the top declaration in the above block to read:

A.navLink:link {

There could be other problems.

[JeffSinNHUSA]

and then?

[jscheuer1]

How about putting a link to your page in this thread so I don't have to hunt through other post to find it?

[JeffSinNHUSA]

sorry - it's www.l-com.com

[jscheuer1]

I think I see the problem. My modifications are for AnyLink CSS Menu, as (apparently) requested in this thread (see title of initial post). You however, are using a modification of the plain AnyLink Drop Down Menu. It is unlikely that the modifications to the css version will work (without further modification) on the original version.

I also noticed on your page that in Opera8.52 all that shows onmouseover is the iframe. As I recall, I already posted a version of the iframe 'shim' for this (the original, non css one) script that did not do this, consider upgrading to that first.

[JeffSinNHUSA]

Here's the code for anyone interested:

var activecolor='#336699' //menu color

/////No further editting needed

var ie4=document.all
var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
setTimeout("hideIframe();",0);
obj.visibility=hidden
}
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function revertanchors (){
// unhighlight all anchors
var anchors=document.getElementsByTagName("A");
for (var i_tem = 0; i_tem < anchors.length; i_tem++)
if (anchors[i_tem].className=='leftButton')
anchors[i_tem].style.backgroundColor='';
}

// Note - Replace the "leftButton" style above with the name of the style used for your anchor links.

function dropdownmenu(obj, e, menucontents, menuwidth){
revertanchors();
// Highlight selected anchor
obj.style.backgroundColor=activecolor;

if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
revertanchors();
if (ie4||ns6) {
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}


Thanks for the head start jscheuer1!