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

    Hi mary lou!! (i had to opened with moxilla cause in chrome it doesn’t work!) great great tutorial, one more time, you blow me away! very nice, thank you!

  2. 3

    Emmanuel, can you tell me which version of Chrome you have? I have 12.0 and it works fine. Thanks a lot, cheers, ML

  3. 4

    Another great tutorial Mary, really nice for stores or brand websites…

    thanks for share ! congrats !

    PD: using 14.0.803.0 dev-m it’s work great !

  4. 5

    Beautiful layout. Congratulations on the nice job. Waiting anxiously for the next tutorial!

  5. 9

    Is this slider free for commercial use, provided I give credit to the creator of course?

  6. 10

    Wow! Te luciste en esta!
    AWE-SOME! Very inspiring. As always you rock the whole house!

  7. 13

    You never fail to impress me with your impressive and simple jQuery tutorials! Very nice Mary Lou!

  8. 16

    Looks great and is pretty easy to use put it has no fallback if js is deactivated.

    So if JS is off you see nothing at all.

    I just tinkered with the CSS(mostly) for half an hour and was able to at least display the menu when JS was disabled.

    It is, in my opinion, unusable in the current state.

    A menu hast to be displayed all the time for all users.

    The old version of the menu is mostly working with js off.

  9. 18

    Great slider !, will give it a try.. also, it does not seem too hard to implement.

  10. 19

    @Mark I still wonder who disables JS and if you should really care for them, last time i saw they account for less than 1% of users.

    Given today’s JS centered web, and the minimal percentage of users paranoid enough to disable JS, I believe we should not waste any time trying to accommodate them.

    Just my thoughts.

  11. 20

    This is simply amazing! Great work, thank you so much for sharing this content. It’s pretty useful to learn new things

Comments are closed.