Beautiful Background Image Navigation with jQuery
Tutorials May 5, 2010 by Mary Lou 147 Comments
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.
On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.
We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.
The photos that we will be using are from Pat’s beautiful B&W collection on Flickr.
There will be a little bit of CSS3 involved which absence will almost not be notable when using a browser that does not support its properties (like IE).
We tried to make this one cross-browser compatible and voilà! It works beautifully in Google Chrome, Firefox, Opera, Safari, IE8, IE7 and guess what, it even works respectively in IE6. (We are using an adapted style sheet and you will have to apply some PNG fix if you want the sub-menu backgrounds to be semi-transparent. )
OK, so let’s get started!
The Markup
The HTML will consist of a wrapper div and an unordered list with three list items. We will initially set some “bg” classes that will have the respective background images. The “menuWrapper” will always have the “bg” class of the current list item so that we have the background image of the current list item.
<div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div>
For the background animation plugin to work correctly we need to set the position of the background image as inline styles initially. We already set the right position for each background image, for example, the third item will have the background image positioned to the outer right.
As you can see, every list item has another sub-list with three more items. The background image position of these sublists is set to a value that hides the image. When we animate the background then, we will create the effect of sliding it in from the left or the right.
The CSS
Let’s start by the general style of the the “menuWrapper” which will contain the font styles and the size of the whole element:
.menuWrapper{
font-family: "Trebuchet MS", Arial, sans-serif;;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
The list and the list items of the first layer will have the following style:
ul.menu{
list-style:none;
width:797px;
}
ul.menu > li{
float:left;
width:265px;
height:542px;
border-right:1px solid #777;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li.last{
border:none;
}
The selector “>” addresses only the li elements of the first layer and will not be applied to the ones of the sub-menus. We will give the last li the class “last” in order to remove the right border.
The following three classes define the background images. We will give these classes to all the li elements depending on which one we hover. So, if we hover the second li, we will give the “bg2″ class to all the first layer list items:
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
Let’s define the look of the link elements in the first layer list. Since the li elements have a big height, we need to push the link elements down. We do that by setting a high top margin:
ul.menu > li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
To center the text of a link element vertically, you can give a line-height value equal to the height of the element. (I don’t know why, but when I started with learning CSS, I automatically always used paddings to adapt the height of the element and to center it. Using line-height was a real delight because you can control sizes much better like that.)
The second layer lists would naturally appear after the first layer list, so we use a negative top margin to “pull” them up:
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
The li elements of the sub-menu will be initially hidden. In the script we will fade them in when we hover over their parent list item link:
ul.menu > li ul li{
display:none;
}
Now we define the classes for the background images of the sub-menus:
ul.menu > li ul.sub1{
background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image:url(../images/bg3sub.png);
}
The link elements of the li elements will have the following style:
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:11px;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}
The first sub-list will be shown in the beginning:
ul.menu > li ul.sub1 li{
display:block;
}
And that’s all the style. Take a look at the ZIP file for the IE6 style sheet.
Now let’s take a look at the JavaScript.
The JavaScript
What we do in the script is the following: we first check where we are coming from and then we animate the background positions of the list elements in the first level and the backgrounds of the sub-menus accordingly:
$(function() {
/* position of the <li> that is currently shown */
var current = 0;
$('#bg1,#bg2,#bg3').mouseover(function(e){
var $this = $(this);
/* if we hover the current one, then don't do anything */
if($this.parent().index() == current)
return;
/* item is bg1 or bg2 or bg3, depending where we are hovering */
var item = e.target.id;
/*
this is the sub menu overlay. Let's hide the current one
if we hover the first <li> or if we come from the last one,
then the overlay should move left -> right,
otherwise right->left
*/
if(item == 'bg1' || current == 2)
$('#menu .sub'+parseInt(current+1))
.stop()
.animate({backgroundPosition:"(-266px 0)"},300,function(){
$(this).find('li').hide();
});
else
$('#menu .sub'+parseInt(current+1))
.stop()
.animate({backgroundPosition:"(266px 0)"},300,function(){
$(this).find('li').hide();
});
if(item == 'bg1' || current == 2){
/*
if we hover the first <li> or if we come from
the last one, then the images should move left -> right
*/
$('#menu > li')
.animate({backgroundPosition:"(-800px 0)"},0)
.removeClass('bg1 bg2 bg3')
.addClass(item);
move(1,item);
}
else{
/*
if we hover the first <li> or if we come
from the last one, then the images should move
right -> left
*/
$('#menu > li')
.animate({backgroundPosition:"(800px 0)"},0)
.removeClass('bg1 bg2 bg3')
.addClass(item);
move(0,item);
}
/*
We want that if we go from the first one to the last one
(without hovering the middle one), or from the last one
to the first one, the middle menu's overlay should also
slide, either from left to right or right to left.
*/
if(current == 2 && item == 'bg1'){
$('#menu .sub'+parseInt(current))
.stop()
.animate({backgroundPosition:"(-266px 0)"},300);
}
if(current == 0 && item == 'bg3'){
$('#menu .sub'+parseInt(current+2))
.stop()
.animate({backgroundPosition:"(266px 0)"},300);
}
/* change the current element */
current = $this.parent().index();
/* let's make the overlay of the current one appear */
$('#menu .sub'+parseInt(current+1))
.stop().animate({backgroundPosition:"(0 0)"},300,function(){
$(this).find('li').fadeIn();
});
});
/*
dir:1 - move left->right
dir:0 - move right->left
*/
function move(dir,item){
if(dir){
$('#bg1').parent()
.stop()
.animate({backgroundPosition:"(0 0)"},200);
$('#bg2').parent()
.stop()
.animate({backgroundPosition:"(-266px 0)"},300);
$('#bg3').parent()
.stop()
.animate({backgroundPosition:"(-532px 0)"},400,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3')
.addClass(item);
});
}
else{
$('#bg1').parent()
.stop()
.animate({backgroundPosition:"(0 0)"},400,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3')
.addClass(item);
});
$('#bg2').parent()
.stop()
.animate({backgroundPosition:"(-266px 0)"},300);
$('#bg3').parent()
.stop()
.animate({backgroundPosition:"(-532px 0)"},200);
}
}
});
And that’s it! A beautiful cross-browser capable effect!
I hope that you enjoyed the tutorial.
You might also like
-
Thumbnails Navigation Gallery with jQuery
-
Slide Down Box Menu with jQuery and CSS3
-
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
-
Self-resizing Navigation Menu with jQuery
-
Fixed Fade Out Menu: A CSS and jQuery Tutorial
-
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
-
UI Elements: Search Box with Filter and Large Drop Down Menu
-
Awesome Cufonized Fly-out Menu with jQuery and CSS3
-
Beautiful Photo Stack Gallery with jQuery and CSS3
-
Sliding Checkbox Actions Menu with jQuery
This is one of the most beautiful and unique examples I’ve seen on this website. Really like the effect, well done!
brilliant! Thanks!
impressiv!!
simply gorgeous!
Wow that is awesome. Wish you would put a demo link at the top. I like to get to the climax first.
Thank you all for your great feedback!
@James, you can also click on the post image, that will always lead you to the demo :) and hopefully to a great climax! Cheers, ML ;)
Very nice effect.
It seems that Flash is about to become useless since jQuery can achieve those kind of effects now.
Bravo! I laughed, I cried…it’s a tour de force. I just found your site this week…straight to the top shelf.
I agree with James about the demo being linked higher–gives me motivation to read the nitty-gritty. But the clue about using the post image; good to know.
Maybe Steve Jobs was right…
Congratulation…very good tutor
This is a very nice tutorial with such an impressive effect.
Thank you Mary!
so smooth and this one unique a hover bg….hihihihihi ^.^’
Love this effect! Thanks so much for sharing.
One of the best effects I’ve seen in a long time – vell done!
beautifull effect, thanks for sharing…great job…
awesome! thank you
Hi,
Just walk around but it is really good for me. Thanks.
Amazing example! jQuery is hot as always. One question: can I make lines between parts of images invisible?
@Devaka, of course, just do the following: remove the border-right from “ul.menu > li” in the CSS and set the width of “.menuWrapper” and “ul.menu” to 795px. Actually it looks pretty cool like that :) Thanks for your feedback! Cheers, ML
This looks great! I don’t think I’ll ever get tired of jQuery.
absolutely amazing, thanks for sharing
Bookmarked!
Really good use of jQuery.
Great effect and looks really nice :)
Very beautiful effect! Thank you for share.
Absolutely beautiful. And if I wanted a different or random menu to appear first when the page opens….? I’m trying to figure that part myself but…
@Leon Yes, that’s not so trivial :) Here are the two demos for the other elements:
Right Element
Middle Element
And here is the ZIP file.
I hope it helps,
cheers,
ML
Wow! Really nice and smooth. Haven’t seen a solution like this before.
Hum amazing code but auwful Arial Narrow font. Please change that :x
stunning effect! love it.
Dear Javier, much better now, no?
Cheers, ML
Thanks so much Mary Lou. I’m sure I’ll be able to do what I’d like now!
Great coding! Thanks for the download and demo. Very sharp effect.
this is very nice. Just found ur website and I think will visit frequently .
If gotten this working fine with 3 images and even different dimensions, but would really like *4* images – and – start with a different image by default (before any action).
I’ve gotten the four images to work, but having some difficulty with login on hiding the submenus.
woow good work
great tutorial, I try to do a identical copy and run perfect, so the smooth slide on each background is better on your sample vs my copy. Why?
url: http://www.mastercafe.com/ejemplos/bgnavi.html
All run perfect, so check the smooth lateral movement. Same PC, same FireFox, same task, better your sample, can’t understand why.
Very beautiful, very elegant yet clean – thanks so much for sharing that!
I have successfully modified this script to accommodate 4 images (or more), including changes in logic and dimensions.
You can download the archive here:
BeautifulBackgroundImageNavigation_X.zip
“index4.html” and “style4.css” are the modified files. I did not take the time to create a modified “styleIE6.css” for IE6.
From here, it is quite manageable to deduce the necessary changes in js logic, css and dimensions to accommodate a limitless combination of images, submenus and dimensions. Just keep in mind that “4,” in my 4-column model, relates to the total number of images (columns).
In return for this contribution, can anyone show the way to present a “default” menuWrapper image when there is no “hover” over any of the menu items or parents? (I see that I am not the first to wish for this!)
Absolutely gorgeous effect !
Great Job, and thanks for sharing !!
Would it be hard to setup this effect as a ’slideshow’ without the menu’s, but with autoplay looping through a range of images ?
Cheers,
Arve
man.. this is amazing !
Tutorial added to the web tuts !
This is a really really nice script. Thank you so much. It’s very easy to implement as well!
nice plugin
Congratulations!! wonderful way of handling menus, realy original.
@R.bird removing the initial menus themselves is easy find this in the css
ul.menu > li ul.sub1 li{
display:block;
} and kill the display: block (or the whole entry)
That leaves the transparent overlay though and try as I might I can’t find where that’s coming from or how to stop it.
Any help gratefully received!
Wow very impressive and unique tutorial. Very creative, I love it.
Now I just need to find a use for it :)
Would be very good for a splash page. Anyone have any ideas how else it can be intergrated into an existing site?
Well done, thank you so much! Playing around with the code, I can’t seem to figure out how to effectively add or subtract a panel. Say I only want 2 panels, how would I get this result? Thanks again!
Beautiful effect! Very impressive!
Simply marvelous.. exactly like flash animation but file size would be much smaller than that. Great work. Thanks for sharing with us.
I love this feature! I will most certainly be using it in one of my next designs.
@R.bird = I had to say thank you so much for your tweak info = I’ve tried to figure out a solution to your request and I think I am almost there, but not yet = ie: the initial static image to show up on initial display. I know the solution resides somewhere with creating an additional .bgx css to the menu ones. Anyways I have my home page menu showing up with 8 different sections now at 1040px wide by 611 high. Wow! thank you so much Mary Lou for making this JQuery available = JQuery versus Flash versus iPad = I think Adobe has something to worry about and that HTML5 combined with jQuery will rule web development at least for the next couple of weeks!
I tried to implement the above in my blogger blog. But its not working. I have hosted all the pics and javascript and modified the links accordingly. Used the html/javascript page element for the html code, pasted the jquery in head tags and css above b skin tags. But its not working. can some one help? Just for info i hav successfully copy pasted scripts from flowplayer.org and everything works.
Some be kind to give me a solutio to implement in blogger.
How to implement in blogger blogs?
@Ratnakar I really wish I could help you but I never did something in blogger. What exactly shows when you integrate it? Did you try to view the source of the page after integration? Cheers, ML
Thx for the prompt reply ML, heres the link to my blog
http://spicemyblog.blogspot.com
The CSS works but the Jquery doesnt seem to work. U get a static image of the first loaded one.
If u could provide a solution it would be wonderful. Thx in advance.
@Ratnakar I think I found the problem! Can you try to add another }); at the end of the script? It was throwing me an error on Firebug that there would be brackets missing, so maybe it was just that! I hope it works, cheers, ML
@mary lou is there any way to have it so that when the page loads *no* menu block is displayed? So they only appear once the user hovers over the menu block title at the bottom.
I’ve tried to find a way to do it but without succes :-(
@Alan Well, the question is, how would we make the submenu block appear when we hover? It could not slide from another item if you don’t hover over the other item first. So, this is kind of tricky, it would loose the initial idea… Just imagine you hover over the middle item, where would the submenu block appear from?
@Mary lou, yes I can see that the way thinks work at the moment you’ve got to be sliding *from* somewhere. Is there no way though to make it so the first block *is* the default origin but onload that block’s menus (!not the background!) are hidden. I’m sorry i’m just restating the problem realy, I couldn’t see how to do it. The problem is not the background image, that can be the first block. The menus themselves don’t slide so I thought there might be a way. Is that any clearer?
Thanks again for your help.
ps .. when I say menus i only mean the submenu block with the transparent background (sub1 dans le css) and not the main menu bar at the bottom of the screen (our passion, our brands, etc)
Dear ML, tried adding the brackets, the error showed while debugging in IE 8 also. But no positive result.
Tried checking the script at http://jsfiddle.net
There is indeed an ERROR, still wondering where the bug is…?
Has anybody cufonized this wonderful jQuery menu yet? I did, but it’s not working perfect yet. When I mouse over the menu from left to right, or mouse away from menu to return to it = it behaves fine. When I mouse over the menu from right to left, the image background doesn’t load for the menu headings with sub-menus attached to them.
Thanks for your guidance.
Finally met success in debugging. Now its working in my blog. But the animations are not so smooth. Some problem in CSS as is evident from the picture which has a double edge at the left hand side.
http://spicemyblog.blogspot.com
Some body help again…!!!
you need to make sure you have the following in your CSS doc
*{
margin:0;
padding:0;
}
MaryLou, absolutely love it! Unique and works fantastically!
Just have one minor glitch that I can’t figure out! I have modified R.Bird’s 4 panel version to make it a 5 panel version… but when going left-to-right the 4th panel opens the wrong way… but going right-to-left it is fine.
Could I send you (or R.Bird) the file so you could have a quick look over it? Would really appreciate any help!
Thanks so much for sharing this!
Greg
Wow! Who needs flash with stunning effects like this!
Ratnakar: Perhaps also pre-loading images might be a good idea. First hover for me showed a delay whilst images were being loaded …
I was wondering if there was a way to keep the navigation and sub menu’s navigable if JavaScript is off?
Thanks
Think Style Studio
Hello Mary Lou,
Great tutorial and brilliant solution :)
Do you mind if I use it for my own personal site? :D with great modifications of course :)
Thank you very much for sharing
@Cezar Of course I don’t mind! I am glad that you like the solution, and it just looks fantastic with your drawings! Cheers, ML
i wanted to do a four column one, but a bigger dimension, but its not quite working out for me, if you could help me out that would be awesome
i figured it out after all, i was just wondering if you mind me using this for my photography website?
@Jayce, of course I don’t mind! Please feel free to use this for your site :) Cheers, ML
@Jayce, hey I checked out you website and the navigation definitely needs that the images are preloaded… Just download the ZIP again, we updated it some time ago. Also, for working with 4 pictures, check out the comments and the link of R.BIRD, I think that will help you a lot! Cheers, ML
i got the 4 column figured out, and i updated the link again. Its just the pre loading that need to add yet. and thank you so much for this, this is exactly what i was wanting my site to look like :)
This is oen of the b’ful example i have seen so far here. great tutorial !
great tutorial
Great tut.
Has anyone managed to get more than 3 images working in Internet Explorer ?
Great work, Mary Lou – thanx!
I have a problem – I just wanted to try the option with the midlle menu to open first, but there was a problem with your link to the .zip file.
@janez, sorry about that, the correct link to that ZIP file can be found here . Thanks for you feedback! Cheers, ML
Love this script! So crisp.
If I wanted the images to be smaller, say 740×501 instead of 800×542, what would be the best way to adapt this?
Thanks!
A quick update to my previous post…doing what I would consider “obvious” gives a weird repeat to the image on the right, about 40px wide. So it’s not just a matter of changing the size?
Okay I am using the file that R.Bird was so kind to provide but I only need one sub menu on one of my sections how do I get it to line up flush with the along the main menu. Right now its just floating up at the normal position by itself. I have tried changing CSS and nothing is moving it.
Has anyone tried to include this awesome navigation in Joomla…?
Here is the link to my website so that you can see my problem. I can’t get the contact us sub menu to line up flush like the rest of them if you scroll over them you will see what I mean. http://www.bauderextreme.com/newsite/index4.html
I was able to move the element down but I am still getting a text fade in the original position when I switch from contact us to any other element. What could be the cause of this? http://www.bauderextreme.com/newsite/index4.html
Has anyone tried using this with wordpress. Apparently wordpress uses jquery in safe mode. So I wrapped the javascript code in index.html with this.
(function($){
The code that was in index.html
})(jQuery);
Still I cannot get it to work.
My CSS files are linked up properly
My js files are linked up properly
Has anyone made this work with wordpress? Any ideas?
Cheers and awesome script.
Figured out the wordpress installation issue from my last comment.
Wrapped js code with the following
(function($){
The code that was in index.html
})(jQuery);
Found this line in index.html
}).attr(’src’, ‘images/’+i+’.jpg’);
changed it to this
}).attr(’src’, ‘/images/’+i+’.jpg’);
Comment about line change stripped out my php code
basically the line change points to the images directory.
bloginfo(’stylesheet_directory’);
of course wrapped in php.
@Joshua can you send me the code? Cheers, ML
Is there a way to overlay a transparent .png image over this? Basically what I am trying to accomplish is a nice border or a frame. The .png image I have is basically a frame. I want to give a layered effect/look to this where I have my ‘frame’ on top and this script runs beneath it.
Hope that makes sense…
Quantum, I would love to know more specifics of your solution. I didn’t really follow what you said, but am running into what I assume is a similar Wordpress-related issue.
Hi Mary I have used your great work in my new wordpress theme but its not working on the net. when I get the code locally its working but when I uploaded the net its not working ? can you check two sample for me ?
internet version: http://www.wordpress24.net
you can grab the source code from locally its will be works.
I didn’t solve and find the problem.
@Bruce You have an error in some script:
$("#hotnews").easyticker is not a functionTry to remove that script and see if that is the problem. Hope it helps, ML
A question remains: Can the sub-menus be aligned via the bottom edge vs. justified at the top? Here’s a site in progress (be gentle) that might help you understand the question:
http://hmorthodontics.com/_index.php
My sub-menus won’t all have the same number of links and I’d like them to display across the bottom edge vs the top. Is the answer in the CSS? The JS?
Thanks in advance–LOVE your work
Mike
One word for that “Beautiful Background Image Navigation with jQuery” tutorial. WOW!
Hi Mary, everything looks fantastic locally, but in the net just don’t work, what i’m doing wrong?
thank you.
http://funkdemo.publishpath.com/
@Fernando You have an error in your JavaScript: In the last line you have some repeated brackets. Hope it helps, ML
Me again Mary, nope I delete the brackets, nothing happens.
as another option, upload the demo without any modifications and still the same results, any advice?
thanks again.
http://funkdemo.publishpath.com/
Hi,
I just want to thank you for this gorgeous script. I used it on my web-site – http://www.klybni4ka.net. I hope you don’t mind me using it. I posted a backlink to your website on – http://www.klybni4ka.net/design-page-17 . If you do mind, just let me know and I will remove it.
Thanks again!!!!
@Dan We are really glad that you use this in your website. Of course we don’t mind and we appreciate the backlink although it is not necessary :)
It really looks beautiful and I would encourage you to download the latest version and adding the part for preloading the images to your script. Then the next images will be shown immediately once the user hovers and it will look even nicer. Cheers, ML
I dont get it, why is there a Sart hack at the header :
*{
margin:0;
padding:0;
}
if I delete this, the margin goes funky, but why ? is there a way to get the correct margin with the CSS ?
@Asuran, I guess that’s a bad habit :) You can as well do this:
body, div, h1, ul, li, [all elements to reset] {margin: 0; padding: 0;
}
Hope it helps,
cheers, ML
Damn you’re quick XD
and yes it helps
thx !
Hi Mary,
I love your effect – great work thanks!. I have your effect working perfectly now and was ready to move on to the next stage in my freelance graphic designer website – http://www.nickjacksoncreative.com -
I don’t want any links to other html pages – I want to display my portfolio, cv and contact details etc. straight from this homepage using lightview as i did with a previous site design. Well i set it up as usual but the lightview feature won’t work ‘on top’ of your code eg. when you click on ‘view my portfolio’ for example it opens a new window with the sample image in it, as opposed to opening the lightview feature.
So my question is how to combine your effect with the lightview effect to complete my site?
Many thanks, Nick
Hello Nick! I get an error in the Prototype script saying that element.dispatchEvent is not a function. That’s probably some incompatibility with Prototype and jQuery. You should check out what issues there might be with Lightview and jQuery or with Prototype/Scriptaculous and jQuery. You should also take a look into http://api.jquery.com/jQuery.noConflict/, that might solve your problem. Hope it helps, Cheers, ML
Thanks ML!
The noconflict link you sent has fixed the problem by adding in the following”
$.noConflict();
jQuery(document).ready(function($) {
Cheers, Nick
Hi Mary
I love this effect and want to use it, however I have just purchased dreamweaver and I’m not sure how to put it together. If you don’t feel you can help someone as basic as myself I understand, great effect regardless.
Thanks
Jamie
Hi Jamie,
what exactly do you have difficulties with?
Cheers, ML
Hi Mary
Thanks for getting back, I know nothing really! I’ve tried downloading Jquery and I get a page of code but have no idea where to put it. That would be the first point, I think I know what to do after that but may come back to you if that’s ok.
Thanks
Jamie
@Jamie Maybe you can start by this: jQuery API extension for Dreamweaver
and then check out some tutorial like this one:
DreamWeaver CS5: jQuery Utilities Toolset v1.0.1 (Extention)
Hope it helps,
cheers,
ML
hi;
I love your four column example and am trying to implement it.
I would like to make four sections, and when in one section have the sub navigation activated.
What is the correct method to make any one of the four columns the ‘active’ state (ie. sub-nav showing)
thanks,
Andrew C.
hi;
I would like to use your navigation toolkit plus a jquery slideshow within content pages. The two toolkit methods seem to be in conflict. Do you have any suggestions for implementing jquery slideshows within the body of webpages using your navigation tools?
thanks!!!
I LOVE this menu! does anyone have any idea how to integrate it into joomla?
Hi Mary
Brilliant, I love you!!
Jamie
I am wondering if it is possible to use jquery to bring up the menu selected page as another layer semi transparent overlaying the entire menu, with a ‘close’ option for navigation? Being a complete noob with this my current attempt simply opens new pages of content, and that distracts for the beauty of this design completely.
i would like to know how i can include a new block , so the navi has 4 columns
thanks for helping code will be appreciate
I have this running in Joomla!
Still have a few issues to resolve and will then post my results soon!
I have amended the code as follows to make invisible regions with content appear when the sub menus are selected. At the moment these ‘regions’ are just divs with basic content in them whilst I try and figure out how it all works.
My problem seems to be the handling of multiple regions or divs, one for each of the menu selections.
I firstly define the style:
#layer1 {
position:absolute;
top:10px;
left:200px;
z-index:0;
visibility:hidden;
}
#layer2 {
position:absolute;
top:10px;
left:200px;
z-index:1;
visibility:hidden;
}
Then I add the javascript:
function Toggle(‘layer1′) {
var elm=document.getElementById(‘layer1′);
elm.style.visibility=(elm.style.visibility==’hidden’)? “visible” : “hidden”;
}
function Toggle(‘layer2′) {
var elm=document.getElementById(‘layer2′);
elm.style.visibility=(elm.style.visibility==’hidden’)? “visible” : “hidden”;
}
Then the hidden DIVs:
THIS IS LAYER 1POSITIONED AT 100,100
THIS IS LAYER 2POSITIONED AT 100,100
And finally I add the action to the existing page as you have it here:
understanding hotspots
buying hotspots
Sadly nothing works. If I make this a simple toggle action between two divs then it works, because I can simplify it, but I want to list up to 9 hidden divs to display depending on the sub menu selection made. Mary Lou, or anyone, can you spot where I have coded this wrongly? Please ignore the positioning and the div’s styling at the moment, they are just done this way for the testing.
Oops, my code examples do not show up correctly – grrrr – not sure how to fix that. Sorry Mary-Lou! Can you still figure out what I’m trying to achieve?
I just wanted to thank you so much for providing this brilliant (one amongst many) tutorial – my website is effectively a homage to my appreciation of you!
It’s a beautifull effects,but please can anyone help me?
Try to change the size of the background image (mine are 640×428) but it don’t work well,why?
I don’t have other js in lace but the container breakdown
To R.Bird and/or Mary Lou: I downloaded your modified menu containing 4 panels. I tried to follow the logic and add a 5th panel but it ultimately failed. The 5th panel appeared but I could never adjust the background position of the images so they lined up properly (they become more askew as you got closer to the 5th panel) and when I hovered over the 5th panel main menu item, all the background images disappeared but you could see the sub menu items (no background image on the sub menu items either).
If there is anyway to explain how to successfully add additional panels on to your modification, I would greatly appreciate it. Another person posted he had added 4 additional, a total of 8 so I know it can be done.
Hi Max, I’m the guy that did the eight slicer, thanks to Bird’s script tweak he published earlier in here. I have uploaded my sketchy work so you can do a page “view source” and see for yourself how the code is built. Basically, you have to figure out the total width of your image and divide it by the number of slices you want. Lets say a 1000px wide image divided by 5 slices = 200px from there you will see that you have to use 200, 400, 600, 800 increments in your coding substracting or adding 200px forward and backward…and so on = it’s all maths. The result of my exercice is not a perfect one; there is something in the script that still needs further tweaking for cleaning up animation. But if you mouse away instead of surfing through from one of my slices to come back to a slice with the mouse out, everything works forward or backward. Anyways, wait a little for page to load fully before mousing around = it’s just an experiment I did.
Here’s the LINK!
Incredible !!!
I love it !
added in my javascript plugins list
http://www.ajaxshake.com
thanks
show de bola!
Hey! Please advise, how do I hide menu when it’s not mouseovered?
I want submenu to appear only when user mouse over it.
Thanks.
this is very nice work. wonderful!
but i have a question. in here we can put only,
Submenu 1
Submenu 2
Submenu 3 etc….
but if want to introduce
Submenu 1
Submenu 1.1
Submenu 1.2
Submenu 1.3
Submenu 2
Submenu 2.1
Submenu 2.2 etc…
in here introduce like this menu is very difficult.
if we can integrate like this menu
http://tympanus.net/codrops/wp-content/uploads/2009/09/css3_dropdown/
to the upward, this will be the best jQuery in the world.
but is it possible ????
Amazing! Thanks for the work on writing this up!
Very nice demo – could definitely see this replacing Flash at some point. I have an issue with it in that it DOES NOT degrade nicely. IN a non-javascript browser (or with Javascript turned off) you lose access to most of the features. Can you address this please? Maybe a revised example? Or a fresh blog post?
Hello! I cant add submenus in correct position. When i add subs, it stay down. Anyone can hep me?
Can this fantastic menu be made to work with more versions of jquery other than 1.0? such as 1.2.6 or 1.3? Other functions I want to use on my site require a higher version of jQuery yet when I change:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
to any other version it does not work!
Hello Lee,
versions 1.2 and 1.3 might be problematic because of some issue with the plugin.
Maybe it’s best to use the latest version:
http://code.jquery.com/jquery-1.4.2.min.js
It works fine with it. Hope it helps, cheers, ML
Hi mary!
is it not possible to use sub menus?
in worpress it is not working can you tell me is there any specification on that
How do I hide menu when it’s not mouseovered. submenu should appear only when user mouse over it.
Mary Lou, this is an awesome, beautiful nav menu; i’ll be tweeting it from imdesigntank.
Hi,
All the works on your site i looked is awesome. Great works and dedication.
thanks
Hi, This is lovely, i’m currently rebuilding my site and intend to use the 4 panel version of your script, hope that’s ok, but I wondered if there was an easy way for the panels to change with a javascript delay, incase the user doesn’t hover over the menu? Thanks again.
Hi Mary,
first of all what a fantastic thing this is. I have just started to re-design my website and absolutly have to have this on it as it fits perfectly with the design I had in mind.
I tried playing around with the file i downloaded before personalising it and it was working fine.
As soon as i moved the code into my own html file it didnt work. Only shows up the one picture.
So i scrapped everything and went through your tutorial step by step but still didnt work.
I would be very grateful if you can help me fix this problem. I have uploaded the page to a subdomain please can you take a look for me?
Many many thanks in advance
http://newsite.rdosolutions.com/services.html
Hi its me again…
Well I figured it out at last… Amazing… It is fantastic… I just need to find out how I can preload the images to make it faster, I also need to play around a bit with positioning and the image on the left seems wrong so need to look into why its like that, so if anyone can help with that I will be very happy…
Once ive done that all I will start to work on the images themselves as they are just temporary…
Thank you so much for this amazing thing you have supplied to the world…
http://newsite.rdosolutions.com/services.html
Maybe it is because I haven’t ad much sleep over the last few days, but for the life of me I cant figure out how to raise the whole thing up to my nav bar and also to get rid of that unsightly thing n the far left image… arrhhgg… I need it to match the home page exactly… please can someone help me??
I have modified this script considerably to dynamically work as a module within the Joomla CMS. However, I would like to have the sub menus hidden, and only appear on mouseover of the parent menu items. No matter what I try in the code I cannot hide the submenu. Can anyone help? The url is:
http://www.beta.tenens.com
Thanks
Lee Tempest
hello Mary Lou, i need some help, I don´t know why the image navigation of my site doesn’t work when I upload it to the server but from my computer it does. Thank you : )
http://cervecitadulce.com/
Hello Mary Lou, i am having problems with the image navigation when I upload my page to the server, but form my computer it works perfectly, any suggestion??? thanks i would really appreciate your help
http://cervecitadulce.com/
:)
INEDESK,
I think your problem is a javascript conflict, you have lots of javascript loading, also the javascript should go in the of your site. I would suggest removing all other javascript calls except for the one to run this menu. The javascript you have at the bottom of your code needs to be before the menu code. Hope that helps!
Lee
AWESOME!
I like some I saw would like to know if anyone can:
1. Have only the nav bar visable until mouseover.
2. Support 2nd level submenus
3. Change the position of the nav bar displayed from the top down, instead of bottom up.
I’ve seen some really great examples out there. I my world of regular commercial work, it would be much more pratical for it to impress, but then disappear while presenting the main page content.
Any ideas?
btw, Mary, I am truely impressed with your creation and knowlege.
Thanks I already solved it , im not sure what I did but it works now , thank very much : ) Lee tempest
buenos efectos y referentes html5