?
Solved

Image rollover menu with dropdowns as images

Posted on 2008-06-12
6
Medium Priority
?
573 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
0
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
  • 3
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
jeremyBass26 earned 2000 total points
ID: 21776249
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
 
LVL 21

Expert Comment

by:naspinski
ID: 21776265
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
 

Author Comment

by:willnjen
ID: 21783519
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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:willnjen
ID: 21783536
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
 

Author Closing Comment

by:willnjen
ID: 31466817
I figured it out, fsmenu worked well.  Thanks!
0
 
LVL 4

Expert Comment

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

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

777 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