help with horizontal ccs menu on define pages

**pdxdoug** · 18 Jun 2010, 03:53 AM

Need some help please-
zc 1.3.8a

On several define pages I want to have use a horizontal CSS tabs menu and have tried without success to get it even close to working.

This is the script from Dynamic Drive for the menu:

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" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Drop Down Tabs demos</title>

<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>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

<!-- CSS for Drop Down Tabs Menu #2 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/bluetabs.css" />

<!-- CSS for Drop Down Tabs Menu #3 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/slidingdoors.css" />


<!-- CSS for Drop Down Tabs Menu #4 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/glowtabs.css" />

<!-- CSS for Drop Down Tabs Menu #5 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/halfmoontabs.css" />

<body>

<h2>1) Example 1</h2>

<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>

<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>

javascript was dropped into includes/templates/my_template/jscript directory.

I use this line to call jscript:
<script type="text/javascript" src="/includes/templates/my_template/jscript/dropdowntabs.js">

I added the ccs to the stylesheet so it should load. But I end up with a blank page.

This is my test page.

Thanks in advance.

**kobra** · 18 Jun 2010, 04:19 AM

src="/includes/templates/my_template/jscript/dropdowntabs.js">

Try adding the jScript correctly
https://www.zen-cart.com/tutorials/index.php?article=36

Scroll to the section titled "Adding Extra Javascript to a specific page"

Then all you add to defines page is

Code:

<h2>1) Example 1</h2>

<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>

<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>

The css goes into your stylesheet

**pdxdoug** · 18 Jun 2010, 04:43 AM

Thanks Kobra.

So if I'm reading the tutorial correctly, the file I drop into modules/pages/my_page is new and named:

jscript_dropdowntabs.js

and has this as the contents:

Doug

**kobra** · 18 Jun 2010, 06:15 AM

So if I'm reading the tutorial correctly, the file I drop into modules/pages/my_page is new and named:

jscript_dropdowntabs.js

and has this as the contents:

<script type="text/javascript" src="/includes/templates/my_template/jscript/dropdowntabs.js">

Not actually....

You have a file named "dropdowntabs.js" you rename this file to be "jscript_dropdowntabs.js" and it is loaded/uploaded to your templates /jscript folder

It is then automatically loaded