Drop Down Tabs not working

**Dariune** · 02-16-2008, 05:11 PM

Hi guys

I am trying to use the Drop Down Tabs (5 styles) to create a drop down navigation bar on one of my websites and after 6 hours of going through it i thought i would ask for assistance.

Its just not working. The url is http://www.dynamicdrive.com/dynamici...roptabmenu.htm

Below is the code. I guess im supposed to tell the page where to look for the JS file but cant figure out where.

If anyone is able to help it would save me the largest headache since i started learning HTML.

Thanks very much in advance
Dariune

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Dragon's Touch - Home</title>
<!-- TemplateEndEditable -->
<style type="text/css"> 
<!-- 
body { 
    background-color: #000000;
}
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #b46633;
}
-->
--> 
</style> 
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
a:link { 
    color: #b46633; 
} 
.style3 {font-size: medium}
a:visited {
	color: #d01foa;
}
a:hover {
	color: #d01foa;
}
a:active {
	color: #d01foa;
}
--> 
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script type="text/JavaScript">
<!--


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<link href="../dropdowntabs/dropdowntabfiles/ddcolortabs.css" rel="stylesheet" type="text/css" />
</head> 

<body onload="MM_preloadImages('../Images/Linkart/links_b.gif')"> 
<div class="style3" id="outer"> 
    <div id="Header"></div>
	<div id="SecNav"><p align="center">Secondary Navigation<br />
	
	<div id="ddcolortabs" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>
	
	<!--1st drop down menu --> 
<div id="dropmenu1" class="ddcolortabs">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>
"
"

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>
	
	</div>
    <div id="links"><br />
      <p align="left">Home<br />Dragons<br />Etc
      
      <div id="news"> 
	  This is the news area
	  <!-- TemplateBeginEditable name="News" -->News<!-- TemplateEndEditable -->
    <p>      Dragons Touch will be launching our first DT Festival in 2009 </p>
	  </div>
  </div> 
  
  
    <div id="Main">
      <div align="center">

<!-- TemplateBeginEditable name="Main" --><!-- TemplateEndEditable --></div>
    </div> 
	
	
<div id="Footer"><img src="../Images/Footer2.png" width="400" height="107" /></div>
</div>
</body> 
</html>

**ddadmin** · 02-17-2008, 02:19 AM

Please post a link to the page on your site that contains the problematic script so we can check it out. It sounds like the references to the .css files of the script in the HEAD section of your page aren't correct.

**Dariune** · 02-17-2008, 09:15 AM

Im afraid i cant

My website is local to my machine at the moment.

You think im pointing to the wrong place for the CSS?

I havent pointed it to the JS at all yet because i dont know where or how.

**MuzicAngel** · 02-17-2008, 01:15 PM

Hi, i have been working to set-up these DD tabs since the past 7 days. I'm a novice at web designing but have used many of scripts from Dynamic drive in my website already.... without any problem. I totally agree that there's no where in the script for pointing to .JS file. It seems that some part of the script is missing. Lets hope that we get help for this soon....

**Dariune** · 02-17-2008, 05:14 PM

Im begginning to think i may have to try something else. I asked 4 forums at the same time as this one and no one knows how to make this code work

If i find a decent alternative i will let you know.

**ddadmin** · 02-17-2008, 09:05 PM

Dariune:
Without a live URL to look at the problem, it's much harder to diagnose things. But just looking at the source you posted above, it seems to be missing the script reference at the very top of your page:

Code:

<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) 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
***********************************************/

</script>

Take a look at the source of the demo page you downloaded (zip file) again, and make sure your page includes every component referenced there.

**Dariune** · 02-18-2008, 11:03 AM

Thankyou ddadmin, its really coming along now. Im almost there. It works but the tabs are being shown in the center of the screen rather than below the tabs.

Below is a screenshot of what i have so far and the updated html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Dragon's Touch - Home</title>

<script type="text/javascript" src="../dropdowntabs/dropdowntabfiles/dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) 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
***********************************************/

</script>

<!-- TemplateEndEditable -->
<style type="text/css"> 
<!-- 
body { 
    background-color: #000000;
}
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #b46633;
}
-->
--> 
</style> 
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
a:link { 
    color: #b46633; 
} 
.style3 {font-size: medium}
a:visited {
	color: #d01foa;
}
a:hover {
	color: #d01foa;
}
a:active {
	color: #d01foa;
}
--> 
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" href="../dropdowntabs/dropdowntabfiles/ddcolortabs.css" />
</head> 

<body> 
<div class="style3" id="outer"> 
    <div id="Header"></div>
	<div id="SecNav">	
	<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>	
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>	
</ul>
</div>
	
	<div class="ddcolortabsline">&nbsp;</div>
	<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</div>
	
    <div id="links"><br />
      <p align="left">Home<br />Dragons<br />Etc
      
      <div id="news"> 
	  This is the news area
	  <!-- TemplateBeginEditable name="News" -->News<!-- TemplateEndEditable -->
    <p>      Dragons Touch will be launching our first DT Festival in 2009 </p>
	  </div>
  </div> 
  
  
    <div id="Main">
      <div align="center">

<!-- TemplateBeginEditable name="Main" --><!-- TemplateEndEditable --></div>
    </div> 
	
	
<div id="Footer"><img src="../Images/Footer2.png" width="400" height="107" /></div>
</div>
</body> 
</html>

**block306** · 02-18-2008, 02:56 PM

Hi Daruine,
I have similar problems. I could not figure out where the .js files are supposed to be or whether we have to upload them somewhere 1st. Can you share your experience with me? I tried to pm you but your settings do not allow that. Please email me at block306 at gmail.com and I would like to pick your brains. Thanks.

**ddadmin** · 02-18-2008, 07:06 PM

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves, plus the initialization JavaScript code, are outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

Code:

	<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</body>

**Dariune** · 02-21-2008, 02:22 PM

Thats fantastic. It now works perfectly on the template page. Thankyou so much for your help!

My only problem is it doesnt work on the client pages. Because i am using Dreamweaver i am using template pages. I realises this is a longshot but does anyone here use dreamweaver templates and if you do, do you know why none of the bottom divs (dropdown divs) would show on any page other than the template page?

Thread: Drop Down Tabs not working

Thread Tools

Search Thread

Drop Down Tabs not working

Bookmarks

Bookmarks

Posting Permissions