i've been looking around for tutorials on how to make a simple sidebar menu for a site that can fold in & out by clicking on a home button next to the sidebar menu, much like how main menus are opened in apps by clicking on a hamburger icon. I can't really find what i'm looking for, maybe i'm not using the right terminology.
Any help is appreciated, thx
B
Not sure what kind of solution do you want, pure CSS, JS, jQuery etc but here are some links to get you started.
Try searching for "css slide out sidebar" or something along those lines
jQuery examples
http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/
http://www.berriart.com/sidr/
http://mmenu.frebsite.nl/
http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/
CSS Example
http://css-tricks.com/off-canvas-menu-with-css-target/
<div id="slideout">
<img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
<div id="slideout_inner">Hi Welcome to Stack Overflow</div>
</div>
CSS
#slideout {
position: fixed;
top: 40px;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout_inner {
position: fixed;
top: 40px;
left: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
img {
width:100px;
height:100px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With