Solved

Image rollover menu with dropdowns as images

Posted on 2008-06-12

1 solution

569 Views

Last Modified: 2010-05-18

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

Comment

Question by:willnjen

[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

Join The Community

6 Comments

LVL 4

Accepted Solution

by:jeremyBass26

jeremyBass26 earned 500 total points

ID: 217762492008-06-12

there are many options out there...

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

just modfy the <a> with   and <span> and use the css for the images... easy as pie... and i love the effect for this one...

LVL 21

Expert Comment

by:naspinski

ID: 217762652008-06-12

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

Author Comment

by:willnjen

ID: 217835192008-06-13

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

Author Comment

by:willnjen

ID: 217835362008-06-13

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

Author Closing Comment

by:willnjen

ID: 314668172008-06-13

I figured it out, fsmenu worked well. Thanks!

LVL 4

Expert Comment

by:jeremyBass26

ID: 217841742008-06-13

sorry i didn't get back... but glad to see you got it... have a great one... :)

Featured Post

Question has a verified solution.

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

Create N column layout for Bootstrap

Article by: Julian

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

Embedded Videos in HTML5

Video by: Sarah

In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

HTML

Introduction to HTML (Part 2)

Video by: Jason

HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…