SBI Menu jQuery

Hi I am interested in having the details for Sliding Background Image Menu with jQuery menu and its utilization?

[sumit]

Sliding Background Image Menu with jQuery will have a few boards, every one comparing to an alternate foundation picture that will appear on all boards when it is drifted over a board name. Likewise, a submenu will slide out from the base. This menu accompanies some setup conceivable outcomes, for example, size of the picture, the float impact and custom default states.

The possibility of this route depends on the Beautiful Background Image Navigation with jQuery, an instructional exercise that had a comparative impact. Since it was exceptionally mainstream and a great deal of our perusers requested some extremely valuable augmentations, we chose to patch up it and make it simpler to redo.

Examples

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

Show/hide
Fade
Sequential fade
Side slide
Side slide (bounce)
Sequential slide
Up/down
Sequential up/down
Alternating up/down
Alternating up/down (2)
Sequential alternating up/down

The HTML structure comprises 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 pathway to the background image that will appear when hovering over the label of the respective panel.

Let’s take a look at an example by means of 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