jquery superfish menu modification to add scrolling

IN PROGRESS
Bids
3
Avg Bid (USD)
$187
Project Budget (USD)
$30 - $250

Project Description:
I have a superfish menu setup to work like a combobox with cascading menus. - see http://users.tpg.com.au/j_birch/plugins/superfish/#examples 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="odo.changeLoc('Jasper|-87.2774|33.8286');return false;">Jasper (1)</a></li>

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

Skills required:
jQuery / Prototype, PHP, Software Architecture
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


Hire barca2045
$ 120
in 1 days
$ 240
in 12 days
Hire rickpolad
$ 200
in 4 days