SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down, Responsiveness and self-contained

    Hi there,

    Hopefully this isn't too much of a tall order since I have seen it done before.
    I'm looking for a solution to a drop-down issue which involves the drop-down menu itself overhanging on the page, creating a horizontal scrollbar and a few frustrations from users. I have come across a few neat drop-down menus (including entries for a Sitepoint competition from a few weeks back!) which are both responsive and css-only (ie. no javascript) but so far none which solve the problem of the drop-downs overhanging the page.

    Ideally I would like a solution which means that if the drop-down is too big to fit in the remaining viewing area, it will wrap around and "stick" to the right-hand side of the window and be pushed to the left. I guess one simple solution is to not have such a wide drop-down area....

    What are your thoughts on the best solutions for drop-downs?

    Cheers,

    Andrew

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It's easy enough to set the right-most drop menu to align right so that it doesn't hang out to the right. Sounds like that's the way to go here.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Any over hanging the window will create scrollbars. Anything except position fixed.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    for most modern browsers you can use the ~ ( general sibling selector) to set a point (via classes or adjacent selectors and switch the positioning of your drop down. so something like

    li ul { width:15em; position:absolute; left:100%;}
    li.midpoint ~li ul {left:auto; right:100%;}

    you then assign the .midpoint class to the LAST drop down that you want facing outwards.

    hope that helps


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
  •