Solved

Hover drop-menu like "all departments" tab on ikea.com

Posted on 2008-10-20
2
651 Views
Last Modified: 2012-05-05
Hello,

I am looking to create a hover drop-menu much like the "All Departments" tab on the http://www.ikea.com/us/en/ navigation bar.  I would like to replicate all aspects, including the arrow that goes from point right to down on hover.  Can someone please provide me an example on how to acheive this?  Any help would be greatly appreciated.  The solution needs to work cross-browser and be as accessible as possible.

Thanks!
0
Comment
Question by:Gsx_Eclipse
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 2

Accepted Solution

by:
mrables earned 400 total points
ID: 22763231
It uses Flash.  It is a fairly simple Flash script, but it would still require some knowledge of the program to create it.  

There are other types of "drop-down" menus that can be created using just DHTML (HTML, CSS, and JavaScript), but it wouldn't be as styled as the one on the IKEA page.
0
 

Author Comment

by:Gsx_Eclipse
ID: 22764090
Hi mrables,

The navigation menu itself is not flash-based... just the movie underneath the navigation.  Can you please point me in the direction of a "real world" example of a similar CSS/JavaScript based solution?  Thanks.
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question