From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.
There are examples of how to trigger the opening and closing of the menus and some example media queries.
The HTML
<!-- body has the class "cbp-spmenu-push" --> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> <h3>Menu</h3> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> </nav> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> <h3>Menu</h3> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> </nav> <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3"> <h3>Menu</h3> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> </nav> <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4"> <h3>Menu</h3> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> <a href="#">Celery seakale</a> <a href="#">Dulse daikon</a> <a href="#">Zucchini garlic</a> <a href="#">Catsear azuki bean</a> <a href="#">Dandelion bunya</a> <a href="#">Rutabaga</a> </nav> <div class="container"> <div class="main"> <section> <h2>Slide Menus</h2> <!-- Class "cbp-spmenu-open" gets applied to menu --> <button id="showLeft">Show/Hide Left Slide Menu</button> <button id="showRight">Show/Hide Right Slide Menu</button> <button id="showTop">Show/Hide Top Slide Menu</button> <button id="showBottom">Show/Hide Bottom Slide Menu</button> </section> <section class="buttonset"> <h2>Push Menus</h2> <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body --> <button id="showLeftPush">Show/Hide Left Push Menu</button> <button id="showRightPush">Show/Hide Right Push Menu</button> </section> </div> </div>
The CSS
/* General styles for all menus */ .cbp-spmenu { background: #47a3da; position: fixed; } .cbp-spmenu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6; } .cbp-spmenu a { display: block; color: #fff; font-size: 1.1em; font-weight: 300; } .cbp-spmenu a:hover { background: #258ecd; } .cbp-spmenu a:active { background: #afdefa; color: #47a3da; } /* Orientation-dependent styles for the content of the menu */ .cbp-spmenu-vertical { width: 240px; height: 100%; top: 0; z-index: 1000; } .cbp-spmenu-vertical a { border-bottom: 1px solid #258ecd; padding: 1em; } .cbp-spmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; } .cbp-spmenu-horizontal h3 { height: 100%; width: 20%; float: left; } .cbp-spmenu-horizontal a { float: left; width: 20%; padding: 0.8em; border-left: 1px solid #258ecd; } /* Vertical menu that slides from the left or right */ .cbp-spmenu-left { left: -240px; } .cbp-spmenu-right { right: -240px; } .cbp-spmenu-left.cbp-spmenu-open { left: 0px; } .cbp-spmenu-right.cbp-spmenu-open { right: 0px; } /* Horizontal menu that slides from the top or bottom */ .cbp-spmenu-top { top: -150px; } .cbp-spmenu-bottom { bottom: -150px; } .cbp-spmenu-top.cbp-spmenu-open { top: 0px; } .cbp-spmenu-bottom.cbp-spmenu-open { bottom: 0px; } /* Push classes applied to the body */ .cbp-spmenu-push { overflow-x: hidden; position: relative; left: 0; } .cbp-spmenu-push-toright { left: 240px; } .cbp-spmenu-push-toleft { left: -240px; } /* Transitions */ .cbp-spmenu, .cbp-spmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } /* Example media queries */ @media screen and (max-width: 55.1875em){ .cbp-spmenu-horizontal { font-size: 75%; height: 110px; } .cbp-spmenu-top { top: -110px; } .cbp-spmenu-bottom { bottom: -110px; } } @media screen and (max-height: 26.375em){ .cbp-spmenu-vertical { font-size: 90%; width: 190px; } .cbp-spmenu-left, .cbp-spmenu-push-toleft { left: -190px; } .cbp-spmenu-right { right: -190px; } .cbp-spmenu-push-toright { left: 190px; } }
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Note: Classie is being used here – class helper functions by @desandro.
The JavaScript
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ), menuRight = document.getElementById( 'cbp-spmenu-s2' ), menuTop = document.getElementById( 'cbp-spmenu-s3' ), menuBottom = document.getElementById( 'cbp-spmenu-s4' ), showLeft = document.getElementById( 'showLeft' ), showRight = document.getElementById( 'showRight' ), showTop = document.getElementById( 'showTop' ), showBottom = document.getElementById( 'showBottom' ), showLeftPush = document.getElementById( 'showLeftPush' ), showRightPush = document.getElementById( 'showRightPush' ), body = document.body; showLeft.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( menuLeft, 'cbp-spmenu-open' ); disableOther( 'showLeft' ); }; showRight.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRight' ); }; showTop.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( menuTop, 'cbp-spmenu-open' ); disableOther( 'showTop' ); }; showBottom.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( menuBottom, 'cbp-spmenu-open' ); disableOther( 'showBottom' ); }; showLeftPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toright' ); classie.toggle( menuLeft, 'cbp-spmenu-open' ); disableOther( 'showLeftPush' ); }; showRightPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toleft' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRightPush' ); }; function disableOther( button ) { if( button !== 'showLeft' ) { classie.toggle( showLeft, 'disabled' ); } if( button !== 'showRight' ) { classie.toggle( showRight, 'disabled' ); } if( button !== 'showTop' ) { classie.toggle( showTop, 'disabled' ); } if( button !== 'showBottom' ) { classie.toggle( showBottom, 'disabled' ); } if( button !== 'showLeftPush' ) { classie.toggle( showLeftPush, 'disabled' ); } if( button !== 'showRightPush' ) { classie.toggle( showRightPush, 'disabled' ); } }
Like win8 metro UI? I like it?Thank for share?
You guys are THE BOMB :D!
I am not sure if I am right, but isn’t translating smoother than using
left
orright
properties?And I am glad you guys covered this. I used the “Show/Hide left push menu” in my previous blog design. 😀
Great tutorial btw!
Thousan of thousand thx… you guys help million web dev. with amazing tutorial and plugins, hope all the best for codrops team… Thank You Very Much!
I wish there was a way to have a close button in the open menu so I didn’t have to click the button in the body to close the slide menu.
You can put the open/close button inside the menu div. Then you can just set the positioning of the menu button to push it outside of the container, so that even if the menu itself is hidden, the button will still show. For example, if your menu is hidden off the left side of the page, use a negative “right” positioning on the menu button. Hope this helps!
That or you can leave it in the main body if you’re using the “push”-style menu, and just position it along whatever edge your menu flies out from. Check out http://mikedidthis-pierre.tumblr.com/ as a reference.
try this, the mene is active only in the small screen so resize the page http://www.mariopetrone.info/menufb/ if you click in the body the menu close..
http://www.mariopetrone.info/menufb/
it’s…beutiful!
You are awesome! This amazing post – I was just about to make such thing today and you saved me a lot of coding. Big thank you!
Simply awesome!
Nicely done.
I’m thinking to create jQuery version of this menu. Of course with credit link to your article/website. What do you think?
It would be better for performance on mobile browsers if you use 3d transform (translate) instead of left/right/top/bottom and it would be good to let the user click/tap outside the menu to close. I did a CSS only version recently: valdelama.com/css-responsive-navigation using 3d transform
Hi Dan,
I saw the javascript version and i liked it so much and want to try it out. U are using the-href=”css/jPushMenu.css” where is the files for that
Thanks that’s awesome! i’ve use it for the front-end of out database!
Hi, how can I close for exemple menuLeft by clicking outside menuLeft div on the screen?? Thx!
Hi, I made jQuery version for this. http://takien.github.io/jPushMenu/
Thanks for making this plugin! Great work. Perhaps it would be a good idea to use the css version with a fallback to your jQuery if not supported. Would you be interested in combining these into one plugin?
oww thx man!
I like your jQuery version a lot! Is there a way to have the menu slide in when the page loads? I’m using left-menu, slide not push. Thanks!
This is perfect, great work!
One question: Is it possible to make it “touch swipable” ?
Thanks!
I saw the javascript version and i liked it so much and want to try it out. U are using the-href=”css/jPushMenu.css” where is the files for that
It’s decent… I’d use a better transition… like a cubic bezier.
-webkit-transition:all 0.2s cubic-bezier(.16,.68,.43,.99);
You could make this all in CSS… This site has plenty of examples of utilizing CSS3 pseudo selectors for simulated click events. Think of this as presentation layer and that’s what CSS should be responsible for. You can use a radio button for an on or off state or a checkbox…
Very Nice yesterday i create like this artikel But with Overlay Effect
Love the functionality and it sure opens a lot of possibilities for design and builds. Great work! First time (well, second technically) visitor. Excellent resource and looking forward to more great reads!
Love the theme, would be great if it was converted to a WordPress Theme.
I’ve been trying, but can’t quite get there.
Can somebody tell me how to detect if the right/left menu is open or not? Or how to make two separated functions for close and open menus with two different buttons?
thx!
Incredible and it works in IE7 even if a little less smooth. Is it possible to have the menus open when working on larger screens and having them dissapear only on smaller screens?
hi ugo, i’m trying to do something of similar but in project try a first release.. the menu is active only in a small screen and work on swipe left and swipe right for close it let me know
http://www.mariopetrone.info/menufb/
This is so good, all of your examples are the best I’ve seen, and easy to navigate, well played.
Would anyone know how to make this bounce on page load. I am using it for my nav and if the browser isn’t mobile it is always open, but if it is mobile it is hidden and you have to swipe right to open the nav, the only problem is the user doesn’t know this. So I wanted to make it so that when the page loads the bar basically does a quick bounce animation, similar to how the linkedin app on ios works.
Hi,
I am using the push left menu but it will not let me scroll with the browser or mobile. Any idea how to solve this?
Thanks,
Nep
Try adding this to the element:
-webkit-overflow-scrolling: touch; /* this makes the div (or nav) element scrollable for iOS5+ */
overflow-y: scroll;
This will only work properly for iOS5 and higher (maybe some android browsers aswell, haven’t tested it). It should also work in all desktop browsers with a scrollbar inside the menu.
By the way, awesome implementation of this menu style. I was using another method before but I much prefer this one. Great work!
Hi!
Great work as usual!
One question?
How can hide the “show” button after click?
thank you very much
within a single ‘form’ reloading the page as I can do to prevent this from happening?
This works great, I was just wondering, how can I make the menu close if the user clicks anywhere outside it?
Does anyone know how to hide the menu after an anchor has been selected?
that’s what I wanted to know….. anyone know???
Hi,
I use this “script” but I “customed” it :
– I prefer “transform: translate(240px, 0);” to “left:240px”, it’s much much better interpreted by iPhone
– I used http://cubiq.org/iscroll-4 to scroll in the menu
To Kurt
to hide the menu you need to use the “disableOther” function, and code 😉
Good one, this is exactly what I need!
Are there any ways to hide the borders when we focus on the input box at mobile?
The border of the menu div will shows once the screen is zoomed in.
Thanks.
Hi. I’ve got this working on WordPress, and it looks great. One problem though, I can only open the menu from the home page when re-sized to mobile layout. If I try to open the menu from any other page like ‘about’ it doesn’t open.
Any help please? Thanks in advanced.
Hello Helms, how did you manage to get this working in wordpress, please drop me an email on chinedu40@gmail.com
Hi,
wow, what a css! 🙂
may you help me how can i change the width of the hidden menu?
i tried to change 240px and 190 px for something like 30% but it didnt worked as expected! :/
(i want to display the JsSip widget, at least as a test, and it is not fully hidded :/ )
thanks and congrats for this really nice code!
Hi,
I get this error from chrome:
Uncaught TypeError: Cannot set property ‘onclick’ of null —– slide-menu.js:13
Can somebody help with that?
Try load the function first with this code before your script:
window.onload = function() {
// Code goes here //
};
Love the tutorial, really awesome! One question, how to create a sub-menu in this?
for the push, is there anyway to have to push from the top or bottom?
I was wondering why the menu is fixed on mobile? I mean, if you have more than 5-8 links, one can’t see the the links passed the mobile display. Just sayin.
Never mind. I figured out 😉
Hey Mick, I have the same issue…any tips?
Hi,
I’ve trying for quite some time now, but just can’t seem to figure it out. I hope someone can help me, I’d really appreaciate it.
I would really like to know how I can have a menu (I’m using the showLeft) slide back again after clicking on one of the anchors/links.
Thanks!
Figured it out. Added this to the script (I’m using the Left Slide Menu):
menuLeft.onclick = function () {
classie.toggle( this, ‘active’ );
classie.toggle( menuLeft, ‘cbp-spmenu-open’ );
};
Have yet to figure out how to hide the menu when clicking the rest of the sceen. Adding a body.onclick will work, like this:
body.onclick = function () {
classie.toggle( this, ‘active’ );
classie.toggle( menuLeft, ‘cbp-spmenu-open’ );
};
but it will also opens the menu. And I only want to be able to close the menu when clicking the body…
Hi all,
instead of disable buttons, is possible to close other menus when i click a button?
For example, if i already clicked top menu and now click right, i would to hide top menu,
i tried hide() but don’t works good:
showRight.onclick = function() { $(".cbp-spmenu-top").hide(); classie.toggle( this, 'active' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRight' ); }; showTop.onclick = function() { $( ".cbp-spmenu-right").hide(); classie.toggle( this, 'active' ); classie.toggle( menuTop, 'cbp-spmenu-open' ); disableOther( 'showTop' ); };
Some suggestions please?
Tnx 🙂
How can i use this Slide menu in wordpress?.
Good day,
On your “slide and push menus” I was wondering is there a way to scroll within the vertical slide menu just like in the Facebook mobile menu?
Also is there a way once inside the slider DIV I can stop the main class DIV from being moved and affected whilst in the slide DIV?
Any assistance would be greatly appreciated.
Kind regards,
Byron
I rebuilt the menu in jQuery and in order to have your content body not scroll when menu is open, you just do body.classToggle(‘className’); with your class name being a style with overflow: hidden. Hope that helps.
Great tutorial! It’s possible to have menu opened for default?
I would like to know this as well…
I really wish someone could find out how to show the menu on page load! window.onload doesn’t work. please help!
Will this work on mobile responsively?
Yes
Is it possible to place a close button near the menu title? Once the menu slides open you have to toggle the menu closed using the same button, I would like to the menu to slide closed using a button inside the navigation for ease of use.
@Byron –
If you add the property “overflow-y: scroll” to the open class of the menu nav element, you should have vertical scrolling.
My issue that I am running into is eliminating the x-axis scrolling for the main content once the menu is open for push menus. Any tricks I’m missing?
Is it possible to incorporate multi-level menu to this? Has anyone tried that?
Very cool! I’m already implementing on my website. The problem is, I cannot align the menu. It’s alway at the center. Any tips on how I can do that? I’ve searched on the .css but no lucky.
It’s close to perfect, just a few things 😉
1. Auto close menu when scrolling page/body
2. Disable horizontal body scroll when menu is open
3. Close menu when click in body doesn’t seem to work?
Please help me out..?
Cheers!
Have you figured out how to close the nav once open if you click on the body?? Is so, please let me know!
#3 it doesn’t work in iOS*
Mary, this is so awesome. Thanks for all your wonderful code sharing!
I tried jquery mobile and didn’t like it cause it was too hard to overwrite the css.. their styles/themes are so ugly.. This is much prettier..flat style.. 🙂
Looks like the mobile issue is fixed? I see some comments below but it is working on my mobile.. (android and ios)
thanks again