Creating a multi-coloured menu?

Hi I'm about to start a site for a prinnting company and would like to use Zen Cart 1.3.x for maximum addon compatibility.

My question is, can the menu system be coloured INDEPENDENTLY for each menu item? I need a vertical rainbow menu.

I've done this in Joomla before using the article IDs as a class, but wondered if such functionality is built into Zen Cart.

Obviously the easy way is one background image - I'm after something a bit more intelligent.

I await your answers with baited breath!

Cheers.

johnlewisdesign:

Hi I'm about to start a site for a prinnting company and would like to use Zen Cart 1.3.x for maximum addon compatibility.

As long as x=9h, that's OK, though I would still use 1.5.0 and forgo any mods which don't work (yet).

Exactly what 'menu items' are you referring to ?

Indeed it is 9h.

What I refer to is a dropdown menu (I'm using DropMenu) where each parent is a different colour.

For instance

Home About Shipping Contact Help

But the background colours are to be targeted not the text.

In Joomla using Superfish Menu module I can simply make

.SFMenu ul { }

into

.SFMenu ul#item14 {background-color: #fc0;}

to target the menu item with id 14.

(not the exact CSS, but kinda how it works).

I just want to know if this item-specific targeting for css is possible in Zen Cart.

Re: version - unfortunately I cannot go to 1.5.0 yet but plan on doing so when the mods catch up :blush:

Ask in the support threads for the CSS dropdown menu mods from Free Addons. I don't know if any of them have ids built in, but that feature could be added fairly easily if not.
For the sidebox menu, Categories Dressing does give an id to any category group or ul, or individual category you set to have one.

We use the dropdown menu you are referring to (I think) and we have managed to get it to render different background colours on the initial hovers.

As Glenn says, it requires adding some style ID's to the menu's code file (tpl_drop_menu.php) and a couple of new declarations in the associated stylesheet.

THE ORIGINAL PHP

<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
            <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

OUR EDIT

<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
            <li class="submenu" id="first"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

(See the addition of id="first" in that specific submenu <li>)?

ORIGINAL CSS

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*ash*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#DC0019;}

OUR EDIT

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*ash*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#DC0019;}
div#dropMenu li#first a:hover, div#dropMenu li.submenu li#first.submenu:hover {color: #ffffff!important;background:#000;}

**[

SEE THE RESULT](http://www.demanincor-uk.com/index.php)**

on demanincor - uk website. Hover over header menu items. HOME item has black background, others have red.

You can apply this principle to all the menu items.