Category Tab Simple Dropdown Menu

beep:

Yes, Safari is my visitors' third most popular browser... If anyone else reading this thread is Safari savvy, please help?! :(

Well, I download Safari, and the dropdowns work fine without any changes (see attached image).

1kell:

Take that back it is showing up now but the "dropdown" categories are not listing in a dropdown menu, they are in a box crammed in next to each other and flying off so far that you can't select an item to click on. Looks very messy, a bit of guidance on fixing it up? I can try with css but don't know how successful I will be ...

Strange, I don't see it on your site.

I managed to fix it with the "li li {float:none;} suggestion. Its looking good now aside from one MAJOR error.

I don't know what is happening with my cPath, ever since I installed the Cat Tabs menu up the top, and modified it using the Add On to turn it into a dropdown menu, the cPath is wrong when you navigate around.

If you have a look and start clicking back and forth between products & categories,, the cPath (in the address bar) doesn't completely refresh - it adds paths on.

I have had to turn breadcrumbs off as it is causing a similar problem, where the breadcrumbs end up like this:

Cat A - Cat D - Cat C - Product 1

Showing the history of clicks, rather than where you are.

This is a crappy error and has only come in since updating the Cat Tabs. Does anyone know what would be causing this? It creates navigation problems when trying to go back to subcategories. If you choose a sub cat with more subcats underneath and click on one, its impossible to go back to the first subcat even when choosing it from the dropdown.

site is located at mi ra cle baby . co . nz/estore. If I can fix that it would be perfect!

1kell:

I managed to fix it with the "li li {float:none;} suggestion. Its looking good now aside from one MAJOR error.

I don't know what is happening with my cPath, ever since I installed the Cat Tabs menu up the top, and modified it using the Add On to turn it into a dropdown menu, the cPath is wrong when you navigate around.

If you have a look and start clicking back and forth between products & categories,, the cPath (in the address bar) doesn't completely refresh - it adds paths on.

I have had to turn breadcrumbs off as it is causing a similar problem, where the breadcrumbs end up like this:

Cat A - Cat D - Cat C - Product 1

Showing the history of clicks, rather than where you are.

This is a crappy error and has only come in since updating the Cat Tabs. Does anyone know what would be causing this? It creates navigation problems when trying to go back to subcategories. If you choose a sub cat with more subcats underneath and click on one, its impossible to go back to the first subcat even when choosing it from the dropdown.

site is located at mi ra cle baby . co . nz/estore. If I can fix that it would be perfect!

That is correct behaviour- Breadcrumbs is designed to take the user back through the path that they navigated to get to the current page. This mod uses the same function as the Zencart breadcrumbs- that's is why it works the same way.

It you just want to put a straight category reference, replace the following lines (67/68 and 81/82):

$cPath_new=zen_get_path($subcategories_tab->fields['categories_id']);
$cPath_new=str_replace('=0_', '=', $cPath_new);

with

$cPath_new="cPath=".$subcategories_tab->fields['categories_id'];

No, its not how it used to be and is causing navigation errors, for example you select a subcategory under 'feeding' such as 'bottles', and then choose a brand under bottles. Whenever you choose 'bottles' from the menu after that, you can never get back to the bottles subcategory, it will divert straight to the brand under it that you initially chose, so you can never go back and choose to look at another brand/subsubcategory.

E.g Correct way:
(CAT)Feeding - (SUBCAT)bottles - (SUBSUBCAT)brand a, then the person wants to look at brand b so they go (CAT)Feeding - (SUBCAT)bottles - (SUBSUBCAT)brand b.

Only instead it starts going (CAT)Feeding - (SUBSUBCAT)bottles is brand a. You can't get back to bottles to choose another brand

I've just noticed in the page script the code seems jumbled up where it opens the EZPages nav bar, then before it closes that off, it opens the Cat Tabs bar, closes that, then closes the EZPages bar. That seems to be wrong, the EZPages should open and close (div tags), then the Cat Tabs should open and close, shouldn't it? This might be causing the error as described in my previous post. Any clue? Here is the script in brief:

<!--bof-header ezpage links-->
<div id="navEZPagesTop">
  <a href="http://mywebsite.com/estore/index.php?main_page=page&id=1&zenid=ik4jbo1uvhigiruousa2fngj00">Reward Points</a>   
  [morelinks here, deleted for this post]    
  <a href="http://mywebsite.com/estore/index.php?main_page=page&id=19&zenid=ik4jbo1uvhigiruousa2fngj00">Contact Us</a>
</div>
 

<!--bof-optional categories tabs navigation display-->

 
<style type="text/css">

#navCatTabsDropdown li 
{
	float:left;
	width:auto;
	background-color: e978be;
	position: relative;
	padding:0em 0em 0em 1em;
		}
		
