CSS Dropdown menu for the header- With Categories!

I don't quite get it.
by default, it looks like this:
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
what should i do? :huh:

boriz,
other than line 61
/*div#dropMenu li.submenu li.submenu {background:url(../images/submenu.gif) 95% 50% no-repeat;} */

there are no other images used in the css. make sure both lines have been commented out /*.

you can also remove the image from includes/templates/yourtemplate/images/

that will work too.

   John

Nope. Even if I remove that (and another comented out) lines. :(
here is the ss:
[IMG]http://www.pic-upload.de/thumb/28.10.07/m9qxb.jpg[/IMG]
i want to remove that triangle on the left(it's on every button in the menu and in submenus)

Link: http://www.pic-upload.de/28.10.07/m9qxb.jpg

boriZ:

Nope. Even if I remove that (and another comented out) lines. :(
here is the ss:
[IMG]http://www.pic-upload.de/thumb/28.10.07/m9qxb.jpg[/IMG]
i want to remove that triangle on the left(it's on every button in the menu and in submenus)

Link: http://www.pic-upload.de/28.10.07/m9qxb.jpg

That is also from style.css, and has nothing to do with the coding in stylesheet_header_menu.css.

Change this also:

li a { text-decoration:none; color:#BDBDBD; padding-left:11px; background:url(../images/pimp1.gif) no-repeat 0px 5px;}

to this

.columnLeft li a { text-decoration:none; color:#BDBDBD; padding-left:11px; background:url(../images/pimp1.gif) no-repeat 0px 5px;}

Thanks, jettrue!!!! :clap::clap::clap::clap::clap::clap::clap:

Sorry bout that. I dont understand why borizs is different than mine.
I dont want to change at all, just curious.

John

Good Morning Jade,

I think I'm hitting the wall with my drop down menu. One of my categories has so many subcategories (all distinct) that the drop down menu extends below the bottom of the screen. If you try to scroll up so the bottom will be visible, you can't get to the menu to activate it. I'm thinking the only answer is to use subcategory headers (with logos even) on a category page (the old fashioned way) and just use the drop down for main categories. Is there some way to deactivate subcategories for only one main category or do I have to lose all the subcategories since they are automatically generated in the program loop?

Minor question: What image module are you using on the AppleZen demo page to generate the rollover popup image?

Maury

bumba000:

Sorry bout that. I dont understand why borizs is different than mine.
I dont want to change at all, just curious.

John

He has a different template, and you guys are talking about two different things. He's talking about some dots that came with his template, that was indiscriminately adding a dot image to any li on the site.

mauryg:

Good Morning Jade,

I think I'm hitting the wall with my drop down menu. One of my categories has so many subcategories (all distinct) that the drop down menu extends below the bottom of the screen. If you try to scroll up so the bottom will be visible, you can't get to the menu to activate it. I'm thinking the only answer is to use subcategory headers (with logos even) on a category page (the old fashioned way) and just use the drop down for main categories. Is there some way to deactivate subcategories for only one main category or do I have to lose all the subcategories since they are automatically generated in the program loop?

Minor question: What image module are you using on the AppleZen demo page to generate the rollover popup image?

Maury
Right, you'd have to turn off all subcategories or none.

That is called ImageHandler2 (IH2).

does anyone know why I have a gray bar under my css menu in IE?

bumba000:

does anyone know why I have a gray bar under my css menu in IE?

Link? :smile:

thanks jettrue but i got rid of the menu for now.

im battling screen resolution now too. I noticed that at 800x600 (at least in IE)
most of the site looks pretty bad.
As i struggle and struggle with this I just hope that most of the world is at least 1024x768.

I have made a new header img only 790px wide but for some reason at 800x600 the end of the image still gets cut off and the site doesnt really layout properly.

I know this isnt the right place for this. . .

       John

okay, So i twisted my own arm. Settled for 1024x768 as a base size to please.

I put the css drop menu back in. still have the same gray bar under it tho. I dont see any link there and there shouldnt be one.

If you will have a look please. . . just use my signature.

thanks,
John

bumba000:

okay, So i twisted my own arm. Settled for 1024x768 as a base size to please.

I put the css drop menu back in. still have the same gray bar under it tho. I dont see any link there and there shouldnt be one.

If you will have a look please. . . just use my signature.

thanks,
John
I see no grey bar, however I can tell you that you need a <div class="clearBoth"></div> at the bottom of includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

bumba000:

thanks jettrue but i got rid of the menu for now.

im battling screen resolution now too. I noticed that at 800x600 (at least in IE)
most of the site looks pretty bad.
As i struggle and struggle with this I just hope that most of the world is at least 1024x768.

I have made a new header img only 790px wide but for some reason at 800x600 the end of the image still gets cut off and the site doesnt really layout properly.

I know this isnt the right place for this. . .

       John

You do know that your header image is still 1010 wide right? Perhaps you changed it back, but wanted to let you know.

jettrue,
the div tags you had me add to tpl_header.php would have helped a long time ago.

I got the gray trying to figure out why in IE everything was fine but it firefox my first columLeft sidebox top was under my new menu.

was all about the <div class="clearBoth"></div>.

thank you.
John

how do i change the name catagories to products?

the header image in use is not bg_header.jpg.
this is what i did. So that where the header img stops after 790 it doesnt look like it stopped. This was to try to fit in 800x600.
Kinda like the sliding door method.

#headerWrapper {position: relative; background-image: url(../images/bg_navmain_header-blue-white-expand.gif); /IE Hack/}

#headerBackground {width: 100%; height: 120px; background-color:#FFFFFF; background: url(../images/bg_header_790x119.jpg) no-repeat;}

Thanks Jade, that's what I thought the answers would be

Hi Guys,

I am having a weird problem. I have installed the drop-down menu and changed the menu options to fit my web site's objectives. However, the menu works fine except for a trailing empty cell that seems to ruin the look of the menu. Here is my URL:
http://www.eclat-consultants.co.uk/index.php?main_page=index

Just look at the trailing empty cell after My Account. Can you please help me?

Here is my code for tpl_drop_menu.php:

<?php // // +----------------------------------------------------------------------+ // |zen-cart Open Source E-commerce | // +----------------------------------------------------------------------+ // | Copyright (c) 2003 The zen-cart developers | // | | // | <http://www.zen-cart.com/index.php> | // | | // | Portions Copyright (c) 2003 osCommerce | // +----------------------------------------------------------------------+ // | This source file is subject to version 2.0 of the GPL license, | // | that is bundled with this package in the file LICENSE, and is | // | available through the world-wide-web at the following url: | // | <http://www.zen-cart.com/license/2_0.txt>. | // | If you did not receive a copy of the zen-cart license and are unable | // | to obtain it through the world-wide-web, please send a note to | // | [email protected] so we can mail you a copy immediately. | // +----------------------------------------------------------------------+ // $Id: tpl_drop_menu.php 2005/06/15 15:39:05 DrByte Exp $ // ?> <!-- menu area --> <div id="dropMenuWrapper"> <div id="dropMenuWrapperb"> <div id="dropMenuWrapperc"> <div id="dropMenuWrapperd"> <div id="dropMenu"> <ul class="level1"> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a> <!--<ul class="level2"> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li> </ul>--> </li> <li class="submenu"><a href="http://www.eclat-consultants.co.uk/index.php?main_page=page&id=18&chapter=0">About us</a></li> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a> <?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>
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
<ul class="level2">
<!--<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>-->
<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
<!--<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>-->
<?php if (defined('FILENAME_SITE_MAP')) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
<?php } ?>
<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
<!--<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>-->
<?php } ?>
<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
<!-- <li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li> -->
<?php } ?>
<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
<?php } ?>
</ul>
</li>
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
<ul class="level2">
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
<?php } ?>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php } else { ?>
<li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>
</ul>
</li>
</ul>
</div>
</div>
</div>

</div> </div><!-- end dropMenuWrapper--> <div class="clearBoth"></div>

hansi:

Hi Guys,

I am having a weird problem. I have installed the drop-down menu and changed the menu options to fit my web site's objectives. However, the menu works fine except for a trailing empty cell that seems to ruin the look of the menu. Here is my URL:
http://www.eclat-consultants.co.uk/index.php?main_page=index

Just look at the trailing empty cell after My Account. Can you please help me?

Here is my code for tpl_drop_menu.php:

It looks like you found the answer. YAY! I am cursing the day that I decided to originally design the menu with extra space leftover at the end... it wasn't an "empty cell", just extra space, so that the menu wouldn't break into two lines when font size was increased, but now that the newest version is designed in percentages and that problem is solved, perhaps I'll not have to answer this question every other day, LOL.