CSS Dropdown menu for the header- With Categories!

[jettrue]

For a learning experience I combined this mod with the Future Zen template by Kuroi. Currently developing this site off-line. Good results so far.

However centering the menu bar is not working out for me. By default the menu bar is left justified but that does not look good. I'd rather have it float in a horizontally centered position and maintain centered position with respect to shop logo on top of page. And look readable when browser type size is increased or decreased or when OS GUI screen resolution and/or type size is altered.. (currently when type size is reduced the menu becomes difficult to read and when font size increased menu wraps to a second line (prematurely) and submenu items wrap to a second line.

Is it possible to freeze the menu so it does not change size relatively (keep size absolute) without messing up the menu functionality?

I've read through most of this thread and did not find a solution that works.

I can post relevant CSS if needed. Thanks for any advice or pointers.

Woody

Hi Woody... centering it shouldn't be difficult, if #dropMenuWrapper has margin:0 auto and text-align:center, the menu will be centered.

If you follow my instructions for giving each item a percentage (just search this thread for percentage), then it can still resize and not wrap. But I can understand wanting to stop the resizing when you're not using it in a site that also resizes like apple zen when the font size changes. Was that a run on sentence, lol? But remember, people will still be able to change their font size no matter what. But to stop the resizing of the menu, change all em's to px's.

[Woodymon]

Hi Woody... centering it shouldn't be difficult, if #dropMenuWrapper has margin:0 auto and text-align:center, the menu will be centered.

Hi Jade,

Thanks for follow-up. Already tried those settings in both:
div#dropMenu
#dropMenuWrapper

And I commented out width settings in both above, but still no impact. The menu bar is pushed most of the way to the left (just a small space between left margin and the beginning of the menu).

I inspected with Firebug and discovered an area to the right of the menu still within control of both above selectors. It almost appears there is a "ghost" top level menu item in the last position on the menu.

This is true when visiting site as guest and cart is empty or when an item in cart (so 'checkout" sub menu appears below "Shopping cart" menu).

I copied the output from Firefox Web Developer > Information > Display Id & class details and pasted below.

.clearBoth
.flash
#dropMenuWrapper
#dropMenu
.level1

* .submenu Home .level2
o All Products
o Search

* .submenu Categories .level2
o Books
o eBooks
o CDs
o DVDs
o Documents

* .submenu Information .level2
o Shipping Info
o Privacy Policy
o Conditions of Use
o Site Map
o About Us

* Contact Us

* .submenu My Account .level2
o Log In
o Create Account

* .noLine Shopping Cart

.clearBoth

When item is in shopping cart the last menu item looks like this instead.

* .submenu Shopping Cart .level2
o Checkout

.clearBoth

I hope this makes sense.

Is this how it is suppose to be "out of the box"? I do not believe I have made any customizations to the menu which would make it behave differently from the default install.

Early in this thread I see you made some comments that there is "suppose to be" some blank space at the very end of the menu (to the right)? So this may be related to my issue. But I have not yet discovered the technique to repair, to rid of this space so the menu displays centered on the page.

I understand it is difficult for you to make suggestions without seeing the site. But at the moment I'm on dial-up so I have to do my testing work offline for a short time.

Thanks,
Woody

[Woodymon]

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

However at "nomal" browser type size, in both FF 2.006 and IE6, I was able to make the menu approximately center with the following CSS.

#dropMenuWrapper {
height:2.17em;
text-align:center;
font-size:1em;
padding-bottom: 1em;
}

div#dropMenu {
margin-left: 14%;
margin-right: 12%;
text-align: center;
z-index: 1000;
position: relative;
}

div#dropMenu ul.level1 {
text-align: center;
height: 2.17em;
z-index: 1000;
}

The 14% and 12% margins above are to compensate for "leftover space", as Jade terms it, to the right of the menu bar which I don't know how to rid of.

Is it possible to rid of that space or is it inherent in the design of the menu bar and impossible to remove?

And even with adjustments so the menu appears centered in Firefox at normal browser font size the menu still appears a little bit off center in IE6.

However once browser type size is changed, the menu bar is no longer centered in either browser. And I'm scared to see how well IE7 centers the menu.

Any ideas on how to center the menu in all browsers no matter which browser font size chosen?

It appears the good old days of <center> are gone

Woody

[CES]

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.)

Craig

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

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.

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

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