CSS Dropdown menu for the header- With Categories!

Get Em Fast:

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.

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

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.

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.

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

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

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!

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.

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.

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

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

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?



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

I have added the CSS Dropdown menu this morning, and the rest of my page seems to have disappeared!

My website is https://www.westernragandsafety.com.au/shop

I am also using the noprices template which I received from http://www.zen-cart.com/forum/showthread.php?t=168009

If anyone can help me that would be greatly appreciated!

Not to be the detail police or anything, but neither of these posts seem to be related to support for the Horizontal CSS Drop Down Menu with Categories add-on at all.. (just sayin')

1kell - Based on your post are you using the Horizontal CSS Drop Down Menu with Categories add-on or is this a different menu?? If it is a different menu, you might get more assistance re-posting your question in the CSS forum.

hockey2112 - What you want is possible with this menu with some modifications to grab the product information. However, to my knowledge there aren't any posts in this thread which outline how to make such a change to the Horizontal CSS Drop Down Menu with Categories add-on. You might wanna try searching this thread to see if this is indeed the case..

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

DivaVocals:

hockey2112 - What you want is possible with this menu with some modifications to grab the product information. However, to my knowledge there aren't any posts in this thread which outline how to make such a change to the Horizontal CSS Drop Down Menu with Categories add-on. You might wanna try searching this thread to see if this is indeed the case..

I did search through this thread and I was unable to find a solution. Do you have any input on how it can be accomplished? I feel like it would be a fairly simple change to the code; I just have not been able to figure it out. Thanks!

hockey2112:

I did search through this thread and I was unable to find a solution. Do you have any input on how it can be accomplished? I feel like it would be a fairly simple change to the code; I just have not been able to figure it out. Thanks!
As I said, I don't think anyone has ever posted a solution in this thread to make the change you are seeking.. If I had an inkling how to execute this, I would have been happy to share the solution..

Absent anyone posting a solution to give you what you are looking to do with this mod perhaps you might want to look at the "Category Tab Simple Dropdown Menu". Seems you are only interested in the categories as a dropdown menu, and the "Category Tab Simple Dropdown Menu" is more suited for that specific type of menu.

DivaVocals:

As I said, I don't think anyone has ever posted a solution in this thread to make the change you are seeking.. If I had an inkling how to execute this, I would have been happy to share the solution..

Absent anyone posting a solution to give you what you are looking to do with this mod perhaps you might want to look at the "Category Tab Simple Dropdown Menu". Seems you are only interested in the categories as a dropdown menu, and the "Category Tab Simple Dropdown Menu" is more suited for that specific type of menu.

I know that no-one had posted a solution to the change I was seeking. That's why I asked if anyone could/would develop a solution for it to add to this add-on. I don't understand where you are coming from; isn't the point of a message board thread to discuss the items in question and ask about different ways to modify or use them? If you never ask, the solution might never be developed. ;)

In any case, I tried the Category Tab Simple Dropdown Menu, and it works ok. The main issue is that it is working on two of my categories, but not on the other ones, even though they are all "just categories". I posted in that thread, asking if they could provide a solution.

Meanwhile, my request for help in adding the products to this add-on's drop-down lists still stands, in case anyone has any ideas.

By the way, the website in question is http://tinyurl.com/39h2ran

hockey2112:

isn't the point of a message board thread to discuss the items in question and ask about different ways to modify or use them?
You betcha!! However, it doesn't appear that anyone reading or posting here has an answer for you at the moment.. So perhaps it's time to consider alternative solutions (one of which I posted) or giving some thought to paying a devloper to add this functionality..

hockey2112:

That's why I asked if anyone could/would develop a solution for it to add to this add-on. I don't understand where you are coming from
hockey2112:

If you never ask, the solution might never be developed. ;)Sure nothing wrong with asking, but if no solution is posted, or no one VOLUNTEERS to build it (I presume you would like this done for FREE), and/or you are not interested in seeking commercial options for getting the changes you are seeking, why keep asking the same question over and over again??

hockey2112:

Meanwhile, my request for help in adding the products to this add-on's drop-down lists still stands, in case anyone has any ideas.If you are willing to pay for this development you should post your request in the commercial help forum..

Hello!
i'm greatfull for such a pretty css menu, let me put that one first.. i only have one little problem.. :blush:
I can't seem to find a way, to put my EZ pages into the menu..
I did what the author wrote. i'm sure!
i even installed 3 times.. to be extra sure.. but..:no:
not a single one in my menu..
funny thing is, that i now have one ez-page left.. ( re-designing and all) and in the menu a very very small empty bar under the info bar... when i click on that one. i do come into that ezpage..
but it doesn't show up in the menu..
I could use a little help here ;-)

Thanks for any insight!
Eugenie

We need to see your site live to begin diagnosing the problem.

Need some help with this menu/template. I have tried just adding the drop down menu code into the template that I'm working on and using the apple zen template and modifying it but both of these approaches are giving me problems. When I add the code for the menu to my template the content for the pages disappear. When I try to upload the apple zen template to my server I get an error message when I try to go to the "template selection" page of my zen cart admin site. Is anyone else having this problem? Any known solutions? I am using the latest installation of zen cart. Thanks!

If you get a blank page after adding the menu code, you are missing some PHP tag, have an extra one, or otherwise made a mistake when adding.
What all did you do when adding? (What new files, what additions to existing files and where, etc?)