SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS menu how to

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS menu how to

    Hello!

    I am trying to build a menu but I am new to CSS and am not getting the expected results, basically I am trying to hide the sub menus and display them on hover, it does work however the parent item is taking too much space and have not been able to figure out how to, you can see what I'm talking about here http://ury-yolotl.com/test/menu.html

    The main menu items at first, when the sub menu is hidden use only the necessary width to cover the word however when hovering over it the child ul is displayed horizontally taking up much more space and forcing the parent item to use up too much space, I am trying to put the main items horizontally and the child uls vertically and also that when I hover over the items the width of the main item is not affected.

    Any help is appreciated

    Edit:

    Okay, I have managed to put the uls in a vertical position however I am still having the problem with the width although is not as bad as it was, if someone has an idea on how I can make the parent li not expand with the child ul will be much appreciated.
    Last edited by tlacaelelrl; Feb 3, 2012 at 14:34. Reason: changes
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can increase the padding on the main navigation <a> tags and then give the child <ul> a fixed width which makes the <ul> thinner than the parent <a> and <li>, that will stop the jumping.

    You dont need that Javascript that gives all the classes, just use CSS like:

    Code:
    #menu li { /* This will style all li's within the menu */ }
    #menu ul li { /* This is a child li and will take priority over the above */ }
    #menu li li a { /* This is a child anchor */ }

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,265
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    The problem is when you display the item, you're adding a border, which is causing the shift to take place as when the item is displayed, the extra space taken by the border needs to be accounted for..a quick and easy fix would be to set a width on the ul li.

    Oh, and BTW - your menu isn't working at all in IE....I haven't looked at it close enough to see why, but it doesn't do anything in IE.....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NuttySkunk View Post
    You can increase the padding on the main navigation <a> tags and then give the child <ul> a fixed width which makes the <ul> thinner than the parent <a> and <li>, that will stop the jumping.

    You dont need that Javascript that gives all the classes, just use CSS like:

    Code:
    #menu li { /* This will style all li's within the menu */ }
    #menu ul li { /* This is a child li and will take priority over the above */ }
    #menu li li a { /* This is a child anchor */ }

    I am using the JavaScript because I am planning to have sub menus on the sub menu items like

    Code:
    <ul>
    	<li>
    		<ul>
    			<li>
    				<ul>
    					<li>
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  5. #5
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    The problem is when you display the item, you're adding a border, which is causing the shift to take place as when the item is displayed, the extra space taken by the border needs to be accounted for..a quick and easy fix would be to set a width on the ul li.

    Oh, and BTW - your menu isn't working at all in IE....I haven't looked at it close enough to see why, but it doesn't do anything in IE.....
    My problem with a set width is that the menu items are not necessarily going to be that short and if I set a width then not all items will have enough space or way more space than needed, the problem with IE might be because I did not add the doctype to the file
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Here's a nice fluid drop down menu by @Paul O'Brien: http://www.pmob.co.uk/temp/dropdown-two-level-fluid.htm
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    There's also the technique I came up with for handling it:

    Relying on CSShover3.htc for legacy IE support:
    http://www.cutcodedown.com/codeExamp.../template.html

    With it's own script that also enhances keyboard support in all browsers:
    http://www.cutcodedown.com/codeExamp...ithScript.html

    As with all my examples the directory is wide open for easy access to the bits and pieces:
    http://www.cutcodedown.com/codeExamples/menuDemo/

    Also a thread on here discussing it.
    http://www.sitepoint.com/forums/show...ay-of-doing-it

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Here's a nice fluid drop down menu by @Paul O'Brien: http://www.pmob.co.uk/temp/dropdown-two-level-fluid.htm
    BTW, COMPLETELY broken here (Opera, large fonts/120dpi). The dropdowns don't touch the menu so when you try to move the mouse down to them, they disappear.

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    BTW, COMPLETELY broken here (Opera, large fonts/120dpi). The dropdowns don't touch the menu so when you try to move the mouse down to them, they disappear.
    Ah, I didn't know that. My bad. :/
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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