navbar

css navbar two on one page?

[tierd]

I have been trying to make a drop down menu following suckerfish tutorial and great it works! but I want to have two horizontal menus on the same page I thought I would just have to repeat the tutorial but I cant get it to work any help would be gratefully appreciated

[billegal]

If I recall those drop downs, either the container or the ul is assigned an id. You will need to duplicate id or change it to a class.

[Don_Hoagie]

just to clear up that last post... in case it is the source of your problem:

IDs are meant for one element and one only- you cannot "duplicate" IDs... perhaps Billegal meant for you to create another ID that has the same style information, just with a different position on the page.

If you just created a second version of your menu ID and gave it different position coordinates, this would be a valid reason as to why it's not working for you. As Billegal said, change the ID to a class, or just create a new ID for the new menu.

[tierd]

just create a new ID for the new menu.?

Thanks for the advice

I can under stand how this would work but a little unsure if Ican give #nav a new id Do I need to build the menue again using a diferant method than I have been useing (suckerfish code)

[jessejump]

An ID name can only be used once on a page.

On the second menu, call the ID by another name.

[SuzyUK]

>>use different ID's
tierd is doing that, and that I think is the problem..

The SuckerFish JS that tierd is using is probably ID specific.

There is a way to make it less specific, but Im really not sure of it's stability or x-browser compatibility?

So although I don't know of any downsides of using this less specific code here it is.. perhaps someone else can point out if there would be a downside to using this?

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

it's less specific as some versions of the SF code get the element by it's ID instead and then grab the childnode <li>'s where as this just blanket targets all <li>'s in page..

but you can just CSS the ones you want effects on, no?

Suzy