CSS Dropdown menu for the header- With Categories!

[waqas83]

hockey, 4 posts above yours has a link to another post in this thread showing you how to do exactly that. Gotta learn to read and search these threads for your answers.........Top right......"Search This Thread"..........keywords like "Categories", "replace categories".........etc..........

To view the categories horizontally I applied the patch mentioned here. And it perfectly worked.

Next I needed to hide the things other than Categories(needed to hide the title 'Categories' as well). So, I made changes in

includes\templates\YOUR_TEMPLATE\common\tpl_drop_menu.php

Basically, I removed the things other than Categories. I don't know if it's a good approach but it worked for me. Here's the code:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
            <li class="submenu">
              <?php
 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

Hope it helps someone.

[Get Em Fast]

If you didn't need the other menu items, then yes......that was the correct approach to remove them.

[raunharman]

I installed this mod. Have a look http://www.handicrafts-from-india.com
Perfect !
But how and where do I change the text and the links...LINK1.1 etc...
Also, is there a way I can toggle its display to off and on.

[Get Em Fast]

I installed this mod. Have a look http://www.handicrafts-from-india.com
Perfect !
But how and where do I change the text and the links...LINK1.1 etc...
Also, is there a way I can toggle its display to off and on.

Nope.........you've got the wrong menu......this menu is FOUND HERE, and looks MUCH better!!

[kirwo]

I installed this mod on zen cart, works nice and how it should behave

But here it goes, is there a way to get this done. when you click a link inn the css drop down menu is it possible to get it to stand out with active state like this.

http://www.projectseven.com/tutorials/index.htm

[hockey2112]

Thanks for the heads-up, not sure how I missed that.

One item I neglected to mention in my post above was that I also need the products to be listed under the category titles, as such:

MUSTARDS (category)
Hot Mustard (product 1)
Mild Mustard (product 2)

I searched this thread, and the only solution I could find was to give every product its own subcategory. I don't think that solution would work well for the site I am building. Any input on how I can modify the code from post #1921 to have it show the products underneath the categories?

Thanks!

Get Em Fast, do you (or anyone else) have any ideas on how I can enable this kind of functionality?

Thanks!

[Get Em Fast]

Hockey, in order for the product name to show up in the menu, you have to actually create another level (sub-cat) in the menu by the same name as your product by creating your products like:


Category=Mustards
Sub-Cat=Hot Mustard
Sub-Sub-Cat= Name of Product 1
Product= Product 1


Mustards/Hot Mustard/Product 1/Product 1
Mustards/Mild Mustard/Product2/Product 2

Hope this helps.

[hockey2112]

Hockey, in order for the product name to show up in the menu, you have to actually create another level (sub-cat) in the menu by the same name as your product by creating your products like:


Category=Mustards
Sub-Cat=Hot Mustard
Sub-Sub-Cat= Name of Product 1
Product= Product 1


Mustards/Hot Mustard/Product 1/Product 1
Mustards/Mild Mustard/Product2/Product 2

Hope this helps.

Bummer, I was hoping there was a way around that. thanks for the reply.

[1kell]

...I installed a css drop down menu ages ago, its modified so that it dynamically generates the categories across the main top line, and subcategories/products drop down in a box when scrolled over. In modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another javascript menu, but am trying to apply the same to my css menu. This is my current css code:

:
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #eb2e83!important;background:#ffffff;}

#dropMenuWrapper {
	width:100%;
	height:25px;
	margin:0;
	font-size:12px;
	}
div#dropMenu {
  	width:100%;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}
div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
	}
div#dropMenu ul.level1 {
	width:75%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff;
	border-top:0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	height:25px;
	z-index:1000;
	}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

[hockey2112]

...I installed a css drop down menu ages ago, its modified so that it dynamically generates the categories across the main top line, and subcategories/products drop down in a box when scrolled over. In modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another javascript menu, but am trying to apply the same to my css menu. This is my current css code:

:
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #eb2e83!important;background:#ffffff;}

#dropMenuWrapper {
	width:100%;
	height:25px;
	margin:0;
	font-size:12px;
	}
div#dropMenu {
  	width:100%;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}
div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
	}
div#dropMenu ul.level1 {
	width:75%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff;
	border-top:0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	height:25px;
	z-index:1000;
	}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

I'm not quite sure how to accomplish what you want to do, but I would like to take a look at your website to see your drop-down and also try to figure out this issue for you.

Which add-on are you using that allows such a drop-down system? It is exactly what I need (categories across the top, subcats underneath those in a drop-down, and products under the subcats in a secondary drop-down).