Manipulating a Dynamic Menu
Hey everyone, I'm new to JQuery and would usually do more research before posting, but I have a demanding client that wants results, so hopefully someone can help me out.
I have a dynamic CSS/JQuery menu that is part of a WordPress theme, and I would like to be able to set the menu to automatically size itself to the longest menu item or sub-menu item. The menu in question is at:
www.adcuda.com
under Solutions.
Here is the simple script(browser hacks removed):
function kriesi_mainmenu(){
jQuery(" #nav > li > ul").parent().find("a:first").append("<span class='sub_list'> </span>");
jQuery(" #nav ul li > ul").parent().find("a:first").append("<span class='sub_sub_list'> </span>");
jQuery(" #nav li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
}
Lets say for simplicity's sake that I will make the first menu option the longest, and the rest of the menu width will be based on that width. How would I do that? Would this even work on the fly? Any help would be appreciated, I already have an easy CSS solution but it involves changing the width property every time the longest item changes. Thanks,
JW