SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Long Spry CSS dropdown menu goes off screen

    Greetings,

    I developed a dropdown menu using Spry (Adobe Dreamweaver). It is a vertical menu with multiple sub-menus. Some lists are very long and the menu goes below and off the page.

    I found a great example of what I want my menu to do: Coins Paper Money | eBay

    On the side, it says "Browse By:" and there is a vertical menu. If I shrink the page up vertically a little and watch the sub-menus pop out, I notice they get pushed up if the parent is close to the bottom of the screen, which ensures that none of the options go off the page, they get pushed up.

    How can this be done?

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would need to use javascript to detect the bottom of the viewport and then check the available window height and if room then adjust the top position of the menu so that it fits within the window.

    That's a more of a javascript question that a CSS one and I can move the thread to the JS forum if you need further advice.

    There is and idea on Css Tricks that you might find interesting although it doesn't fully solve the problem it make sit less likely to happen with long menus.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response Paul. I found that CSS Trick on Google yesterday but that wasn't what I was looking for. I would be happy to have the thread moved over to the JS forum though.

    I have another related question too, not sure if this is a CSS or JS thing but take a look at this vertical menu on the left side of the homepage: eBay | Electronics, Cars, Clothing, Collectibles and More Online Shopping

    The parent "All Categories" pops out and there are 3 columns instead of the usual 1. How can this be done?

    Thanks
    Regards

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    That's usually called a mega menu and is just more of the same really . Sitepoint had an article on how to create a mega menu so do a quick search of their articles. Eric also has a demo here.

    Ill move this to the JS forum and hopefully someone will chip in with how to achieve what you need but you may need to give then something to work with first.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2007
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here is my Spry dropdown menu on my test page: www.dink.ws

    There is nothing here except the menu HTML, CSS file and JavaScript file. I tried looking through the JS file but it is a bit complicated and I'm not sure where to apply the viewport method that you described.

    I've created a long menu for Item 5 near the bottom of the page. The menu block that pops out should move up so that "Last Item" can be seen next to the bottom of the screen instead of the whole block thing moving out of sight below the screen. It should work like that ebay example.

    Anyone please take a look at this and let me know how this can be done.

    Thanks


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
  •