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 is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

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!

Tagged with:

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.

http://www.codrops.com

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

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. @PABLINHO….I agree with your point of view regarding users with JS disabled. A thousand times over, I agree. It’s perhaps “an argument” that could be made, but it’s just not a compelling argument. A relic of days gone by, like “web safe colors” schemes.

  2. You guys are artists…your work is like art not only Jquery …php….keep it up

  3. @PABLINHO / @Mike

    I still have to disagree. I have no problem if the slider is not working or the dropdown menu or the light box or or or.
    But you always have to hold in mind that you have to make a website accessible it is not a big leap to make a JS free fallback.
    Another Problem could be that the .js is not available through a server/client erros.

    That are all small things but as a good developer you have to hold them in mind and the main menu is the most important part of a Website, it hast to work no matter what so ever.

    It would be enough that ther is one background image and that the links are visible. It should not be to much of a problem, like I said 30 Minutes of work on code I didn´t write and the navigation was visible.

    And the 1% of no JS are just part of the problem there are enough NoScrip guys out there. Who knows how many have no idear what they are doing with the addon?

  4. Mary lou and Douglas: i just upload it , i’m sorry!! it shows awesome, sorry :s.
    Mary lou Im a big fan!!?

  5. Mary Lou, this is just awesome! Thank you so much!!!

    @Mark: you are absolutely right, but remember that this is just a tutorial and you are free to tweak it to your liking if you want to use it on a real website

  6. Ok so I played a bit more with the script and I could fix the no JS problem pretty easy.

    That about what I did,
    .sbi_container gets an background image, a fixed hight and width.
    .sbi_panel has a fixed width
    .sbi_content loosed its display:none
    the only problem is the margin-right: given in the elects with .sbi_panel through .js but it could be avoided through two elements with a on witch I applied the CSS changes.
    .nojs .sbi_container { jadajada}

    I did not test it on all browsers and it could use some tweaking but I can´t spare more time before the weekend.

  7. Thanks for posting up a great tutorial, from having a quick look at the source it seems like this really is a simple and easy to implement slider/background. I look forward to using this on an up and coming project, and tweaking the CSS for that simple js fallback…just in case.

  8. testing this script for Dank Organics.

    we prefer the fade option

    very nice

  9. Hello 🙂 I have used your fantastic layout, but can’t find within the css where I can reduce the size of the sub menu. if you can spare the time it would be highly appreciated

    thanks again

  10. if u move very fast few times your mouse up to menu and down away from menu( to one of the menu only), the image will not return to the default image.

  11. Great work!
    I noticed that if I don’t include any sub items in sbi_content (in order to not display any submenu), the menu header becomes slightly smaller than those with content:

    Home

    Is there a way to avoid this?

  12. In Internet Explorer 8 (and 7), when I view the sliding background image menu page, there is an extra set of vertical and horizontal scroll bars on the page, as if the page were inside an iframe or something. This doesn’t occur in Firefox or Chrome, but I really need it to look right in IE. Is there any way to fix this?
    Thanks,
    RB

  13. Stellar, Mary Lou. What I’d like to see is the animation go below, not above, the image. Is this doable?

    Also I’ve been having a hard time finding the CSS that controls the height of the sub-menu when it slides into view.

  14. Regarding the Internet Explorer issue with the extra inset scroll bars, I found that this problem only occurs on my local copy of the webpage. Once I uploaded it to the web server, the problem went away.

    RB

  15. Hi Mary Lou, works great. Is there a way to let the submenu sbi_content slide down.

  16. Mary Lou, would you help please fix one problem…

    if i write instead “Subitem” some other two or three words space between “sbi_label” and “ul list” in “sbi_content” is growing…

    So, if one word (no space between) it is working good, with two or three words space is too LARGE

    can not find how to fix it 🙁

    Thank you

  17. Me gustaria realizar 2 cambios:
    1.- Mover la barra del menu
    2.- El texto del menu ponerlo en color blanco.
    Gracias y un saludo