css为侧栏菜单折叠进出

Question

我一直在寻找教程如何为一个网站，可以折叠在&出一个简单的侧边栏菜单通过单击侧边栏菜单旁边的主页按钮，非常类似于通过点击汉堡图标在应用程序中打开主菜单。 我无法真正找到我在找什么，也许我没有使用正确的术语。

任何帮助表示赞赏， THX

乙

Answer 1

不知道你想要什么样的解决方案，纯CSS，JS和jQuery等，但这里有一些链接，让你开始。

尝试搜索 “的CSS滑出边栏” 或类似的规定

jQuery的例子

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实施例

http://css-tricks.com/off-canvas-menu-with-css-target/

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

Answer 3

我已经改变的CSS代码（例如，从Amarnath），一点点。仅用于测试目的。所以我可以更好地理解这个功能。也许它可以帮助别人......

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

Answer 4

对不起，如果它很无聊，但这里又是一个例子。在这里，我们有一个horizo​​ntaly可折叠条：

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

的颜色是痘痘咬creazy，但这SERV为更好地说明。干杯!