Solved

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

Posted on 2008-06-19
7
266 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 500 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now