CSS Dropdown menu for the header- With Categories!

17 Feb 2007, 06:44

#1

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

CSS Dropdown menu for the header- With Categories!

This add-on will allow you to have a horizontal css based flyout menu for your zen cart header. It also display your categories dynamically, along with other useful links for your customers. information. This mod was built upon a previous version built for earlier versions of zen cart.

You can see this mod in action at http://www.applezen.sagefish.com/

It is also integrated into the Apple Zen template found here:
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_53&products_id=449

Submitted to the download section.

18 Feb 2007, 23:14

#2

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

The mod has been submitted to the download section:

Horizontal CSS Drop Down Menu with Categories

19 Feb 2007, 01:14

#3

rabbcon

Zen Follower

Join Date:: Dec 2006
Posts:: 143
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

Thanks for this contribution.

Does this contribution allow your vertical categories to flyout as well or should we download the other contribution (CSS Flyout Menu) if we want this design?

Again, thank you.

19 Feb 2007, 02:34

#4

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

Rabbcon:
Thanks for this contribution.

Does this contribution allow your vertical categories to flyout as well or should we download the other contribution (CSS Flyout Menu) if we want this design?

Again, thank you.

No, it doesn't not have vertical categories.... but technically you could use this mod, and it would only require a new stylesheet. I just didn't design it vertically. There were some issues in older versions of css flyout menu's so you may want to download both and use the main files from my mod, but use the stylesheet from the vertical (some changes may be needed in the css though). Clear as mud?

19 Feb 2007, 17:20

#5

dogtags

Totally Zenned

Join Date:: Nov 2003
Posts:: 876
Plugin Contributions:: 1

Re: CSS Dropdown menu for the header- With Categories!

Can this menu be used on static HTML pages, as well?

I'd like to show some items on static pages but also use this great menu.

Is it possible?

I'd like to pull the menu from the cart installation location by using some php include tags maybe?

Thanks :smile:

19 Feb 2007, 18:30

#6

disciple

Totally Zenned

Join Date:: Aug 2004
Posts:: 278
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

I have installed the css dropdown menu and it works great. Thanks!

I would like to put my manufacturers in a dropdown as well. As I looked at how things were being done it appears as though in order to get the catergories menu items many queries and such had to be done via the ul category generator. Would the same type of thing need to be done in order to get the manufactures listed in a dropdown menu?

The reason I ask is that I am not a programmer and I don't think I could it if that is what was required.

Thanks in advance for your response.

Rick

20 Feb 2007, 06:07

#7

jean

New Zenner

Join Date:: Jan 2004
Posts:: 17
Plugin Contributions:: 1

Re: CSS Dropdown menu for the header- With Categories!

Do you know how we could be rid of the first menu

* Home
* Log In

In the top-top of the page as it make double use with your menu?

TIA

20 Feb 2007, 12:55

#8

disciple

Totally Zenned

Join Date:: Aug 2004
Posts:: 278
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

Remove the lines that refer to it in your tpl_header.php file and then just use the call method in the instructions to call the tpl_drop_menu.

Make sure you create an override for the tpl_header.php file in your custom directory.

Here is how I have placed it in my tpl_header.php file:

<div id="headerWrapper">
  <!--bof-navigation display-->
  <div id="navMainWrapper">
        <!--bof-drop down menu display-->
    <?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
  <!--eof-drop down menu display-->
  <!--eof-navigation display-->

Rick

20 Feb 2007, 14:09

#9

dogtags

Totally Zenned

Join Date:: Nov 2003
Posts:: 876
Plugin Contributions:: 1

Re: CSS Dropdown menu for the header- With Categories!

Is there a way to add a Down Arrow to top-level menu items that contain sub items? (but not to top items that do not contain sub items)

20 Feb 2007, 14:45

#10

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

DogTags:
Can this menu be used on static HTML pages, as well?

I'd like to show some items on static pages but also use this great menu.

Is it possible?

I'd like to pull the menu from the cart installation location by using some php include tags maybe?

Thanks :smile:

I really would have no idea on how to go about that. My only suggestion would be to hard code for the static pages.

20 Feb 2007, 14:50

#11

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

disciple:
I have installed the css dropdown menu and it works great. Thanks!

I would like to put my manufacturers in a dropdown as well. As I looked at how things were being done it appears as though in order to get the catergories menu items many queries and such had to be done via the ul category generator. Would the same type of thing need to be done in order to get the manufactures listed in a dropdown menu?

