View Full Version : DD Tab Menu (I or II)

JF sly
09-30-2004, 03:56 PM

Script: DD Tab Menu II (http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm)

I like the look of the DD Tab Menu II. However, I would like to be able to use it across an entire site so that the menu is standard among all pages (without using frames). My question(s) are:

1) Can the code be split into files that can be called/linked, for example:
menu.css - has all the style infomation/code
menu.js - has the main/core code

(I guess it would also be acceptable it it were all in one external code if that were easier)

This would allow me to only have to change the menu_items.js file if I needed to add/delete a tab on the menu rather than have to edit all pages on the site

2) If this is possible:

a) Then how do you call the script from the Html document?
b) How do you have the main core code look to the menu_items.js file and the menu.css file?

3) Is it possible to incorporate the preloader.js code into the DD Tab Menu code so that the preload occures automatically?

Thanks for any help/input with this.

JF sly

09-30-2004, 04:43 PM
You could take this code

* DD Tab Menu II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
if (previoustab!="")

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
for (i=0; i<tabobjlinks.length; i++)

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")

function do_onload(){
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)

And save it to file, then you can link to it like this: <script src="filename.js">
Next, I suppose you could do this to make the javascript "write" your HTML, save it to a file and link it as before:

document.write("<div id='ddimagetabs'><a href='http://url/' onMouseover='expandcontent('sc1', this)'>Home</a> <a href='http://url/' onMouseover='expandcontent('sc2', this)'>New</a> <a href='http://url/' onMouseover='expandcontent('sc3', this)'>Revised</a><a href='http://url/' onMouseover='expandcontent('sc4', this)'>Submit</a></div> <br style='clear:left' /><DIV id='tabcontentcontainer'><div id='sc1' class='tabcontent'>Return to the <a href='http://www.dynamicdrive.com'>frontpage</a> of Dynamic Drive.</div><div id='sc2' class='tabcontent'>See the new scripts recently added to Dynamic Drive. <a href='http://www.dynamicdrive.com/new.htm'>Click here</a>.</div><div id='sc3' class='tabcontent'>A listing of scripts recently changed, plus description of the changes. <a href='http://www.dynamicdrive.com/revised.htm'>Revised Section</a>.</div><div id='sc4' class='tabcontent'>Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href='http://www.dynamicdrive.com/submitscript.htm'>Click here</a>.</div></DIV>");

( All I did here was replace " with ', and put it all on one line wrapped with document.write("text"); )

I don't know enough about style sheets to comment about them, but I reckon the code above should work with no probs. Put the <script src="url"> tags in the right place (i.e BODY or HEAD sections) and it should work.


JF sly
09-30-2004, 05:05 PM
Thanks for the response. One question,

Where do I put the second bit of code that you did. If it goes in the individual html page(s), then I would still need to change every page if I change the tabs.

Maybe I'm not understanding correctly