Long Spry CSS dropdown menu goes off screen

JavaScript
1

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

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

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

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

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