Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / help with horizontal ccs menu on define pages

help with horizontal ccs menu on define pages

Locked

Views: 2,069

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
18 Jun 2010, 2:53 AM
#1
pdxdoug avatar

pdxdoug

Zen Follower

Join Date:
Jan 2008
Location:
Portland, Oregon USA
Posts:
356
Plugin Contributions:
0

help with horizontal ccs menu on define pages

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:

<!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"> </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](http://www.broadwayfloral.com/index.php?main_page=page_7).

Thanks in advance.
18 Jun 2010, 3:19 AM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: help with horizontal ccs menu on define pages

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

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

18 Jun 2010, 3:43 AM
#3
pdxdoug avatar

pdxdoug

Zen Follower

Join Date:
Jan 2008
Location:
Portland, Oregon USA
Posts:
356
Plugin Contributions:
0

Re: help with horizontal ccs menu on define pages

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:
<script type="text/javascript" src="/includes/templates/my_template/jscript/dropdowntabs.js">
Doug

18 Jun 2010, 5:15 AM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: help with horizontal ccs menu on define pages

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

18 Jun 2010, 4:15 PM
#5
pdxdoug avatar

pdxdoug

Zen Follower

Join Date:
Jan 2008
Location:
Portland, Oregon USA
Posts:
356
Plugin Contributions:
0

Re: help with horizontal ccs menu on define pages

Thanks much! Worked perfectly.