css for a sidebar menu that folds in and out

Question

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 li

Answer 1

<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;
}

Working Fiddle

Source Code

Demo

Answer 2

Sorry if it is boring, but here is an another example yet. Here we have an horizontaly foldable bar:

#slideout {
    position: fixed;

    top: 0px;
    height: 10px;
    left: 0px;
    right: 0px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    top: 50px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: -50px;
    height: 50px;
    left: 0px;
    right: 0px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: magenta;
}

The colors are a litle bite creazy, but this serv as to better illustrate. Cheers!

Answer 3

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/

Answer 4

I have changed the css code (example from Amarnath), a little bit. For testing-purposes only. So I can the function better understand. Maybe it can help someone...

#slideout {
    position: fixed;

    top: 0px;
    left: 0;
    width: 10px;
    height: 100px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    left: 180px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: 0px;
    left: -180px;
    width: 180px;
    height: 100px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    left: 0;
    background-color: magenta;
}