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爲更好地說明。乾杯!