From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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):
- 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 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!
Hi, great menu! Are there any examples of it being used with WordPress or even better is it available as a WordPress plugin?
guys, it is pretty simple to fix the loooooong window, on index.html just add some styling.
For instance, for the third slide I added this:
Window no longer grows. I can put as many items, sentences as much as I want.
Hope it helps you!
oww!! it’s great..
The menu height is incorrect if there are spaces in the text. How do you fix this?
Thanks for your assistance.
Awesome, as always! I really love your work!
i cant see the codes in your solutions regarding to fixing the growing window.
could you help me.
thanks
Ok, on the div of the slide add this: style
= height : 40 pixels
That’s it.
thanks for your solution
thank you for the tutorial.
Can anyone explain to me how I can combine this with a lightbox video like Quietone has done? Without the javascript from this tutorial the lightbox pops-up fine, but when I add the javascript it won’t pop-up anymore, but instead just goes to the video page. I would really appreciate it if anyone has a solution
Hi ,,
thanks for this script .. but can i control the width of sbi_content ?
Love your menu system – we are having issues with IE7. Your pop-up sub navigation appears underneath any div that’s physically above it. In this sample (in IE7) the sub-nav for Approach goes behind the logo.
http://aldodesign.net/demo/menudemo/submenu.php
Any solution?
Hi there, I am kinda new to this but I love your stuff, can you tell me how I would position this menu on the page.
And thanks
Hi, I tested it on iPad and it does’nt work. I think iPad’s Safari doesn’t behave like desktop Safari.
You can check it at
http://alexw.me/ipad2/#!safari
I can’t see the images (you can test the demo page)
BTW, great plugin!
Does anyone made it with autoplay ?
Amazing!!!! Thanks for sharing. It is a great tutorial and the end result is awesome.
Hi, it seems that the script doesn’t support width in %
How can I solve that to adjust the width to the screen size (width and height).
http://goo.gl/cFjFH
Thank you very much and compliments for the script!
you could change the size in the jquery.bgImageMenu.js 🙂
Hi Andrew, thank you very much for your answer! Unfortunately in the jquery.bgImageMenu.js the sizes there are only in px and not in %
I can’t figure out the solution ;(
Do you have any idea?
Awesome !
default background / pos
would it be possible to either have an ‘on load’ background, which appeared on load but would not return on mouse out, as the default background does, or alternatively if using pos, not display the sumbenu items by default
If you use style on the html div for the menu height it will crash in Chrome.
However if you use the ascii code for spaces in the menus it will not make that bottom big gap and displays perfectly. 😉
I have been experimenting with Sliding Background Image Menuwith jQuery.
I have noticed that if one swipes their mouse across a menu, causing the background image to change, it stays locked. The original (primary) background image does not return.
Same with me. It would be very nice, if one could solve this problem… Great work though!!!
First of all, thanks a lot for this great tutorial!
but, please, I need your help. I was testing my panel in Firefox, IE 9 and Chrome. It doesn’t work in Chrome (15.0.874.121 m).
Please, look it at:
http://www.sj.uphero.com
http://www.sj.uphero.com/2/example3.html
The problem is that the jQuery animation effect works fine in Firefox an IE, but it’s not working in Chrome a tall, and it only shows the panels (without any animation….)
Please, help me and again, thanks for your post!
Hi Seba,
I just looked at the pages and it works fine for me, but I have version 16.0.912.63 m which is the latest stable release. Can you check in the console if any errors show up? When you are in Chrome, just hit F12 and click on “Console”. Hope it helps somehow, cheers, ML
I did some changes in the script’s options ( ‘speed’ in 400 and ‘seqfactor’ in 400 ) and now it’s working better, but I’m not convinced.
The console doesn’t show any errors, so I’m going to assume that chrome has a diference in the interpretation of the easing effect, or something like that.
is there any posibility to move the panels in an automated way? That would be a great beahvior!
Love the plug-in, looks great. I’m testing it at http://www.conceptbrandinggroup.com/home2 and I was wondering if there is a way to have the image slide remain in place when you move the mouse off the menu, instead of automatically returning to the default image?
Thank you.
very nice plugin, but I’m missing the opening menus, when tabbing…
Beautiful Plugin !
I’m thinking of using this for the site of a local folk artist. She has no intention of selling her work currently but may in the future. I notice the license is “non-commercial”. If I use this, will we have to remove it if she begins to sell her work ? (Also, how do you like to be attributed ?)
Thanks much – great work !
Hello –
When making the submenus, if I name one Our Mission, the submenu adds an additional Line, meaning its interpreting the whitespace as a line. This is observed in both IE9 and Chrome. Any advice/help?
HI
Any one knows if it works on IE9. I tested on my page with this Beautiful Plugin, but it didn’t work on IE9.
It is too bad to me. I really like to use it on my site. Please help me if anyone know how it works on IE9.
Thanks
June
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.
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!!!
Hola, la solucion es esta,
$(document).ready(function(){ $('a').on('click',function(evt){if($(this).attr('href')==='#'){evt.preventDefault();}}); });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!
Awesome work!!!! Simply amazing
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….
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
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!
Nice work! I have one question, how can I let slip the submenu down instead of up? THX