471,852 Members | 908 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,852 software developers and data experts.

Image mouse-over with dropdown menu

I am trying to find if there is a way, using CSS/HTML, to code a simple single drop-down menu that is activated when you mouse-over an image. For example, in windows, you can right mouse click an icon on the desktop and get a drop down menu to appear. I would like to do the same thing on a website except without having to mouse click, so when you mouse over an image, the menu drops down.
Jul 23 '07 #1
3 5637
7,435 Expert 4TB
There are some interesting css3 things that I've only touched on and am experimenting with when I find time. One uses :target to highlight another element and make other elements appear or not when hovering over another. I don't think it can make a drop down list appear but I haven't tried it either.

The downside to that is it only works in modern browsers and not IE. So the only alternative would be javascript.
Jul 23 '07 #2
Try the menu examples and tutorials at alistapart
Jul 24 '07 #3
I thought this looked interesting, so I tried to code something up quickly.

Here's what I got:

Test Image-Over Menu

If you open this in Firefox (the javascript is slightly different to work properly in IE6), you will see a picture of a guitar. If you mouse over the image, a menu will pop up - similar to the action of right clicking in windows...

The trick to this is something I picked up while learning about the Navigation Matrix approach to menu styling. We can essentially make an image act as a link by hiding the actual anchor <a> below it. This is done by making the height of the anchor 0, setting the anchor's background to a certain image, and then adjusting the anchor's upper padding.

Expand|Select|Wrap|Line Numbers
  1. a { 
  2. height: 0px;
  3. background-image: xx; 
  4. background-repeat:no-repeat;
  5. width: xx (where xx is width of picture);
  6. padding-top: xx (where xx is height of picture);
  7. overflow: hidden;
This will make the actual link invisible to the user, but will have created a box that acts as a link around the image.

From there, I used a short script to hide/show the menu when moused over.

Feel free to check out the code:



Although I have since modified the script, thanks to RaphaŽl GOETTER
at alsacreations.com for the basic model...

Hope this helps, let me know if you have questions

Jul 24 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

15 posts views Thread by Tony Gahlinger | last post: by
4 posts views Thread by Jay | last post: by
3 posts views Thread by Dustin Carroll | last post: by
9 posts views Thread by Daniel N | last post: by
3 posts views Thread by peter.chase | last post: by
reply views Thread by David | last post: by
reply views Thread by NeoPa | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.