Page 1 of 2 12 LastLast
Results 1 to 10 of 2344

Hybrid View

  1. #1
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,710
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Moebiusenterprises View Post
    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>

  2. #2
    Join Date
    May 2005
    Location
    Phoenix Arizona (whew!)
    Posts
    188
    Plugin Contributions
    0

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by jettrue View Post
    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:

    PHP Code:
          <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.
    [FONT=Comic Sans MS]Vicki[/FONT]
    www.moebiusenterprises.com
    Fragrance*jewelry*metaphysical supplies*art*LIFE ... 'bout sums it up....

  3. #3
    Join Date
    Jul 2007
    Posts
    19
    Plugin Contributions
    0

    help question Re: CSS Dropdown menu for your header- With Categories!

    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!


  4. #4
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,710
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by pongky View Post
    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;}

  5. #5
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    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

  6. #6
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,710
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post
    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.

  7. #7
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by jettrue View Post
    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

  8. #8
    Join Date
    Jul 2007
    Posts
    19
    Plugin Contributions
    0

    Default Re: CSS Dropdown menu for your header- With Categories!

    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?

  9. #9
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,710
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by pongky View Post
    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}

  10. #10
    Join Date
    Jul 2007
    Posts
    19
    Plugin Contributions
    0

    Default Re: CSS Dropdown menu for your header- With Categories!

    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.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Categories dropdown menu/css
    By KenshiroU in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 5 Apr 2013, 01:04 PM
  2. HIde categories mod with css dropdown menu
    By adowty in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 9 Feb 2012, 01:05 AM
  3. How to use ezpages/categories as dropdown menu in the header?
    By mdivk in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 21 Dec 2011, 06:32 PM
  4. whats wrong with this css for my dropdown menu?
    By 1kell in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 28 May 2010, 02:47 AM
  5. Header Dropdown Menu (CSS) Without the Dropdown???
    By hcd888 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 27 May 2009, 01:20 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg