In Progress

jquery superfish menu modification to add scrolling

I have a superfish menu setup to work like a combobox with cascading menus. - see [url removed, login to view] for example of a superfish menu implementation

My implementation, when closed, shows the current selection. when expanded it shows country, then state and city.

for example. This code will be provided.

You must: set the menus to a max-height - for example show just 5 menu lines (this is configurable). If there's more than five menu items, show a down arrow below the 5th item. When mouse is on down arrow the menu items scroll up to show the additional menu items. If the top item visible is not the 1st item, then an up arrow is visible, allowing the user to scroll up when mouse is hovered over.

This can be a modification of a superfish menu, or you can provide a completely different menu code as long as it provides the functionality described. A sample html with css working with superfish but without the scroll functionality will be provided as a starting point.

More details:

for testing, show only 4 items - all dropdowns to show only X # of menu items.

so when there are 5 or more items, you show 4 and show a down arrow as a line on the end of the drop line. when the user hovers or clicks on the arrow, you scroll the items up so 2-5 shows, etc.

means that firstly we have to show 4 records then afetr when the user clicks on the down arrow it should show more records. as he stays hovered over the down arrow, you keep scrolling down

Have a delay so it doesn't scroll so fast he cant see it or control it.

Continuously scroll as long as the user is hovered over the arrow, and we are not at the bottom of the list. first show menu items 1-4, then show 2-5, then show 3-6. etc

its just like if u are viewing a large webpage and I am holding down the mouse on the down arrow.

the page scrolls 1 row at a time...

once u are showing rows 2-5 or higher # rows, then show the UP arrow at the top of the dropdown also. if user hovers over the UP arrow, then do the reverse. show 3-6, then 2-5, then 1-4 etc. once there are no more above to show, u can either hide or gray out the up arrow.

similar with the down arrow - if there are no more below, gray it out.

so when u hover on United States, the list of states downdown appears. also do the same behavior - only show 4, and handle the scroll

the last thing is just the top "menu item" behavior. right now it drops down on hover. and hides the drop down once u move away from hovering on it or a dropdown

change behavior so only a click on the "menu item" image is clicked

and hide the dropdowns only when the "menu item" image is clicked again, a dropdown item is selected (clicked), or the user clicks elsewhere on the screen

the drop down should open when we click on menu image and dropdown shouldd dissappear when we click on the menu image or when we click elsewhere on the screen or when we actually make a selection - ie click on the city.

in the html, a valid select will have an onclick handler

and thats it. ie <li><a href='#' onclick="[url removed, login to view]('Jasper|[url removed, login to view]|[url removed, login to view]');return false;">Jasper (1)</a></li>

a state menuitem- <li><a>AR</a>

- no onclick

Skills: jQuery / Prototype, PHP, Software Architecture

See more: superfish scroll, jquery superfish onclick, jquery superfish scroll, show menu scrolling, superfish menu scroll, arrow scroll menu jquery, return item selected superfish example, set scrolling superfish menu jquery, jquery menu scroll arrow, scrolling superfish menu, menu scroll jquery, jquery scrolling arrow menu, add scroll superfish menu, superfish scrolling, superfish menu scrolling, superfish menu onclick, superfish menu reverse, jquery max menu, superfish scroll menu, superfish jquery scroll menu, jquery items arrow menu, scroll menu superfish, superfish menu show combobox, scrolling php code, php on line 87

About the Employer:
( 12 reviews ) Kirkland, United States

Project ID: #1235030

Awarded to:


Hello. I can do it right now.

$120 USD in 1 day
(63 Reviews)

3 freelancers are bidding on average $187 for this job


Hi, expert web developer here. Your project will require modifications to superfish menu or alternatively a new menu from scratch can be made. See PM for further details and samples.

$240 USD in 12 days
(14 Reviews)


$200 USD in 4 days
(0 Reviews)