PDA

View Full Version : Achieving highlight on a CSS-drop-down-menu with IE.



FLAGEL
Jan 16th, 2007, 04:46 PM
Hello good people,

Having no success on my own I'm turning to you guys and girls for help and/or guidelines. I also should mention that my JS-capabiliteis are limited, but I'm trying to learn as much as possible.

What I'm trying to do is to achieve the same functionality of a drop-down-menu with JS as with CSS for browsers who are not able to render the menu purely by CSS. The JS-code is originally written by brothercake for his listmenu, and I am very grateful to him for his excellent work. Brothercakes code however does not do exactly what I'm looking for since his JS assumes that the whole menu is based on anchors while my menu is not. This results in lack of high-lighting on non-anchor-tags.

I really hope you understand what I mean, I wish I could explain better. The best way to fully understand what I mean is to try out the test environment in eg. FF and then IE to see what IE lacks.

The test environment can be found here: http://qwqb.com/ag/

And the JS that takes care of the functionality for handicapped browsers is here:


simpleMenu.prototype.init = function(trigger, isie, isoldsaf, iskde, navid){
trigger.menu = trigger.getElementsByTagName('ul').length > 0 ? trigger.getElementsByTagName('ul')[0] : null;
this.openers = { 'm' : 'onmouseover', 'k' : (isie ? 'onactivate' : 'onfocus') };
for(var i in this.openers){
trigger[this.openers[i]] = function(e){
if(trigger.menu != null){
trigger.menu.style.left = (isie || isoldsaf) ?'0px' : 'auto';
}
}
}
this.closers = { 'm' : 'onmouseout', 'k' : (isie ? 'ondeactivate' : 'onblur') };
for(i in this.closers){
trigger[this.closers[i]] = function(e){
this.related = (!e) ? window.event.toElement : e.relatedTarget;
if(!this.contains(this.related)){
if(trigger.menu != null){
trigger.menu.style['left'] = '-10000px';
}
}
}
}


The menus have a structure like this:

<ul id="menu" class="horizontal">
<li id="link1"><span></span><a class="link" href="">1</a>
</li>
<li id="link2"><span></span><a class="link" href="">2</a>
</li>
<li id="link3"><span></span><span class="link">3</span>
<ul>
<li><a class="underlink" href="" title="">3.1</a></li>
<li><a class="underlink" href="" title="">3.2</a></li>
<li><a class="underlink" href="" title="">3.3</a></li>
</ul>
</li>
<li id="link4"><span></span><a class="link" href="">4</a>
</li>
<li id="link5"><span></span><a class="link" href="">5</a>
</li>
<li id="link6"><span></span><span class="link">6</span>
<ul>
<li><a class="underlink" href="" title="">6.1</a></li>
<li><a class="underlink" href="" title="">6.2</a></li>
<li><a class="underlink" href="" title="">6.3</a></li>
<li><a class="underlink" href="" title="">6.4</a></li>
<li><a class="underlink" href="" title="">6.5</a></li>
</ul>
</li>
</ul>


Many many thanks in advance! :)