Results 1 to 5 of 5
  1. #1
    Join Date
    Jan 2008
    Location
    Portland, Oregon USA
    Posts
    358
    Plugin Contributions
    0

    Default 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:
    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.
    Doug

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,832
    Plugin Contributions
    9

    Default Re: help with horizontal ccs menu on define pages

    src="/includes/templates/my_template/jscript/dropdowntabs.js">
    Try adding the jScript correctly
    http://tutorials.zen-cart.com/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
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Jan 2008
    Location
    Portland, Oregon USA
    Posts
    358
    Plugin Contributions
    0

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

  4. #4
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,832
    Plugin Contributions
    9

    Default 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
    Zen-Venom Get Bitten

  5. #5
    Join Date
    Jan 2008
    Location
    Portland, Oregon USA
    Posts
    358
    Plugin Contributions
    0

    Default Re: help with horizontal ccs menu on define pages

    Thanks much! Worked perfectly.
    Doug

 

 

Similar Threads

  1. Easy pages horizontal menu & sidebox pages, dont link the same page
    By stefanl in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 19 May 2011, 03:09 PM
  2. Define pages editor missing pages in drop down menu
    By itcetera in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 14 Feb 2011, 08:16 AM
  3. How to add menu items for top horizontal menu? - help
    By AndriyZ in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 7 Feb 2010, 01:14 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR