CSS Dropdown menu for the header- With Categories!

[jettrue]

As previously reported the settings offered by Jade did appear to not help.

Woody

Hi Woody,

Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have. Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

http://www.zen-cart.com/forum/showthread.php?p=390897

Sorry, I can't follow css without looking at its' visual expression, so I can't offer advice on your method. I'd reload the original stylesheet, and follow the instructions above.

[Woodymon]

Do you want to have a look at my shop and see if that is what you want? www.NicheLocks.com. If you want I can post my css to show what I did. (I can't remember if or what alterations I did make - lol.)

Hi Craig-

I like what you did with "dropmenu.gif". That is what I was looking for or something similar.

So is that a mod option or something custom?

For the site I'm working on I probably would want to create the gif to match background color so then the menu bar does not appear to go all the way across.

I just took a snapshot of your CSS but still not sure how you did it.

Yes it would be great if you could post any code and/or CSS changes used to customize your menu bar.

Thanks,

Woody.

[Woodymon]

Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have.

Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

http://www.zen-cart.com/forum/showthread.php?p=390897

Oops. I missed that one. Yes I like your way better than mine ;-)

I was previously understanding your "percentage" recommend was just to control the menu resizing and not anything to do with the centering. but now I think I understand.

I'll wait to see CES/Craig's updated code.

I like his idea of creating a gif file and adding to
#dropMenuWrapper

background:transparent url(../images/dropmenu.gif) repeat-x scroll 100%;

That fits in very well with how the Future Zen Template works.

Thanks again,
Woody

[Woodymon]

if you could post any code and/or CSS changes used to customize your menu bar..

I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

Woody

[jettrue]

I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

Woody

Hi Woody,

I think I'm still trying to visualize your issue. As I mentioned, I'm a very visual person, and I always have a hard time working with offline sites. If I see it, I can usually figure it out quickly.

If I understand correctly, you want a menu that is centered. :-) Now, do you want the drop down items to start all the way to the left, and end all the way to the right, so that there is no empty menu space? Or do you want it centered with space between the menu and the edges of the site?

I also understand that you want the menu to match the background color of your site. Is it a solid color? If so, instead of using a gif, you can just give dropMenuWrapper a background color that matches your sites color.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site. So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

[Woodymon]

Or do you want it centered with space between the menu and the edges of the site?

Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site.

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

[Moebiusenterprises]

Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.


It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).



Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

you might want to take a look at our menu. Ours runs 'side to side' (aka 100%) of the window, but you could easily change the percentage to suit, or use a transparent base wrapper and a color wrapper for the actual dropdowns. Perhaps the transparent base, with a color flip on mouseover/hover?

[jettrue]

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

I'm confused, why use a colored gif, if you can just set the background color?

background:#000000;

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

You can change em's to pixels. Change the padding from em's to pixels, etc. Get rid of em's you get rid of resizing with font changes.

Already did something similar but not getting the centering happening due to that space to the right of the menu.

Have you tried switching to percentages like my post? That gets rid of the extra space to the right of the menu.

[Woodymon]

Jade-

I uploaded original CSS (v. 1.2 dated Feb 23, 2007) and then made edits as you recommended in this thread on June 17, 2007 and presto. Just what I was looking for... mostly.

The menu centers well in both Firefox and IE6. But when I adjust type size in IE6 I get mixed results.

At small/smaller/larger/largest text sizes the menu stays on one line. Cool!

But in IE6 when set text size to medium, the menu wraps to two lines ("Shopping Cart" moved to under "Home"). Strange that this only happens at default medium type size in IE6? And only in IE6, does not wrap not in FF.

Any ideas? My current relevant CSS is below.

I still need to test IE7 when it goes online but that can wait.

Thanks for your assist.

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 2.17em; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 1em; /* ORIG */
	padding-bottom: 1em; /*NOT IN ORIG */
	}
	
div#dropMenu {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
        text-align:center; /* ORIG */
	z-index:1000; /* ORIG */
	position:relative; /* ORIG */
	}

div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width:16.667%; /* by jade */
	}

div#dropMenu ul.level1 {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
	background:#4F4F4F;  /* ORIG */
	text-align:center; /* ORIG */
	height:2.17em; /* ORIG */
	z-index:1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	/* padding: .6em 2em .6em 2em; */ /* ORIG */
	padding: .6em 0 .6em 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color:#ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right:1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 2.17em; 
	background:#4f4f4f;
	z-index:1000;
	left:0; /* by jade */
	}

/*
div#dropMenu li a.noLine {
	padding-right:2em;
	border:none;
	} */

[Woodymon]

I have learned to take things one step at a time, especially when I am learning something new ;-)

When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

Thanks for any recommends,
Woody