Zen Cart Logo
Forums / All Other Contributions/Addons / CSS Dropdown menu for the header- With Categories!

CSS Dropdown menu for the header- With Categories!

Views: 615,629

Results 1,121 to 1,140 of 2,344
26 Jul 2008, 5:32 PM
#1121
oceanturqiri avatar

oceanturqiri

New Zenner

Join Date:
Jul 2008
Posts:
10
Plugin Contributions:
0

CSS Dropdown menu for the header- With Categories!

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

27 Jul 2008, 2:16 AM
#1122
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

oceanturqiri:

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

27 Jul 2008, 4:37 AM
#1123
raz avatar

raz

New Zenner

Join Date:
May 2008
Posts:
7
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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!):oops:

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

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

27 Jul 2008, 10:05 PM
#1124
mcgregork avatar

mcgregork

New Zenner

Join Date:
Jul 2008
Posts:
25
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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

28 Jul 2008, 5:04 AM
#1125
signagen avatar

signagen

New Zenner

Join Date:
Jun 2006
Posts:
18
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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.

28 Jul 2008, 11:01 PM
#1126
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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
You'd do that with images.

28 Jul 2008, 11:02 PM
#1127
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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.

I'm not sure what you mean, sorry!

28 Jul 2008, 11:11 PM
#1128
signagen avatar

signagen

New Zenner

Join Date:
Jun 2006
Posts:
18
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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.

5 Aug 2008, 7:52 PM
#1129
webbuilder avatar

webbuilder

New Zenner

Join Date:
Aug 2008
Location:
NC
Posts:
1
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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

I'm currently building a site - you can view here
http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=3&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 :-)

6 Aug 2008, 6:23 PM
#1130
nils avatar

nils

New Zenner

Join Date:
Jul 2008
Location:
Salt Lake City, UT
Posts:
8
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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.:bigups: 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.

8 Aug 2008, 2:45 PM
#1131
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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.:bigups: 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.
Do you realize that you have two IE6.css stylesheets uploaded online? Remove the extra one.

If that still doesn't help, does this happen on my test site, https://www.zencart137.jadetrue.com? if not compare my original css with yours and make changes till it is fixed. :-)

8 Aug 2008, 6:07 PM
#1132
nils avatar

nils

New Zenner

Join Date:
Jul 2008
Location:
Salt Lake City, UT
Posts:
8
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

nils:

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!

I figured out what was going on. I had set the width of the UL LI to be auto and this made it so that regardless of the length of text, the box would fit to the text with just some padding/margin around it. It worked great in Firefox and IE7 but caused IE6 to place each top level list item (LI) on it's own line. Very ugly. I'm fairly handy with CSS but wasn't able to figure out how to make it stretch like I wanted in both IE6 and Firefox. When it worked in IE6, it didn't work in Firefox and vice versa. I resolved to just make my link text fit within a predefined width for all browsers and that seemed to do the trick. Not the resolution I had hoped for but not a bad workaround in my case.
-nils

8 Aug 2008, 6:10 PM
#1133
nils avatar

nils

New Zenner

Join Date:
Jul 2008
Location:
Salt Lake City, UT
Posts:
8
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

Do you realize that you have two IE6.css stylesheets uploaded online? Remove the extra one.

If that still doesn't help, does this happen on my test site, https://www.zencart137.jadetrue.com? if not compare my original css with yours and make changes till it is fixed. :-)

Oops - I didn't see your reply until after my last post. We were on the same track, though, because I did just what you suggested and it's taken care of. Thanks for taking the time to look into this! Have an awesome weekend!
-nils

11 Aug 2008, 1:39 PM
#1134
captainhair avatar

captainhair

New Zenner

Join Date:
Aug 2008
Posts:
5
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

i am having trouble with the drop down menu of my site. it works completely fine in firefox but in IE the shopping cart pull down is displaying directly below the home tab.

www.brand-nizzle.com/james

can someone tell me how to fix this problem.

cheers in advance

11 Aug 2008, 7:16 PM
#1135
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

captainhair:

i am having trouble with the drop down menu of my site. it works completely fine in firefox but in IE the shopping cart pull down is displaying directly below the home tab.

www.brand-nizzle.com/james

can someone tell me how to fix this problem.

cheers in advance

Try reuploading includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

11 Aug 2008, 9:48 PM
#1136
captainhair avatar

captainhair

New Zenner

Join Date:
Aug 2008
Posts:
5
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

Try reuploading includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

Thanks for your reply. it was only when i reupped the original again that it worked.
it stops working as soon as you add ```
border-left:0px;


div#dropMenu {
width:70em;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}


how can i make the lines at the side dissapper without it going all funny?

Thanks
11 Aug 2008, 10:39 PM
#1137
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

captainhair:

Thanks for your reply. it was only when i reupped the original again that it worked.
it stops working as soon as you add ```
border-left:0px;

> 
> ```
div#dropMenu {
	width:70em;
	margin:0 auto;
      text-align:center;
	z-index:1000;
	position:relative;
	}
``` in the sylesheet_header.css
> 
> how can i make the lines at the side dissapper without it going all funny?
> 
> Thanks
Are you talking about the white lines between each menu item?

Don't add border-left:0px, simple remove the border from where it is defined:
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
12 Aug 2008, 12:25 AM
#1138
captainhair avatar

captainhair

New Zenner

Join Date:
Aug 2008
Posts:
5
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

Are you talking about the white lines between each menu item?

Don't add border-left:0px, simple remove the border from where it is defined:
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}

Got it all fixed.
Big thanks for your time......Much appreciated:smile:

17 Aug 2008, 3:25 PM
#1139
gcweb avatar

gcweb

New Zenner

Join Date:
Aug 2008
Location:
St. Augustine, FL
Posts:
6
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hello

I am a newbie to the customization of ZenCart.
I just installed CSS Horizontal Drop Down Menu. This is a great addition to Zen Cart. The installation went fine once I figured where everything went. I even surprised myself. :shocking:

The only problem I am having at this time is that it does not work with the older IE 6.02900. The menu is working on all browsers except there is no drop down function in the older IE. Is there a work around for this? Am I Missing something? I did read something about the .htaccess but I think that was only for the proper direction of the links.
Any help would be greatly appreciated.

Thank You

G

18 Aug 2008, 8:43 AM
#1140
bsteinagel avatar

bsteinagel

Zen Follower

Join Date:
Sep 2007
Location:
Neenah, WI
Posts:
112
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

How do I go about replacing the "Contact Us" link in menu with a link to a FAQ page that I created using the define pages editor? Here's a link to my site. I'd like it to say FAQ where it says HEADER_TITLE_FAQS in the menu.

Brad Steinagel Photography

I edited the tpl_drop_menu.php file so it says the following:

<li><a href="<?php echo zen_href_link(FILENAME_FAQS, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_FAQS; ?></a></li

I'm thinking I have a php file misnamed somewhere?

Thanks,
Brad:censored: