?
Solved

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

Posted on 2008-06-19
7
Medium Priority
?
278 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_
[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
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

800 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