#navCatTabsDropdown ul li a:link {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    font-weight:normal;
	color: #ffffff;
	text-decoration: none;
}		

#navCatTabsDropdown ul li a:visited, {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    font-weight:normal;
	color: #ffffff;
	text-decoration: none;
}		

#navCatTabsDropdown ul li a:hover {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    font-weight:normal;
	color: #ffffff;
	text-decoration: none;
	background: #e978be;
}		

#navCatTabsDropdown ul li a:active {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    font-weight:normal;
	color: #ffffff;
	text-decoration: none;
}		
	
#navCatTabsDropdown li li {float: none;}	

#navCatTabsDropdown * li ul
{
float:left;
	visibility:hidden;
	text-align:left;
	position:absolute;
	top:16px;
	left:-4em;	
	padding: 0em 0.5em 0em 0.3em;
	line-height:15pt;
	z-index: 100;
}

#navCatTabsDropdown * li:hover ul 
{
	visibility:visible;
	background-color: #c04edb;
	}

 <br class="clearBoth" />  
</style>

<div id="navCatTabsWrapper"><div id="navCatTabs"><div id="navCatTabsDropdown"><ul><li><a class="category-top" href="http://mywebsite.com/estore/index.php?main_page=index&cPath=21&zenid=ik4jbo1uvhigiruousa2fngj00">Nappies</a><ul><li><a href="http://mywebsite.com/estore/index.php?main_page=index&cPath=73_75_23&zenid=ik4jbo1uvhigiruousa2fngj00">One-Size Nappies</a></li><br />
[ETC ETC ETC All the links are here, deleted them for this post...]

</div></div></div><!--eof-optional categories tabs navigation display-->
 
<php echo zen_ez_pages_link(ndex.php?main_page=contact_us); ?>

<!--eof-header ezpage links-->

</div>

See the second to last line, and the last line, should be up closing the EZ Pages bar before the Cat Tabs starts, shouldn't it? Why is it doing this?

1kell:

I've just noticed in the page script the code seems jumbled up where it opens the EZPages nav bar, then before it closes that off, it opens the Cat Tabs bar, closes that, then closes the EZPages bar. That seems to be wrong, the EZPages should open and close (div tags), then the Cat Tabs should open and close, shouldn't it? This might be causing the error as described in my previous post. Any clue? Here is the script in brief:

<!--bof-header ezpage links--> <div id="navEZPagesTop"> <a href="http://mywebsite.com/estore/index.php?main_page=page&id=1&zenid=ik4jbo1uvhigiruousa2fngj00">Reward Points</a>    [morelinks here, deleted for this post]     <a href="http://mywebsite.com/estore/index.php?main_page=page&id=19&zenid=ik4jbo1uvhigiruousa2fngj00">Contact Us</a> </div> <!--bof-optional categories tabs navigation display--> <style type="text/css"> #navCatTabsDropdown li { float:left; width:auto; background-color: e978be; position: relative; padding:0em 0em 0em 1em; } #navCatTabsDropdown ul li a:link { font-family: arial, helvetica, sans-serif; font-size: 10pt; font-weight:normal; color: #ffffff; text-decoration: none; } #navCatTabsDropdown ul li a:visited, { font-family: arial, helvetica, sans-serif; font-size: 10pt; font-weight:normal; color: #ffffff; text-decoration: none; } #navCatTabsDropdown ul li a:hover { font-family: arial, helvetica, sans-serif; font-size: 10pt; font-weight:normal; color: #ffffff; text-decoration: none; background: #e978be; } #navCatTabsDropdown ul li a:active { font-family: arial, helvetica, sans-serif; font-size: 10pt; font-weight:normal; color: #ffffff; text-decoration: none; } #navCatTabsDropdown li li {float: none;} #navCatTabsDropdown * li ul { float:left; visibility:hidden; text-align:left; position:absolute; top:16px; left:-4em; padding: 0em 0.5em 0em 0.3em; line-height:15pt; z-index: 100; } #navCatTabsDropdown * li:hover ul { visibility:visible; background-color: #c04edb; } <br class="clearBoth" /> </style> <div id="navCatTabsWrapper"><div id="navCatTabs"><div id="navCatTabsDropdown"><ul><li><a class="category-top" href="http://mywebsite.com/estore/index.php?main_page=index&cPath=21&zenid=ik4jbo1uvhigiruousa2fngj00">Nappies</a><ul><li><a href="http://mywebsite.com/estore/index.php?main_page=index&cPath=73_75_23&zenid=ik4jbo1uvhigiruousa2fngj00">One-Size Nappies</a></li><br /> [ETC ETC ETC All the links are here, deleted them for this post...] </div></div></div><!--eof-optional categories tabs navigation display-->

