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.


View demoDownload source
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!

View demoDownload source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 90

Comments are closed.
  1. 1

    Hi,

    im was palying arround a bit with that great menu trying to find out, how to seperate the menu from the picture; so that you have a menu bar above and not inside the pictures. Any ideas how to manage this?

    thx for this tutorials anyway, its so great to have all that tutorials and ideas for free ant your site.

  2. 2

    It’s really wonderful script. Can you please suggest me how i can add a text/link on top of banner for one of the link.
    pls help!!!

    • 3

      Hola, la solucion es esta,

      $(document).ready(function(){
      $('a').on('click',function(evt){if($(this).attr('href')==='#'){evt.preventDefault();}});
      });

  3. 4

    How i can set one different image for every div “sbi_content”? For every button..
    Como puedo poner una imagen diferente para cada div “sbi_content”? Para cada boton..

    Only one pattern.png? Ot i can set pattern2, pattetn3, pattern4… ??

    Thx!

  4. 6

    First: Thanks Mary Lou for your time & knowledge!

    I tried to do what Patrizius wants with no luck (but I am newbie), just raised menu to top of picture & blended in with background.
    Also, what I want/tried to do with no luck so far, is make the image panel itself a click-able link instead of a menu item selection.
    Can anyone point me in the right direction?

    I have so much so learn….

  5. 7

    Hi mam,

    Fabulous work. I am trying to implement the script for my office project. But I like that mouseover effect on click main menu link, which will be on the top and the content and the banner will be on complete div( I will do that by changing in css).
    I am not getting that where to change for mouseover to click function.

    Thank a lot if you can help me out for this issue.

    Regards
    Seema

  6. 8

    Very nice indeed!
    This script will work nice for sites with a big splash-screen popular with would-be webdesigners, but unfortunately it is just usable for professional websites. That’s a real real pitty for you have obviously put a lot of time into it and the setup of the programming is absolutely stunning!
    Main issues:

    - calculation of the height of sbi_content is not correct
    - width of sbi_content is not calculated by width if items (and cannot be set to a default fixed width by a parameter)
    - time-out programming is still sloppy > menu still freezes too often when mouse moves quickly over menu
    - no fall-back to non-javascript interface (why not use nested LI’s instead of Divs ?)
    - setting of ‘open’ menu is cumbersome
    - difficult to integrate with a menu generated by PHP because style settings of various stages are too limited (should be: normal / active / open – each with seperate A-elements hover-style)

    Fixing these would not be too much work for a skilled programmer like yourself. And then I’m sure you’ll have winner with this very sought-after menu-effect!

  7. 9

    Nice work! I have one question, how can I let slip the submenu down instead of up? THX

Comments are closed.