Results 1 to 7 of 7
  1. #1
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,037
    Plugin Contributions
    32

    Default Add CSS dropdown menu to header

    So I'm humming my way through Zen Cart, but I want to add a CSS dropdown menu to my header.. It would appear below the EZ Pagers header.. I looked at the "Apple Zen" template and the menu below the header is similar to what I want. However, rather than trying to mod this template to resemble the look of my current template, it will probably be easier to add this within the template I am currently using for my site...

    The CSS menu I want to add is a pure CSS dropdown menu (no JS required).. So I need to confirm where I will insert my menu code. I am guessing that I will be inserting my menu code into my tpl_header.php. Is this a correct assumption?? If I use a separate CSS for my menu is it really just a matter of making sure this file is in my templates CSS folder or is there more I need to do here??

    I searched the admin function, the help files, the Wiki and this forum BEFORE I posted my question.. So if I missed it and it is possible to add this menu using the existing Zen Cart administration tools, I am all ears..

    My dev site is here: http://divawebdzine.com/clients/TreeLifePublishing/

  2. #2
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,037
    Plugin Contributions
    32

    Default Re: Add CSS dropdown menu to header

    So I edited these two files to get this working:
    /includes/templates/MyTemplate/common/html_header.php (because I had to hard code in the CSS link)
    /includes/templates/MyTemplate/common/tpl_header.php

    At this stage I just want to make sure I can get this to work.. I'll work on tweaking the menu once I have this down..

    I am sure that there is a better way I was supposed to do this within the Zen Cart way.. I hope someone can chime in here their three cents.. Otherwise I'll go with this for now..

  3. #3
    Join Date
    Mar 2005
    Location
    Watford, UK
    Posts
    155
    Plugin Contributions
    0

    Default Re: Add CSS dropdown menu to header

    Hi - I'm trying to do the same and used fireworks to come up with the menu for a custom header (I don't have v8 so it uses JS not css...a problem).

    I've been working on it all afternoon and it works ok in firefox but I stupidly didn't test it with ie as I was going along and of course it's all over the place - Aaargh!.

    If you could let me know how you get on that would be great as I'm getting nowhere fast.

    Richard

  4. #4
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,037
    Plugin Contributions
    32

    Default Re: Add CSS dropdown menu to header

    I used a pure CSS solution which works in IE and Firefox on the PC side.. TI'm discovering is that it works differently on the Mac. On the Mac (in Safari or Firefox) when hovering over the menu, the dropdown doesn't appear. I have to click and hold the mouse to get the menu to appear.. It appears that this is the nature of these type of menus on Macs.. Even JS driven dropdowns have the same behavior.. Not sure what I'm gonna do..

  5. #5
    Join Date
    Jan 2007
    Posts
    35
    Plugin Contributions
    0

    Default Re: Add CSS dropdown menu to header

    Hi -
    I am stuck on this same thing and have worked for more hours than I can admit on how to get the fireworks custom header...
    could you let me know how you did this? I've tried adding the js files to jscript, change the tpl_header... for some reason my javascript just appears in the page source in the browser as a SCRIPT link... not with the code read in...

    Getting nowhere even faster...!!!
    Jackie

  6. #6

    Default Re: Add CSS dropdown menu to header

    If you don't want to display the top categories, you can use that space for your links. Edit the file includes/templates/template_default/templates/tpl_modules_catregories_tabs.php

    and put in the code
    Code:
    <?php
     if (CATEGORIES_TABS_STATUS == '1') { ?>
    <div id="navCatTabsWrapper">
    <div id="navCatTabs">
    <style type="text/css">
    
    #zUL,#zUL ul {padding:0;margin:0}
    #zUL li ul a {margin-left:1em}
    #zUL li {
        float:left;
        width:9em;
        position:relative;
        list-style-type:none;
        font-weight:600
    }
    
    
    #zUL li ul {
        visibility:hidden;
        position:absolute
    }
    
    fieldset p {clear:left}
    
    #zUL li:hover ul {
        visibility:visible;
        background-color:#fff;
    }
    </style>
    
    <ul id="zUL">
      <li><a href="#">1st Set of Links</a>
        <ul>
          <li><a href="Link 11">Link 1.1</a></li>
          <li><a href="Link 12">Link 1.2</a></li>
          <li><a href="Link 13">Link 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">2nd Set of Links</a>
          <ul>
          <li><a href="Link 21">Link 2.1</a></li>
          <li><a href="Link 22">Link 2.2</a></li>
          <li><a href="Link 23">Link 2.3</a></li>
          <li><a href="Link 24">Link 2.4</a></li>
          <li><a href="Link 25">Link 2.5</a></li>
        </ul>
      </li>
    </ul>
    </div>
    </div>
    <?php } ?>
    You will maybe need to edit the spacing a bit.
    http://www.customscripts.co.za - Custom development for open-source applications

    http://www.pcservice.co.za - Website Development, Domain Registration, Hosting

  7. #7
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,719
    Plugin Contributions
    9

    Default Re: Add CSS dropdown menu to header

    Quote Originally Posted by DivaVocals View Post
    So I'm humming my way through Zen Cart, but I want to add a CSS dropdown menu to my header.. It would appear below the EZ Pagers header.. I looked at the "Apple Zen" template and the menu below the header is similar to what I want. However, rather than trying to mod this template to resemble the look of my current template, it will probably be easier to add this within the template I am currently using for my site...

    Actually, you'd only need to edit the css to make it match your site, then open up one file to adjust the links that you want to show. That way if you add/edit categories, it dynamically generates the dropdown.

 

 

Similar Threads

  1. CSS Dropdown menu for the header- With Categories!
    By jettrue in forum All Other Contributions/Addons
    Replies: 2343
    Last Post: 8 Jan 2019, 10:51 AM
  2. dropdown css header menu on internal pages only
    By raunharman in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 20 Jun 2011, 08:22 AM
  3. Header Dropdown Menu (CSS) Without the Dropdown???
    By hcd888 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 27 May 2009, 01:20 AM
  4. CSS Horizontal Drop Down menu - dropdown menu width...
    By intrium in forum All Other Contributions/Addons
    Replies: 0
    Last Post: 19 Aug 2008, 06:48 PM
  5. Header Dropdown Menu - Nice! - how add Down Arrows ?
    By DogTags in forum All Other Contributions/Addons
    Replies: 14
    Last Post: 19 Feb 2007, 01:44 PM

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