Scroll Menu Items Horizontally

cotton31 · 18 Dec 2013 at 15:22

I currently have an unordered list where the list items are displayed inline.

There could be so many list items in the list that they overflow the container div - these are hidden.

I need to implement a feature where if the user hovers over the right hand side of the div, the overflowing items scroll into view, and then the opposite for the left hand side.

Ideally in jQuery - I've tried using .animate but couldn't get this to work.

Any ideas?

caz32 · 18 Dec 2013 at 23:20

found the solution: http://stackoverflow.com/questions/9890719/scroll-overflow-text-into-view

cotton31 · 19 Dec 2013 at 17:23

Only just seen this. On first glance it looks good, I'll give it a try tomorrow!

cotton31 · 9 Jan 2014 at 17:19

OK, only just had chance to try this and I've kind of got something working but it doesn't really do what I want.

The SO thread linked was about moving a long string of text into view - I want to move navigation items into view.

I've set up a JSFiddle that almost does what I need - I have the li items moving to the left when hovered, but the ones that were originally hidden still don't move in to view...

This is also pretty rigid in terms of numbers, so could probably be improved by working out the exact number of pixels needed to scroll the rest into view.

Also, I don't really want it to be when the user hovers anywhere on the list else it will be difficult for them to click on the li's! My two ideas are to have a hotspot at either end of the list and attach the hover action to them, or delay the hover so that the user has to hover for say 3 seconds before the animation happens?

Any ideas or help much appreciated!