<php echo zen_ez_pages_link(ndex.php?main_page=contact_us); ?>

<!--eof-header ezpage links--> </div> ``` > > > See the second to last line, and the last line, should be up closing the EZ Pages bar before the Cat Tabs starts, shouldn't it? Why is it doing this?

I'm not sure- Have you changed (or use any mod) that changes tpl_main_page.php?

hem:

I'm not sure- Have you changed (or use any mod) that changes tpl_main_page.php?

Sorry, that should be tpl_header.php. Here's the relevant section from the default version:

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->

As you can see the category tab navigation is called and closed before the ezpages header.

I went in and tidied that up so the ez pages nav is called and closed, then the nav_cat_tabs is called and closed, so it seems like clean code in that respect now. Hasn't changed the initial navigation error though. :wacko:

I'm having what I think is a z-index issue with the drop down not hovering over a slide show and image on my home page. I have played around with the z-index on the images as well as the menu, but can't seem to resolve the issue.

The problem is only occurring in IE8, which I have researched and it seems to be a common problem with the z-index.

Very, very, frustrating. Anyone run into this issue at all??

:frusty:

My website address is: http://www.tregreekboutique.com/zencart

Thanks!

techiegirl:

I'm having what I think is a z-index issue with the drop down not hovering over a slide show and image on my home page. I have played around with the z-index on the images as well as the menu, but can't seem to resolve the issue.

The problem is only occurring in IE8, which I have researched and it seems to be a common problem with the z-index.

Very, very, frustrating. Anyone run into this issue at all??

:frusty:

My website address is: http://www.tregreekboutique.com/zencart

Thanks!

Try setting a negative z-index for your slideshow.

I have the categories and EZPages combined into one row on a site I'm working on, and it looked perfect. Now I've implemented this dropdown menu, and the spacing is not quite right. You can see here:

http://www.geetuj.com/index.php

There is a big space between the "Bags" category and the "Press" EZPage. Does anyone know how I can remove that? I've been playing with the CSS for over an hour and I just can't get it! I just want all the links spaced evenly and centered in the row.

Thanks!

Add to your stylesheet```
#navEZPagesTop a {margin: 0 0.7em;}

For finer control, find the #navEZPagesTop section of your stylesheet, and add below it```
#navEZPagesTop {
border-top: 1px solid #a46daf;
border-bottom: 1px solid #a46daf;
background-color: #ffffff;
height:40px;
line-height:40px;
text-align:center;
font-size:12px;
font-weight:bold;
}

#navEZPagesTopWrapper {
color: #017c9f;
height:40px;
line-height:40px;
}

#navEZPagesTop ul {
margin: 0;
padding: 0em 0em;
list-style-type: none;
text-align: center;
}

#navEZPagesTop>a {margin: 0 1.1em 0 0;}

#navEZPagesTopDropdown>ul {margin: 0 0 0 3.0em;}

Thank you, that did work, but if I add another category it gets all messed up again. Is there any way to make it so it will be aligned regardless of how many categories there are?

I was having problems with IE7 also, but found adding this to the css in tpl_modules_categories_tabs seemed to do the trick

#navCatTabsDropdown a 
{
	display:block;

}

I also had an issue with the menu appearing behind page elements, again only in IE7. I added "z-index:200" and "position:relative" to #navCatTabsDropdown ul, and "z-index:300" and "position:relative" to the parent element, (in my case #mainWrapper). Seems to have worked, looks good in all the browsers I have tested now. Hope that helps anyone else having IE7 problems.

I recently installed this.

I'm just wondering if there might be any ideas for adjusting the drop down itself.

I've commented out categories so I am just displaying subcategories in drop-down style.

But when I hover over the two categories with subcategories, they are staggered (not directly below one another) and the width of my site is increased to the right of the screen to accommodate the staggered listings.

Any ideas on how I can fix that?

Thank you!

IBIFA:

I recently installed this.

I'm just wondering if there might be any ideas for adjusting the drop down itself.

I've commented out categories so I am just displaying subcategories in drop-down style.

But when I hover over the two categories with subcategories, they are staggered (not directly below one another) and the width of my site is increased to the right of the screen to accommodate the staggered listings.

Any ideas on how I can fix that?

Thank you!

Okay- give me an address and I'll take a look

garden of francis - dot com

I was able to do some playing with the background color and adjusted the nowrap, but I'm at a loss what else to play with :)

Any insight would be great! (even it it's "well it just won't work for your site", if that's what the truth is) ;)

IBIFA:

garden of francis - dot com

I was able to do some playing with the background color and adjusted the nowrap, but I'm at a loss what else to play with :)

Any insight would be great! (even it it's "well it just won't work for your site", if that's what the truth is) ;)

I have a little time freeing up later today- I will have a look at it then.