Beautiful Background Image Navigation with jQuery

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 […]

From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.

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.

Note: There is a new version which let’s you customize things better:
Sliding Background Image Menu with jQuery

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.

Message from TestkingIf want to learn professional web designing but have no time to attent regular class then testking a+ is best solution though. Download the testking mcse design tutorials and testking VCP-410 study guide to learn how to create beautiful and unique logo designs.
Previous:
Next:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 335

Comments are closed.
  1. 1

    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?

  2. 2

    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!

  3. 4

    Simply marvelous.. exactly like flash animation but file size would be much smaller than that. Great work. Thanks for sharing with us.

  4. 5

    I love this feature! I will most certainly be using it in one of my next designs.

  5. 6

    @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!

  6. 7

    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.

    • 9

      @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

  7. 10

    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.

    • 11

      @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

  8. 12

    @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 🙁

  9. 13

    @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?

  10. 14

    @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.

  11. 15

    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)

  12. 16

    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…?

  13. 17

    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.

  14. 18

    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…!!!

  15. 19

    you need to make sure you have the following in your CSS doc
    *{
    margin:0;
    padding:0;
    }

  16. 20

    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

  17. 22

    Ratnakar: Perhaps also pre-loading images might be a good idea. First hover for me showed a delay whilst images were being loaded …

Comments are closed.