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.

By in Playground on
Demo Download

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Reflection Scroll Effect

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

Creating Native Web Components

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 90

Comments are closed.

  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!

  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

  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 !

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

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

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

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

  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.

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

  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.

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

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

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

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

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

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

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

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

  29. testing this script for Dank Organics.

    we prefer the fade option

    very nice

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

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

  33. 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?

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

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

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

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

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

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

  41. 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??

  43. 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!!!

  44. 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!

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

  46. 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!!

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

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

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

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