Sliding Background Image Menu with jQuery

Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.
SlidingBackgroundImageMenu

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

Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

The idea of this navigation is based on the Beautiful Background Image Navigation with jQuery, a tutorial that had a similar effect. Since it was very popular and a lot of our readers asked for some very useful additions, we decided to revamp it and make it easier to customize.

The beautiful gastronomy photography is by Manoel Petry:
Manoel Petry’s Flickr Photostream
Manoel Petry’s Website
The images are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic License.

Examples

Take a look at all the examples (you can also navigate from them to all the other demos):

The HTML structure consists of the “sbi_container” which will have all the panels inside:

<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">About</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

The “data-bg” attribute contains the path to the background image that will appear when hovering over the label of the respective panel.

Let’s take a look at an example for using the alternating vertical up/down sliding effect:

$('#sbi_container').bgImageMenu({
	defaultBg	: 'images/default.jpg',
	menuSpeed	: 300,
	border		: 1,
	type		: {
		mode		: 'verticalSlideAlt',
		speed		: 450,
		easing		: 'easeOutBack'
	}
});

The following parameters can be used/set:
defaultBg: the default image shown when no label is hovered
pos: if no defaultBg set, pos will indicate the panel that should be shown/open
width: the width of the container and the images (they should all be of the same size)
height: the height of the container and the images
border: the width of the margin between the panels
menuSpeed: the speed with which the menu should slide up

mode: the type of animation; you can use def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt
speed: the speed of the panel animation
easing: the easing effect for the animation
seqfactor: delay between each item animation for seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt

We hope you find this little menu interesting and useful, enjoy!

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 90

Comments are closed.
  1. 1

    Fisrt of all – Awsome scripting!
    I was playing around with code when I noticed a spacing problem when I modify the subitems menu. Every time I add a space to the subiten text the bottom of the container adds a space increasing the distance below the menu list. Any hint how to resolve this??

  2. 3

    Love the script!!!!

    I’m currently attempting to build a website (not just a blog) in wordpress. I’m building it locally using MAMP and I really want to use this sweet design for my home page.

    The trouble is I’m totally new to this stuff and can’t get it into wordpress… i tried to add it as a plug in via both the upload through wordpress and by putting it in /wp-content/plugins on my computer.

    When I tried to upload it I get the error message “The plugin does not have a valid header.”

    Any help would be greatly appreciated!!!

  3. 4

    This is an amazing effect and we are looking to use it in our new website.

    However, we too are running into the issue that the menu height is wrong if there are spaces in the text and I think I’ve tracked it down to an apparent bug in .outerHeight(true) on line 29:

    $el.data( ‘height’, $el.outerHeight(true) ).css( ‘height’, ‘0px’ ).show();

    My solution (which isn’t great) is in the definition of the problematic line to define the height specifically, such as:

    Obviously something more elegant would be better, but at least this works.

    Finally, if anyone has figured out how to make the pop-up menus, pop-downwards, I would love to know how to do that too!

  4. 5

    really nice! the customization properties are amazing! now you made me wanna code some javascript.

  5. 6

    Hi! Great work!!
    Just a question: is it possible to obtain the same effect when the mouse is over a submenu item? How can I do it?

    Thank you for all!!

  6. 7

    Great stuff!!

    Are there any working examples of this (besides the demo)? Am looking for a few ideas on how to present sub pages…

    Thanks.

  7. 8

    Hello, to begin with I want to tell many thanks for a lesson! Grandiose work! And at me a small question: as well as where to change a font, for example, for Russian (((through google did, but as a result only small squares… I will be very grateful for council! My e-mail – 9208806 @ mail . ru

    In advance many thanks. Already the head is ill to think (((Excuse for my bad English.

  8. 9

    Thank you, Mary Lou! I used this for http://www.glitzylips.com. I made a slight modification to the code to flag “active” menu items… otherwise, it’s all yours! It looks great across all platforms, even IE7.

  9. 10

    i’m using this control as a demo for a design… im not an expert by no means but what i want to do is have the default picture change depending on the url..

    what i have done is made a 1/3×2/3 page… left side has content while the right is the jquery picture menu. I didn’t do sub items… i want the default picture to be related to what i click….

    For example: If i click on dogs… the page loads… the left content section shows the dog information… the right side still has the menu but the default needs to change to dogs and not a general picture… and if i click on cats… it has a cat picture as the default… I know i could create multiple pages or etc. I’m using drupal and i’m using the same basic page (node) that has my jquery menu on all of the other pages… i hope i didn’t confuse anyone… any help would be appreciated

  10. 11

    Hi, great menu! Are there any examples of it being used with WordPress or even better is it available as a WordPress plugin?

  11. 12

    guys, it is pretty simple to fix the loooooong window, on index.html just add some styling.

    For instance, for the third slide I added this:

    Window no longer grows. I can put as many items, sentences as much as I want.

    Hope it helps you!

  12. 14

    The menu height is incorrect if there are spaces in the text. How do you fix this?

    Thanks for your assistance.

  13. 16

    i cant see the codes in your solutions regarding to fixing the growing window.
    could you help me.
    thanks

  14. 19

    thank you for the tutorial.

    Can anyone explain to me how I can combine this with a lightbox video like Quietone has done? Without the javascript from this tutorial the lightbox pops-up fine, but when I add the javascript it won’t pop-up anymore, but instead just goes to the video page. I would really appreciate it if anyone has a solution

Comments are closed.