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

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

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
keks_
Asked:
keks_
  • 3
  • 3
1 Solution
 
hieloCommented:
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
 
keks_Author Commented:
Actually I looked there before posting my question. No cigar unfortunately.
0
 
b0lsc0ttIT ManagerCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
keks_Author Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
keks_Author Commented:
Thanks!
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
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

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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