Add CSS dropdown menu to header

[DivaVocals]

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/

[DivaVocals]

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

[rpain]

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

[DivaVocals]

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

[jrf]

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

[Pierre]

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

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

[jettrue]

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.