The reason I ask is that I am not a programmer and I don't think I could it if that is what was required.

Thanks in advance for your response.

Rick

Do you think your manufacturers would change much? I'm sure what you're asking can be done, as the manufacturer's sidebox is already programmed to output as an ordered list, so perhaps duplicating and renaming that module, and inserting it into the dropdown header could be done, but that would take a good bit of work, I think. If your manufacturers is relatively stable, the easiest way would be to hardcode it into the menu.

20 Feb 2007, 14:57

#12

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

DogTags:
Is there a way to add a Down Arrow to top-level menu items that contain sub items? (but not to top items that do not contain sub items)

See if this works:

add this to your stylesheet_header_menu.css:

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

The image is attached. It goes in your includes/templates/YOUR_TEMPLATE/images folder.

20 Feb 2007, 15:25

#13

dogtags

Totally Zenned

Join Date:: Nov 2003
Posts:: 876
Plugin Contributions:: 1

Re: CSS Dropdown menu for the header- With Categories!

jettrue:
See if this works:

add this to your stylesheet_header_menu.css:

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

The image is attached. It goes in your includes/templates/YOUR_TEMPLATE/images folder.

1. It was added to all top-level items (even those without sub items)

2. It was also added to sub items that had further sub items

20 Feb 2007, 15:48

#14

rabbcon

Zen Follower

Join Date:: Dec 2006
Posts:: 143
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

We got the old menus working for the Categories. Has anyone used CSS Flyout with sideboxes? Does this work?

20 Feb 2007, 19:12

#15

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

DogTags:
1. It was added to all top-level items (even those without sub items)

2. It was also added to sub items that had further sub items

1. Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php and remove the "class="submenu" from top-level items without sub items. So the contact us link would change to this:

<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>

2. Add this to the header_menu css file:
div#dropMenu li.submenu li.submenu {background: none;}

OR, you could use the image attached to have arrows pointing right to designate further subcategories, with this css:

div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;}

20 Feb 2007, 19:15

#16

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

Rabbcon:
We got the old menus working for the Categories. Has anyone used CSS Flyout with sideboxes? Does this work?

The old contribution *can* work, its just really buggy. I had issue with categories that didn't have subcategories being first in the drop menu, etc.... certain category scenarios causes problems with the old mod. I have used the older sidebox one without issue on a site or two, I believe.

20 Feb 2007, 21:18

#17

rabbcon

Zen Follower

Join Date:: Dec 2006
Posts:: 143
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:
...I have used the older sidebox one without issue on a site or two, I believe.

What do you mean by the "older sidebox one"? Do you mean that you have used the older contribution on a sidebox or there is a contribution for CSS Flyout Sideboxes that you have used? I did not see a contribution for CSS Flyout sideboxes in the download section. I may have overlooked it.

20 Feb 2007, 21:22

#18

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

Rabbcon:
What do you mean by the "older sidebox one"? Do you mean that you have used the older contribution on a sidebox or there is a contribution for CSS Flyout Sideboxes that you have used? I did not see a contribution for CSS Flyout sideboxes in the download section. I may have overlooked it.

It's in the downloads, under sideboxes.

Direct Link:

CSS Flyout Menu

20 Feb 2007, 22:01

#19

cmessa

New Zenner

Join Date:: Mar 2006
Posts:: 29
Plugin Contributions:: 0

Re: CSS Dropdown menu for the header- With Categories!

I just installed your menu's and they work great. I also installed the lightbox image add on and it works great also, but the problem is that you menu is over the lightbox image. Does anyone know how to get the menu to be in the background behind the lightbox?

click on the image to see the lightbox image and the problem. This is not the final pic, but you should be able to see the problem.
http://sacedout.com/index.php?main_page=product_info&cPath=5&products_id=22

thanks for any help.

CMessa

20 Feb 2007, 22:23

#20

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS Dropdown menu for the header- With Categories!

cmessa:
I just installed your menu's and they work great. I also installed the lightbox image add on and it works great also, but the problem is that you menu is over the lightbox image. Does anyone know how to get the menu to be in the background behind the lightbox?

click on the image to see the lightbox image and the problem. This is not the final pic, but you should be able to see the problem.
http://sacedout.com/index.php?main_page=product_info&cPath=5&products_id=22

thanks for any help.

CMessa

Hi!

Open up your stylesheet_lightbox.css and add a zero to the end of all of the z-index's.

So if it says

"z-index:10", change it to "z-index:100"

If it says "z-index:90", change to "z-index:900", etc.