CSS Dropdown menu for the header- With Categories!

[jettrue]

I always seem to make life harder on myself, thanks.

Curiously, when I get that to work, the little white line on the right comes back (double checked, and the "noline" reference is intact in the file )...

ideas???

actually the class="noLine" is missing:

<li><a href="http://moebiusenterprises.com/shop/index.php?main_page=shopping_cart">Shopping Cart</a></li>

it should be:

<li><a class="noLine" href="http://moebiusenterprises.com/shop/index.php?main_page=shopping_cart">Shopping Cart</a></li>

[Moebiusenterprises]

actually the class="noLine" is missing:

<li><a href="http://moebiusenterprises.com/shop/index.php?main_page=shopping_cart">Shopping Cart</a></li>

it should be:

<li><a class="noLine" href="http://moebiusenterprises.com/shop/index.php?main_page=shopping_cart">Shopping Cart</a></li>

ok, my file ... includes/templates/mytemplate/common/tpl_drop_menu.php says exactly this:

      <li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <ul class="level2">
          <li><a class="noLine" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        </ul>
      </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>

Am I in the wrong file? I'm following the instructions you gave me earlier that worked... don't understand what changed.

[pongky]

Hi, I'm back with a little problem, btw, the mod has been working fantastically so far! The last bit I have to do now is to align the submenus to be right-aligned with the main menu items (as pictured). I'm not sure what to edit in the css to allow this to happen, any help is appreciated!

Thanks in advance!

[jettrue]

Hi, I'm back with a little problem, btw, the mod has been working fantastically so far! The last bit I have to do now is to align the submenus to be right-aligned with the main menu items (as pictured). I'm not sure what to edit in the css to allow this to happen, any help is appreciated!

Thanks in advance!

Could I see a link? I don't know how much you've adjusted stylesheet_header_menu.css, but adding a negative left here may help:

div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:-4em;}

Then to get the text right-aligned, adding text-align:right here may help:

div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; border-right:1px solid #ffffff;text-align:right;}

[Woodymon]

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

[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

[pongky]

Awesome, thank you - that does work, though it doesn't align it properly for each main element - as some of the text is shorter - but I think it should be fine. Last question, is it possible to have only the last item ("FEATURING") in the main links to be a different color (blue)? How can I setup the css to do that?

[jettrue]

Awesome, thank you - that does work, though it doesn't align it properly for each main element - as some of the text is shorter - but I think it should be fine. Last question, is it possible to have only the last item ("FEATURING") in the main links to be a different color (blue)? How can I setup the css to do that?

Sure. Just open up the common/tpl_drop_menu.php, and give that item a special id, something like this:

<a id="blueLink"........

then in the css somthing like this:

div#dropMenu li a#blueLink {color:#0d0fdf}

[pongky]

Actually Jettrue, it's not so simple as that. Those are all categories that I have in my fly-out navigation, so it is automatically generated, meaning that I can't simply add one nav link on the end. Wonder if there's a way to single out the last item in the nav, to give it a different css styling.