• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 584
  • Last Modified:

Image rollover menu with dropdowns as images

Hi Experts

I've spent hours looking for this.  Does anyone know how to create a vertical image roll-over menu with dropdowns which are also image rollovers?

I know how to create a Java vertical image rollover menu and I know how to create a CSS dropdown menu.  I just can't find any examples of the two combined.

There was a similar question on EE but suggested links don't work any more.  See http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_10627621.html?sfQueryTermInfo=1+dropdown+imag+menu+rollov 

Can anyone point me in the right direction?  Should it be all Java, or all CSS, or something else?

Many thanks

Will
0
willnjen
Asked:
willnjen
  • 3
  • 2
1 Solution
 
jeremyBass26Commented:
there are many options out there...

start here... http://www.twinhelix.com/dhtml/fsmenu/

just modfy the  <a>  with &nbsp; and <span> and use the css for the images... easy as pie... and i love the effect for this one...
0
 
naspinskiCommented:
I would say pure css, just in case users dont have js (its faster too)

Something like this would work (mostly stolen from http://www.cssplay.co.uk/menus/ with a few modifications)
<head>
    <title>CSS Image Rollover Menu</title>
    <style type="text/css">
        #pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}
        #pmenu ul {padding:0; margin:0; list-style-type: none; width:101px;}
        #pmenu li {position:relative;}
        #pmenu a, #pmenu a:visited {display:block;background:url(images/button.png);width:100px; font-size:10px; color:#fff; height:30px; line-height:22px; text-decoration:none; text-indent:5px; }
        #pmenu li:hover > a {background:url(images/button_down.png); color:#c00;}
        #pmenu li ul {display: none;} 
        #pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
    </style>
</head>
<body>
    <ul id="pmenu">
        <li><a href="#nogo">Top Level 1</a></li>
        <li><a href="#nogo">Top Level 2</a></li>
        <li><a href="#nogo">Top Level 3 &#187;</a>
	        <ul>
	            <li><a href="#nogo">Sub Level 1a</a></li>
	            <li><a href="#nogo">Sub Level 1b</a></li>
	            <li><a href="#nogo">Sub Level 1c &#187;</a>
                    <ul>
			            <li><a href="#nogo">Sub Level 2a</a></li>
			            <li><a href="#nogo">Sub Level 2b</a></li>
			            <li><a href="#nogo">Sub Level 2c</a></li>
		            </ul>
		        </li>
	            <li><a href="#nogo">Sub Level 1d</a></li>
	            <li><a href="#nogo">Sub Level 1e</a></li>
            </ul>
	    </li>
        <li><a href="#nogo">Top Level 4</a></li>
        <li><a href="#nogo">Top Level 5</a></li>
        <li><a href="#nogo">Top Level 6</a></li>
    </ul>
</body>

Open in new window

0
 
willnjenAuthor Commented:
Hi Guys

I am after a menu that uses images that change to another image as you rollover.  That combined with the multi-level dropdowns is what I can't do.

An example of the image changing rollover I want to use is here (not my work).. www.oceanridge.co.nz
There are two images which change when rolled over.  The code is below.

How do I add a level of dropdowns that are also image rollovers?

Cheers

Will
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Test image menu from Ocean Ridge</TITLE>
 
<SCRIPT src="http://www.oceanridge.co.nz/includes/scripts.js" language="javascript"></SCRIPT>
 
 
</HEAD>
<BODY>
  <div id="nav" style="left: -530px; top: 36px; width: 90px">
    
      <a href="/index.shtml" onMouseOver="MM_swapImage('home','','http://www.oceanridge.co.nz/images/navmain/home-1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="http://www.oceanridge.co.nz/images/navmain/home-0.gif" name="home" width="56" height="45" border="0" id="home"></a><br>&nbsp;</div>
</BODY>
</HTML>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
willnjenAuthor Commented:
Hi jeremyBass26

I just read your post again and had another look at fsmenu.  Are you saying I could use images with fsmenu?  Can you show me an example?

Cheers

Will
0
 
willnjenAuthor Commented:
I figured it out, fsmenu worked well.  Thanks!
0
 
jeremyBass26Commented:
sorry i didn't get back... but glad to see you got it... have a great one... :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now