jquery superfish menu modification to add scrolling

This project was awarded to barca2045 for $120 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
Project Description

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

Awarded to:

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online