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

Goran

You have to use JavaScript to do this, CSS is not sufficient. – Hautesalpes

There are plenty snippets tagged with sidebar you may take a look. – Kike

Answer 1

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/

Hogweed

i meant using css, thank you for that, it's what i was looking for! By the way, is using jQuery better than using pure CSS or is it just a matter of choice? – Goran

Well, CSS solution is not always cross-browser compatible, since not all browsers support all CSS properties (Older versions of Internet Explorer are the worst contenders) so you would have to test it on different browsers. On the other hand JS/jQuery solution should be working in all browsers but the loading times are bit slower and if someone has for some reason JavaScript turned off your navigation will break apart. – Hogweed

Answer 2

<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

Metalinguistic

Looks nice but it's not exactly what i need, i need the slideout on a click and not a hover. Thanks anyway! – Goran

@user3004304 go through the link i have provided, hope it helps – Metalinguistic

Answer 3

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

Eurus

Answer 4

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!

Eurus