PDA

View Full Version : Need help understanding a kick-ass navigationbar (www.forex.se)



mli
12-05-2004, 06:47 PM
Hi everyone,

I have been searching high and low for a two-level-horizontal navigation bar that displays second level instantly. Now I found it I really need some help understanding the code and see if I can "rip" it. Or basically, if someone just posted the clean code and a brief note on how to custom the navigation-bar I'd be set :p

The page I'm refering to is: http://www.forex.se and you see the navigation at the top (Web shop, Valuta, Aktuellt... etc). If you put your mouse over the name a second level beneath it appears. Nice! :)

I have looked at the source code but I really don't understand it (it seem to be part javascipt and part DHTML but I'm too much of a beginner to sort it out on my own).

Any help, as always, much appreciated!

Cheers,
Mikael

Precluding javascript:

<SCRIPT language=javascript><!--
var IJCSTimeout = 0;
var IJCSLayer = findLayer(sLayerName);
if (IJCSLayer) {
IJCSLayer.onmouseover = function () {
if (IJCSTimeout) {
clearTimeout(IJCSTimeout);
IJCSTimeout = 0;
}
showLayer(findLayer(sLayerName));
}
IJCSLayer.onmouseout = function () {
IJCSTimeout = setTimeout("hideLayer(findLayer('" + sLayerName + "'))", ResetTimeout);
}
}
//--></SCRIPT>

Example source-code (1st level: "Web shop", 2nd level: Web shop, Mina sidor, Hjälp")

<DIV id=FOREXMenu1>
<TABLE cellSpacing=0 cellPadding=0 width=739 border=0>
<TBODY>
<TR>
<TD class=FOREXMenu1Content background=rate-converter-filer/menu1-bg.gif>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=FOREXMenu1Content height=27><A
onmouseover="doOver('Menu187')"
onclick="doClick();setupMenu('Menu187')" onmouseout=doOutKeep()
href="http://www.forex.se/shop-page.asp?sectionId=245"><IMG
src="rate-converter-filer/web_shop.gif" border=0
name=Menu187></A></TD>
<TD class=FOREXMenu1ContentActive height=27><A
onmouseover="doOver('Menu180')"
onclick="doClick();setupMenu('Menu180')" onmouseout=doOutKeep()
href="http://www.forex.se/rates.asp?sectionId=246"><IMG
src="rate-converter-filer/currency.gif" border=0
name=Menu180></A></TD>

Example source code (2nd level)

<DIV class=FOREXMenu2 id=Menu187>
<TABLE height=30 cellSpacing=0 cellPadding=0 width=720 border=0>
<TBODY>
<TR>
<TD vAlign=top>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=FOREXMenu2Content height=20><A
href="http://www.forex.se/shop-page.asp?sectionId=245">Web
Shop</A></TD>
<TD class=FOREXMenu2Content height=20>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD class=FOREXMenu2Content height=20><A
href="http://www.forex.se/user-profile.asp?sectionId=244">Mina
sidor</A></TD>
<TD class=FOREXMenu2Content height=20>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD class=FOREXMenu2Content height=20><A
href="http://www.forex.se/Contactus.asp?sectionId=801">Hjälp</A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

cr3ative
12-06-2004, 03:47 PM
[may be offtopic]
Doesn't this do exactly the same?
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm
[/may be offtopic]

cr3ative