navbar

[daniboye]

Hello all,

I have been spending some time trying to find a navbar script like www.tiscali.co.uk, i am looking to use a menu like theirs at the top. Does anyone know of a script? Would be most helpful and you will be rewarded with a herring. Thanks in advance chaps.

[daniboye]

no problem, just found it

[jscheuer1]

It took me some time to find the darn thing. It is a pretty involved combination of HTML, graphics, css and javascript served up through an iframe on the main (and probably other) page(s). I doubt they would take kindly to its being copied. It reminds me of the tab content here at DD:

http://www.dynamicdrive.com/dynamici...tabcontent.htm

and the tabs menu:

http://www.dynamicdrive.com/dynamici...bmouseover.htm

Since you said you wanted one 'like' what Tiscali has, those are close. You would have to modify one of them to get it closer to the look of the Tiscali menu but, they have the structure and functionality there.

[daniboye]

error,




-----


<link href="media/theme/style1.css" rel="stylesheet" type="text/css">

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->

<td class="NAV"><div align="left">
<table width="0%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="NAVLINKS"><a href="#">home</a></td>
<td class="NAVLINKS"><a href="#" nMouseover="showit(0)">news</a></td>
<td class="NAVLINKS"><a href="#" nMouseover="showit(1)">articles</a></td>
<td class="NAVLINKS"><a href="#">user articles </a></td>
<td class="NAVLINKS"><a href="#">free downloads</a></td>
<td class="NAVLINKS"><a href="#">forums</a></td>
<td class="NAVLINKS"><a href="#">galleries</a></td>
<td class="NAVLINKS"><a href="#">software</a></td>
<td class="NAVLINKS"><a href="#">about us</a></td>
<td class="NAVLINKS"><a href="#">register</a></td>
<td class="NAVLINKS"><a href="#">login</a></td>
<td>&nbsp;</td>
</tr>
</table>
</div></td>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=770 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=770 height=32>
</layer>
</ilayer>
<div id="describe" class="NAVOPEN"></div>


<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="#">news</a> <a href="#">hardware</a> <a href="#">software</a> <a href="#">software</a> <a href="#">games</a> <a href="#">submit news</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="#">news</a> <a href="#">hardware</a> <a href="#">software</a> <a href="#">software</a> <a href="#">games</a> <a href="#">submit news</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>



-----


Anyone have any idea what im doing wrong? it isnt working now

[daniboye]

It took me some time to find the darn thing. It is a pretty involved combination of HTML, graphics, css and javascript served up through an iframe on the main (and probably other) page(s). I doubt they would take kindly to its being copied. It reminds me of the tab content here at DD:

http://www.dynamicdrive.com/dynamici...tabcontent.htm

and the tabs menu:

http://www.dynamicdrive.com/dynamici...bmouseover.htm

Since you said you wanted one 'like' what Tiscali has, those are close. You would have to modify one of them to get it closer to the look of the Tiscali menu but, they have the structure and functionality there.

thankyou, trying it now

[daniboye]

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="#">home</a> <a href="#" onMouseover="showit(0)">news</a> <a href="#" onMouseover="showit(1)">articles</a> <a href="#">my tth</a> <a href="#">free downloads</a> <a href="#">forums</a> <a href="#">galleries</a> <a href="#">about us</a> <a href="#">register</a> <a href="#">log in</a><br>




how do i style that? im not too good with html and javascript as you may guess.

[daniboye]

fixed/

[sleipner]

you could use just a mouseover image swap combined with the tab menu, either using a wizard in an html editor, code it yourself, or check w3.org, which has documentation on pretty much everything that has to do with html, scripting and what not, or check dd for an img swap script, and instead of text for the initial text link, use an image