09Apr

Multiple Suckerfish Dropdowns on the same HTML Page

No comments

During my day job, I exclusively use Suckerfish for any drop down menu. I finally had some time to update the javascriopt sfHover function to allow for multiple menus on the same page. I thought I would just place the code here for future reference. In this piece of code the function will look for menus with the class ID of navbar, navbar2, and navbar 3.

<!–//–><![CDATA[//><!--
// JavaScript Document
sfHover = function() {
var elements = new Array("navbar","navbar2","navbar3");

var sfEls = new Array();

for (var j=0; j<elements.length; j++)
{
sfEls.push(document.getElementById(elements[j]).getElementsByTagName("LI"));
}

for (var n=0; n<sfEls.length; n++)
{
for (var i=0; i<sfEls[n].length; i++)
{

sfEls[n][i].onmouseover=function()
{
this.className+=" sfhover";
}

sfEls[n][i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//–><!]]>

Share/Save/Bookmark

Categories: Web Development

Wednesday, April 9th, 2008 at 8:58 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a reply