By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,148 Members | 739 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,148 IT Pros & Developers. It's quick & easy.

Image mouse-over with dropdown menu

P: 1
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
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 11
Try the menu examples and tutorials at alistapart
Jul 24 '07 #3

P: 58
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;
  8.  
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:

JScript

CSS

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

Tom
Jul 24 '07 #4

Post your reply

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