CSS Dropdown menu for the header- With Categories!

[oceanturqiri]

Hello Obe1,

Thanks for the suggestion. I like it. My friend is in Costa Rica setting up another vocational center to help rescue women and kids; so, as soon as she gets back I'll see if she likes it.

The problem with that irritating space hasn't gone away, but I can make the best with what I've got. It's the unsolved mystery that bothers me.

Thanks again for your help.

Ocean

[jettrue]

Hello Shawn,

I should have mentioned that I did change the #headerWrapper... to 990099 to match the nav buttons. So it did work to eliminate the white space at the bottom of the buttons. I am so focused on that blasted space at the top of the image that I didn't give you credit for fixing the bottom bit. Anyway, I changed it to 000000, so that you can see the effect.

I also wanted to mention that I wasn't having this problem until I installed the dropdown menu, so it changed something.

Thank you for liking the new color scheme: ) I am putting this site together for a friend who is starting this ministry. She likes white, but I'll mention it to her.

Thanks again.

Ocean

Did you try adjusting the bottom padding here:

#navMain ul, #navSupp ul, #navCatTabs ul

[Raz]

Just want to say that this add-on is great!
Good Job Jettrue!
Also, thank you for all your support through the forum thread.
I also had a problem with ie6 but found the solution in your responses. (I hadn't uploaded the csshover file. Doh!)

I know this isn't the same as a donation, but when I can, I will!

Again, Great Job!!! And Thank You for all your time and effort. I, personally (just learning all this css html jargon) appreciate people like you.


Raz

[mcgregork]

Tnx Jattrue for good working dropdown menu
I have a question about the style /colors/

This is a part of your CSS code which I modified for my website http://alluregifts.co.uk

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#a83131; /*background color of top menu when NOT selected. */
z-index:1000;
}

Is it possible in CSS to add "shadow style" for my color as I did with my logo? And to make a round, smooth edges?
Or the only way is DHTML?

Thx again

[signagen]

Hi, Jade, very nice contribution.

I have a question. Do you know how to align level 2 menu in left? Also can you kindly let me know how to align level 1 blocks (I have 4 blocks) in right while keeping the menu text in each block align in center?

Your help will be greatly appreciated.

[jettrue]

Tnx Jattrue for good working dropdown menu
I have a question about the style /colors/

This is a part of your CSS code which I modified for my website http://alluregifts.co.uk

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#a83131; /*background color of top menu when NOT selected. */
z-index:1000;
}

Is it possible in CSS to add "shadow style" for my color as I did with my logo? And to make a round, smooth edges?
Or the only way is DHTML?

Thx again

You'd do that with images.

[jettrue]

Hi, Jade, very nice contribution.

I have a question. Do you know how to align level 2 menu in left? Also can you kindly let me know how to align level 1 blocks (I have 4 blocks) in right while keeping the menu text in each block align in center?

Your help will be greatly appreciated.

I'm not sure what you mean, sorry!

[signagen]

I mean how to align the drop-down submenu text (level 2) to left while keep level 1 text in center. Your code aligns all of them in center. If I change level 2 text alinment to left, the level 1 menue text will also be in the left.

Also the drop-down menu (not text) only occupies 80% width of the header, how to align the menu (not text) to right.

Thank you.

[WebBuilder]

Jet or any other zen master......

I'm currently building a site - you can view here
http://www.alltoppedoff.com/zc/index...&products_id=9

What I would like to achieve is ... Where you see the top level nav (graphics w/roll over) I would like to keep the top level graphics as they are and have the subcats drop down on hover over.

I am having some difficulty with the drop down menu. When I add in the code to my tpl_header.php , the menu shows up fine - but everything below the menu disappears.
--------------------------------------------------------------------
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
---------------------------------------------------------------------------------
I have played around with removing the (<div class="clearBoth"></div>) as well as moving positioning and checking for missing or extra code. I have even uploaed the tpl_header.php that came with the zip file and I get the same result...the menu shows up, but everything below it disappears.

I am sure I am missing something simple and obvious. I have read through the read me text throughly and surfed the forums here til my eyes bled.

I am using zen cart version 1.3.8a and CSS flyout menu 1.5

Here is the code for my tpl_header.php as it is now
------------------------------------------------------------------------------------
<?php
/**
* Common Template - tpl_header.php
*
* this file can be copied to /templates/your_template_dir/pagename<br />
* example: to override the privacy page<br />
* make a directory /templates/my_template/privacy<br />
* copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
* to override the global settings and turn off the footer un-comment the following line:<br />
* <br />
* $flag_disable_header = true;<br />
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
*/
?>

<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
<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, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a 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 }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">


<div id="Layer2" style="position:relative; width:632px; height:38px; z-index:1; left: 300px; top: 56px;">
<table id="Table_01" width="632" height="38" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <img src="/images/topnav_01.gif" width="89" height="38" alt=""></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=index&cPath=1&zenid=25d55ff515cdcadf6dd9f73466584a77"
onmouseover="MM_swapImage('topnav_02','','/images/topnav_02-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_02" src="/images/topnav_02.gif" width="99" height="38" border="0" alt="Capes"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=2&products_id=4"
onmouseover="MM_swapImage('topnav_03','','/images/topnav_03-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_03" src="/images/topnav_03.gif" width="114" height="38" border="0" alt="Toppers"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=3&products_id=3"
onmouseover="MM_swapImage('topnav_04','','/images/topnav_04-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_04" src="/images/topnav_04.gif" width="98" height="38" border="0" alt="Scarves"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=4&products_id=5"
onmouseover="MM_swapImage('topnav_05','','/images/topnav_05-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_05" src="/images/topnav_05.gif" width="99" height="38" border="0" alt="Knits"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=index&cPath=5"
onmouseover="MM_swapImage('topnav_06','','/images/topnav_06-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_06" src="/images/topnav_06.gif" width="133" height="38" border="0" alt="Accessories"></a></td>
</tr>
</table>
</div>

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->





<!--eof-header logo and navigation display-->

<!--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-->
</div>
<?php } ?>

--------------------------------------------------------------------------------------------

I am really hoping someone will be able to point out my mistake and show me the light.

Thanks so much for your times folks :-)

[nils]

First of all, I'd like to thank JetTrue for this terrific addition to Zen Cart and for the huge amount of time taken to help all of the people (like myself) who are having issues. It's very generous of you to offer such support when much of the time the issue has nothing to do with your mod.
That may be the case for me today. I'm wondering if anybody could take a look at my site in IE6 and help me understand why each top level list item is taking up a whole row. I've played with spacing, display types, margins and padding but to no avail. Any help anyone can offer would certainly be greatly appreciated. It works great in IE7, Firefox, Safari, etc. but not in IE6.
Thanks so much!

-Nils

http://www.okmfg.net/store
Here's the modified CSS I'm using for the header.