Category Tab Simple Dropdown Menu

Thank you for offering to help. I've had to turn it off entirely for now, because it was so goofy looking :( and because I can't have both dropdown and hideCategories which I need for the next two months. So I'll have to revisit this one at a later time.

(in the meantime if anyone has an idea how to do both hideCategories and dropdowns, I'd love to hear!)

Thank you!

Not sure what I am doing wrong. There was only one file to copy over. I copied it to my Includes/templates/Customtemplate/template/ folder. Was it supposed to go somewhere else? I am getting this (see attached image) for my nav bar.

That is standard HTML <ul> list formatting, with no custom styling applied at all. There should be a stylesheet in the mod package as well; you need to find that and add the file or add its styling to the main stylesheet.

I am unable to style the dropdown menu. I would like to place a border above sub category items and change hover color over text block. I have tried display:block everywhere and I don't know why it won't work. All I can get is a border the length of the text and the hover feature only over the text. I would greatly appreciate any help.

We can advise better if we can see your site.

http://audiobargain.com/cart/

I'm not sure what I'm doing wrong with this mod, but for some reason the category names are showing under the #navCatTabsWrapper instead of inside it.

http://www.babyplanetboutique.com/new

The categories should be showing inside that gray bar, not under it.

This is the html from that section when I view the source code:

<div id="navCatTabsWrapper"><div id="navCatTabs"><div id="navCatTabsDropdown"><ul><li><a class="category-top" href="http://www.babyplanetboutique.com/new/test-c-1">Clothing</a><ul><li><a href="http://www.babyplanetboutique.com/new/clothing/sleepwear">Sleepwear</a></li><br /></ul></li><li><a class="category-top" href="http://www.babyplanetboutique.com/new/feeding">Feeding</a></li></ul></div></div></div>

Danielle:

I'm not sure what I'm doing wrong with this mod, but for some reason the category names are showing under the #navCatTabsWrapper instead of inside it.

http://www.babyplanetboutique.com/new

The categories should be showing inside that gray bar, not under it.

This is the html from that section when I view the source code:

Actually it is working now, but how can I center it vertically in the blue bar?

OK, I have this so close to working, but two questions still:

1. How can I change the font color in the dropdown box only? I want the main categories in white, and the sub-categories in blue.
2. How can I make the underlining under each subcategory extend across the whole row instead of just under the text?

Here is the link again:

http://www.babyplanetboutique.com/new

Thanks!

I installed this add-on today and am experiencing a strange issue. The drop-down is only working for two categories: one (mustards) that has normal products in it, and one (Recipes) that has subcats that then have products in them.

All of my other categories have normal products in them, just like Mustards, but the drop-down is not working. This is true in all browsers I tested in. Any ideas why?

Here is the website in question: http://tinyurl.com/39h2ran

Thanks!

What URL rewriting mod are you using? What happens if you turn it off?

gjh42:

What URL rewriting mod are you using? What happens if you turn it off?

I use CEON URI Mapping. I turned it off, and the problem persists.

I was able to fix the issue. I duplicated each product into its existing category, and then disabled or deleted the "old" copies of those products. The "new" copies show up in the drop-downs just fine.

Not sure what caused this. The products that were showing up in the beginning were not newer than the ones that were not showing up. Oh well, at least it is working correctly now.

I have two new issues, both in IE7:

1. The drop-downs are behind the EZPage bar (I moved the NavCatTab menu above the EZPage bar in tpl_header.php)

2. The NavCatTab span has unexplained white space below it, above the EZPage bar. This white space does not show up in IE8 or in Firefox.

Here is the website in question: http://tinyurl.com/39h2ran . Any help would be greatly appreciated!!!!

Thanks!

This is a result of an IE7 bug which gives a z-index:0; to all positioned elements, thus establishing a new z-index context and making it appear on top of any previous z-indexed element with the same precedence.

I have found a solution to this for the case where the positioning is only for purposes of giving context to normally hidden sub-elements: take the position: relative; out of the normal style rule and put it in the :hover rule. It is only needed in that case, and doesn't interfere with other elements' positions or indexes.

gjh42:

This is a result of an IE7 bug which gives a z-index:0; to all positioned elements, thus establishing a new z-index context and making it appear on top of any previous z-indexed element with the same precedence.

I have found a solution to this for the case where the positioning is only for purposes of giving context to normally hidden sub-elements: take the position: relative; out of the normal style rule and put it in the :hover rule. It is only needed in that case, and doesn't interfere with other elements' positions or indexes.

I changed this...

#navCatTabsDropdown li 
{
	float:left;
	position:relative;
}

#navCatTabsDropdown * li:hover ul 
{
	visibility:visible;
	background-color: #ffffff;
	border: 2px outset;
	white-space:nowrap;
}

To this...

#navCatTabsDropdown li 
{
	float:left;
}

#navCatTabsDropdown * li:hover ul 
{
	visibility:visible;
	background-color: #ffffff;
	border: 2px outset;
	white-space:nowrap;
	position:relative;
}

But it did not fix the issue. It actually caused more damage in IE7, and also broke the nav bar's layout in Firefox when you hover over a link in the NavCatTabs. Any other ideas?

Afraid not. All of the fixes I found for the bug online involved javascript, or manually adjusting things that are dynamically created in ZC (so not an option).

Hi Andrew
Can i use the latest version of your drop down mod on my Zen site v1.3.8a/v1.3.8.
or should i go for the older version of the mod?
Thank you
Cookie

Thank you Andrew, for this great module. It works for me in Safari 3& 4, in firefox on mac and pc. in google chrome, on IE on pc and Mac..
i'm in heaven.
i changed the style into the style of the shop and it works great!! i'm thrilled!
:hug:

Glen touched on this in post 26 but I see that the latest files still have a <br /> coded outside the <li> echo calls on lines 70 and 84. The more categories and sub-categories one has, the longer the browser takes to figure out what it's supposed to do.

I'd suggest removing the two <br /> calls and add a line-height call like> #navCatTabsDropdown li

{
float:left;
line-height: 1.5em;
position:relative;
}The 1.5em can be adjusted to meet the user's taste.

Just my 3.29 cents worth - ain't inflation a :censored: