Printable View
Available for download:
http://www.zen-cart.com/index.php?ma...oducts_id=1448
This mod adds a very simple CSS dropdown menu to the Category Tab. It is a single level only so it will display subcategories or products depending on what the category contains.
Hi Andrew
Is it possible to keep the categories centre justified?
thanks
Derek
The whole bar or just each heading?Quote:
Originally Posted by Derek Bryant
Andrew - thanks for your eeply
My category names are centre justified - the mod puts them left justified on top of the categories bar.
cheers
Derek
Is this in the menu pane? The headings are not justified (they "fit" exactly in the space allotted to them so no room to centre).Quote:
Originally Posted by Derek Bryant
Hi Andrew
I may not be following the instructions correctly
I am using the classic template, where does the tpl_modules_categories_tabs.php file or the whole custom folder have to be copied?
thanks
Derek
If you are using the classic folder then just copy the files from the custom\ folders into the classic\ folders.Quote:
Originally Posted by Derek Bryant
Hi Andrew
this is the effect www.derekbryant.co.uk/zen the categories were centre justified
Derek
The dropdown menu is to the top left, under the ZenCart logo. When you move the mouse onto them they display a menu pane.Quote:
Originally Posted by Derek Bryant
This is the section I would like centred if possible not left justified
thanks
Derek
Do you want the dropdown pane centered below the category name it belongs to?
The styling for this mod is embedded in the PHP file, so find the file involved and add
left: -40%;
to this:Adjust to taste when you have more variety of boxes to test it on.Code:#navCatTabsDropdown * li ul
{
visibility:hidden;
position:absolute;
left: -40%;
padding: 0.5em;
z-index: 100;
}
thanks gjh42
tried that but doesn't seem to make any difference
Derek
It worked when I tested it on your site. Exactly how did you try it?
I modified the file:
tpl_modules_categories_tabs.php
in the folder
zen/includes/templates/classic/custom/templates/
cheers
Derek
/includes/templates/classic/custom/templates/
This is not a folder path that should exist. It should be either
/includes/templates/classic/templates/
or
/includes/templates/custom/templates/
depending on which template you are using.
Hi Glenn
I am using the classic template for this trial site.
I have changed to zen/includes/templates/classic/templates/
for file:
tpl_modules_categories_tabs.php
and deleted the custom folder
with still no effect
thanks for your help
Derek
You now have the box with prod1 and prod2 centered under cat1. If this is not what you want, you will have to explain your desires better.
Hi Glenn
Sorry - I am looking for cat1 cat2 cat3 categories to be centred on the page with their drop down menus- as is normal for the classic template
thanks
Derek
Add a width attribute to the style for #navCatTabsDropdown li:
PHP Code:#navCatTabsDropdown li
{
float:left;
position:relative;
width: 33%;
}
Thanks Andrew
nearly there!
please look at www.derekbryant.co.uk/zen
is there a way to sort out the drop down menu width and placement?
thanks for your help
Derek
Add a width to this if desired.Code:#navCatTabsDropdown * li ul
{
visibility:hidden;
position:absolute;
left: 35%;
padding: 0.5em;
z-index: 100;
}
many thanks Andrew & Glen
I've added a width statement - www.derekbryant.co.uk/zen
I actually want to use this on one of my active sites, this is just a trial site for downloads
many thanks once again for your time
Derek
Hello, This mod is great.
However, I have one small problem... my subcategories are not listing properly. Some of them appear next to the the previous or are randomly aligned right rather than underneath it. It's most likely something fixed with the CSS but I've tried a bunch of stuff and nothing works so far.
To see exactly what I mean visit www. queenib. com, the most obvious example is beneath the womenswear tab or the lingerie tab as viewed in IE, Firefox and Safari.
I'm baffled. :huh:
It looks like you could be using an old version. Try the version posted here: http://www.omnicia.com/Zencart%20Cat...own%20Menu.zipQuote:
Originally Posted by beep
Did you add the <br /> tags between list items? The stylesheet has all <li> in #navCatTabsDropdown floated left, which negates the usual list-item behavior. You can change that for submenus of the main drop menu with this:It seems to be clumsy handling of the setup - perhaps the new version fixes that.Code:#navCatTabsDropdown li li {float: none;}
Thanks guys! I haven't installed the new version yet but that CSS fixed it right up.
While I'm here I have another question which I haven't been able to find an answer for yet... Do you know how to show the dropdown for only subcategories and disable the dropdown for products?
For example under the 'powder room' category.
Comment out or delete the following:Quote:
Originally Posted by beep
PHP Code:$products_tab_query="SELECT p.`products_id`, pd.`products_name`, pd.`language_id` FROM ".TABLE_PRODUCTS." p, ".TABLE_PRODUCTS_DESCRIPTION." pd WHERE p.`master_categories_id`='".(int)$categories_tab->fields['categories_id']."' AND p.`products_id`=pd.`products_id` AND pd.`language_id`='".(int)$_SESSION['languages_id']."' ORDER BY p.`products_sort_order`;";
$products_tab=$db->Execute($products_tab_query);
if($products_tab->RecordCount()>0)
{
echo '<ul>';
while (!$products_tab->EOF)
{
$cPath_new=zen_get_path($categories->fields['categories_id']);
$cPath_new=str_replace('=0_', '=', $cPath_new);
echo '<li>'.'<a href="'.zen_href_link(zen_get_info_page($products_tab->fields['products_id']),$cPath_new. '&products_id=' . $products_tab->fields['products_id']) . '">'.$products_tab->fields['products_name'].'</a></li><br />';
$products_tab->MoveNext();
}
echo '</ul>';
}
Having issue with drop down in IE7. When you mouseover a category the drop down appears to the right of the selected category and subcategories cannot be chosen.
Wasn't sure if this was a problem for anyone else. Works fine in IE8.
Need to find out what needs to be changed to correct the issue.
Thanks!
hmmm- I need to find a copy of IE7Quote:
Originally Posted by techiegirl
I have just notice that now when viewed in safari all the page content of pushed off the page to the right. It didn't do this before and looks fab in EI and Firefox. I have tried altering the css position but it just makes the menu overlap.
The menu itself looks fine but any ideas how I put the page content back where it is supposed to be?
... and apparently when I align the #navCatTabsDropdown li right all the contents go back to normal but then the categories are listed backwards.
This worked a charm, thanks hem. :wink:Quote:
Originally Posted by hem
Now I just have this alignment weirdness to sort out.
Hello, thought i should give a visual. This is what is looks like in Safari when I try to align the drop-down categories menu left and all the content is pushed off screen...
Has anyone got any ideas how I can fix this safari problem? I can't figure out why it only happens in safari.
It's been like this for a couple of weeks and look a big mess to any of the safari visitors :(
Do you have any safari visitors? Whenever I check the browser section of my webstats I never see any.Quote:
Originally Posted by beep
As for the resolving the issue- I'm afraid I'm not a Mac or Safari user so I'm not sure how I'm going to debug this.
Yes, Safari is my visitors' third most popular browser... If anyone else reading this thread is Safari savvy, please help?! :(
I *appear* to have fixed the problem, however have not yet been able to test it in different versions of Safari, so please let me know if it looks ropey in your browser.
A friend also told me that using Safari she wasn't able to use the category drop-downs, has anyone else experienced this problem?
For future reference the CSS fix was:
all added to navCatTabsWrapperCode:clear:both; margin-bottom: 20px; text-align: left;
(which was almost identical to something i tried before but for some reason this one worked and the other didn't.)
any idea why this wouldn't be working for me at all? I can get the CatTabs showing but theres no dropdown. I am using version 1.3.8a, turning the cat tabs on for now and the site is miracle baby . co . nz. Thanks - hope it will go on my site as this is just what i need.
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 ...
Well, I download Safari, and the dropdowns work fine without any changes (see attached image).Quote:
Originally Posted by beep
Strange, I don't see it on your site.Quote:
Originally Posted by 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.Quote:
Originally Posted by 1kell
It you just want to put a straight category reference, replace the following lines (67/68 and 81/82):
withPHP Code:$cPath_new=zen_get_path($subcategories_tab->fields['categories_id']);
$cPath_new=str_replace('=0_', '=', $cPath_new);
PHP Code:$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:
[SCR]<!--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">Nap pies</a><ul><li><a href="http://mywebsite.com/estore/index.php?main_page=index&cPath=73_75_23&zenid=ik4jbo1uvhigiruousa2fngj0 0">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>
[/SCR]
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?Quote:
Originally Posted by 1kell
Sorry, that should be tpl_header.php. Here's the relevant section from the default version:Quote:
Originally Posted by hem
As you can see the category tab navigation is called and closed before the ezpages header.PHP Code:<!--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-->
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!
Try setting a negative z-index for your slideshow.Quote:
Originally Posted by techiegirl
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 stylesheetCode:#navEZPagesTop a {margin: 0 0.7em;}
For finer control, find the #navEZPagesTop section of your stylesheet, and add below itCode:#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
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.Code:#navCatTabsDropdown a
{
display:block;
}
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 lookQuote:
Originally Posted by 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.Quote:
Originally Posted by IBIFA
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.
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:
Quote:
<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>
Actually it is working now, but how can I center it vertically in the blue bar?Quote:
Originally Posted by Danielle
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?
I use CEON URI Mapping. I turned it off, and the problem persists.Quote:
Originally Posted by gjh42
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.
Quote:
Originally Posted by gjh42
I changed this...
To this...Code:#navCatTabsDropdown li
{
float:left;
position:relative;
}
#navCatTabsDropdown * li:hover ul
{
visibility:visible;
background-color: #ffffff;
border: 2px outset;
white-space:nowrap;
}
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?Code:#navCatTabsDropdown li
{
float:left;
}
#navCatTabsDropdown * li:hover ul
{
visibility:visible;
background-color: #ffffff;
border: 2px outset;
white-space:nowrap;
position:relative;
}
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 likeThe 1.5em can be adjusted to meet the user's taste.Quote:
#navCatTabsDropdown li
{
float:left;
line-height: 1.5em;
position:relative;
}
Just my 3.29 cents worth - ain't inflation a :censored:
This module is just perfect.
I amusing this to select the category. Once selected, it takes the user to the category page. Here I am using CSS Horizontal drop menu.
I want that on the category pages, the dropdown menu shows the sub categories for the specific category page only. (it should not show the categories listing, but begin with sub categories on level 1)
Just check my site http://204.93.193.150/~bhavikac/
Just a note that there is a newer version of this mod at http://www.zen-cart.com/index.php?ma...oducts_id=1448 and a new support thread at http://tinyurl.com/3sxo4bd
Is there a way to get the sub menu items to open as well? How do I change the Hover background color? thanks.
MagicMan,
You need to go to the new support thread in my last post. Read through it and see if you still need assistance.
I downloaded ver. 1.5.1 to my test site before modifying my website. It seems to work well. I usually only get a chance to work on the website during the winter so forgive my question as I just don't remember where to look. Where is the font size for the category tabs?
The installation went OK, but after reviewing the functionality I decided to uninstall it. Since the installation only involved adding two fiels to my custome directory I deleted them. The functionality is gone but the menu no longer displays horizontally and displays images on the left side of the categories bar.
How can I get the categories back in the original out of box horozontal configuration?