CSS Dropdown menu for the header- With Categories!

[Moebiusenterprises]

Don't try to code them with all of that php, by hardcoding I meant like this:

<li><a href="index.php?main_page=page_2">Page 2</a></li>
<li><a href="index.php?main_page=page_3">Page 3</a></li>
<li><a href="index.php?main_page=page_4">Page 4</a></li>

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???

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

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

[jettrue]

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.

Well, that noLine isn't showing up online. I noticed a small issue with your code above, but the noLine should still be showing up. Anyhoo, try replacing the whole section for the shopping cart:

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul class="level2">
<li><a 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>
<?php } ?>