Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Mouseover nav menu (gif swap), how can I create one?

Posted on 2008-06-19
7
Medium Priority
?
288 Views
Last Modified: 2012-06-27
I am creating a navigation menu and I'd like it to have a menu that appears on mouseover. I'd like the menu to be a gif. I'd like it to be just like www.ikea.com

could you share some code, or a good tutorial? I tried looking at the source of that site but it's a bit too complicated.
0
Comment
Question by:keks_
  • 3
  • 3
7 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21837412
Look at the menus here:
http://dynamicdrive.com/dynamicindex1/index.html

most likely you will find something you need under th "Multi-level menus" group
0
 

Author Comment

by:keks_
ID: 21837701
Actually I looked there before posting my question. No cigar unfortunately.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 21839648
It is done with a hidden element.  I can walk you through how they did it and point out key parts.  There is no single way to do it though so you just need to find what works for you and very well may need to do some adapting.

The hidden element has the ID of allProductsMenu.  The event uses the function showDropMenu (see menu.js) to initiate this.  The displayLayer function is the key part in Javascript and just basically change the CSS to show the allProductsMenu element.  Its default CSS is used to put the menu over the other elements but it is hidden until the mouseover and rehidden onmouseout.

Let me know if you have a question or need more info.

bol
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:keks_
ID: 21839824
b0lsc0tt, thanks for your reply. It is very helpful!

As I am not advanced in this topic, is there any example or any page where I could copy the code and just swap out the gif image and the links for mine (assuming it doesn't violate anyone's intellectual property)?
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 21848416
That menu isn't a gif or image but actually an html element with contents.  To copy their code and use it would violate copyright or intellectual rights.

Do you have the ability to make a page that always shows that menu?  In otherwords create an element that will be on top the rest of the page when you want the menu to appear and with the style you want?  If so make that.  I can help with the last part if needed but it is simply a matter of adding style to hide the menu (display: none) and using Javascript to show/hide it with onmouseover/out.

If this is all something that is beyond your expertise then I would suggest looking for a premade script or getting someone to make one custom for you.  The dynamic drive site (which Hielo provided a link to) is one of the best for premade scripts like this.  There is quite a list there.  Most provide a way to customize the menu to a certain extent and the scripts are almost always released with a license that lets you get the code and customize it.  You usually just have to leave the credit notice.  This option would allow you to make it fit your page and needs but not have to start completely from scratch.  The key is finding the right premade script.  There are many other sites that have those scripts too.  Since I don't really use them I can't suggest a specific one that would be an exact or real close match for the menu at Ikea.

I don't have a page or script I can share that provides all of this.  However I have provided parts in answers to other questions and maybe that will be enough for what you need.  You can look at http:Q_22675370.html for one example.  The code in the snippet below is another example.  Both are mainly of showing/hiding but don't really have the CSS set up for floating the element or creating the layer.  If you have a complex page and/or nothing premade seems to work great then paying someone to do it can be very worthwhile for you.  I can say for sure but I would be willing to bet the Ikea menu was made just for their site and not from some premade or canned script.

Let me know how this helps or if you have a question.  It is a nice effect but the basics are very hard if you decide it would be fun to learn on your own.  The key is to do good browser testing because the CSS can sometimes need tweaking to be really cross browser compatible.

bol
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Show/Hide the div</title>
 
<script type="text/javascript">
<!--
function changeDiv() {
	var div = document.getElementById("hiddenDiv");
	div.style.display = (div.style.display=='none')? '':'none';
}
//-->
</script>
</head>
 
<body bgcolor="Background">
<h3>Hide/Show the div</h3>
<p>Run your mouse over the link below to see the surprise. &#169;</p>
<a href="#" onmouseover="changeDiv();" onmouseout="changeDiv();">The magic link</a>
 
<div id="hiddenDiv" style="display: none; background-color: #ffff99; width: 50%;" onmouseover="changeDiv();" onmouseout="changeDiv();">
asdfasdf asdfadsf adsadsfadsf adsf asfd adsf asdf asf adsf asdf asdf asdf asdf asd fasfd asdf asdf asf
asdfasdf ads fasdfasdf ads fasdf asd asdf asdf asdf asdfasdf asdf asd fsadf asdf adsf afds asfd dsaf
adsfa asd fasd fads fas fasdf asf ad fas df
</div>
 
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:keks_
ID: 31469004
Thanks!
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 21849177
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

926 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