Flyout Menu with Rollover Image Links from Horizontal Nav

joshua731
joshua731 used Ask the Experts™
on
I'm working with a store site that has multiple vendors and departments and am using horizontal dropdown menu for navigation on the homepage.

On the 5th tab of the horizontal menu, how can one have a large dropdown menu that consists of image links positioned to appear over the main hero image on the page, and have this functionality just for that particular tab?

I have attached image mockups of what I am trying to achieve.

All vendor logos would appear when the 5th tab is rolled over and activated.  Each would have its own square and be a list item / link /menu option and the image displayed would change on rollover.

I am using the Multi-Level Dropdown Menu script from SpiceBrains and implemented the "mutiple" variation to have different graphics for each of the primary menu options. The 5th tab in the menu is labeled with id="menu5"

If there is a script out there (free or for purchase, or even Flash) that does this already, many thanks if you could provide a link!

Thanks!
menu1-typical-dropdown-action.gif
menu5-desired-action-for-tab-5.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
The only time I have seen something done like this the page used custom made code.  I have not seen a script online that would handle the variations you asked for.  There are some great sites online with Menu scripts and I can suggest some but I am afraid it will be a waste of your time to find something that does it all.  If you have one you like now and just need it modified then is that an option (i.e. does the license permit it)?  Do you understand the code well enough to do it or is it simple enough for another to adapt it?  It may even be an option to approach the maker of the menu you use to see if they would adapt it (probably for some fee).
Let me know how this helps and how you want to proceed.  If you have a question then let me know.
bol
 

Author

Commented:
The closest real example I could find is the "Select a Movie" rollover arrow on MovieTickets.com.

This is similar to what I want to do but I think what I want is simpler.
Commented:
Thanks for the response.  The example you mention is like what I have seen before.  It uses a html element that is positioned with CSS and "floated" over the other content.  It is also hidden or shown using Javascript and another elelement's mouseover event.  It can be tricky but isn't the hardest thing to do (and does make a cool effect).

The issue though is getting it to work with your existing page and especially the menu, which may also be done with some "premade" html/script.  I can provide general examples of the effect but you can also see the same thing by looking at the source for the movietickets.com page.  To get it working on your page you will need to provide more details.  If the menu is done with some premade script that is complicated doing this can be very time consuming (i.e. to get both to work together).  It would be more than what could just be done in a question here.  It can't hurt to provide details so we can see.  If you don't have to stick with the menu or can make it so that tab won't be treated as an "item" in the menu then this could be easier.  Another key is whether you can modify the code for the menu (if it is done with some premade script).

Let me know how this helps.  Some of the stuff I said is a repeat from my first comment but you seemed to miss it in your response.  Please make sure to completely respond to this if you do need more help with this.

If you just want a basic sample of doing that in a page without a menu then let me know.

bol

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial