问题

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

回答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/

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

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

回答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!

来源：https://stackoverflow.com/questions/21425244/css-for-a-sidebar-menu-that-folds-in-and-out

标签

css

sidebar

css for a sidebar menu that folds in and out

问题