Category Tab Simple Dropdown Menu

[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:

[SCR]<!--bof-header ezpage links-->
<div id="navEZPagesTop">
<a href="http://mywebsite.com/estore/index.php?main_page=page&amp;id=1&amp;zenid=ik4jbo1uvhigiruousa2fngj00">Reward Points</a>&nbsp;&nbsp;&nbsp;
[morelinks here, deleted for this post] &nbsp;&nbsp;&nbsp;
<a href="http://mywebsite.com/estore/index.php?main_page=page&amp;id=19&amp;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&amp;cPath=21&amp;zenid=ik4jbo1uvhigiruousa2fngj00">Nap pies</a><ul><li><a href="http://mywebsite.com/estore/index.php?main_page=index&amp;cPath=73_75_23&amp;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?

[hem]

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&amp;id=1&amp;zenid=ik4jbo1uvhigiruousa2fngj00">Reward Points</a>&nbsp;&nbsp;&nbsp;
  [morelinks here, deleted for this post] &nbsp;&nbsp;&nbsp;
  <a href="http://mywebsite.com/estore/index.php?main_page=page&amp;id=19&amp;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&amp;cPath=21&amp;zenid=ik4jbo1uvhigiruousa2fngj00">Nappies</a><ul><li><a href="http://mywebsite.com/estore/index.php?main_page=index&amp;cPath=73_75_23&amp;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.

[1kell]

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.

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



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

Thanks!

[hem]

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



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

Thanks!

Try setting a negative z-index for your slideshow.

[Danielle]

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!