將CSS滑出動畫添加到Reponsive下拉菜單中

Question

我製作了一個非常簡單的響應式導航菜單，該菜單無需任何JavaScript。

在小屏幕上它工作正常。

我曾嘗試過去3個小時，在較小的屏幕上向菜單添加CSS動畫。

我在想什麼：在小屏幕視圖;當點擊≡時，菜單將從左側很好地滑出。

因爲我還在CSS學習的第一級，所以我沒有找到解決方案。

我希望這樣做只能使用CSS。希望這可以沒有JavaScript和Jquery。

這裏是CSS菜單https://jsfiddle.net/edunote/dnvvmmmv/

這裏的的jsfiddle也爲它的CSS和HTML代碼分別。

body{ 
 
    max-width:100%; 
 
    margin:0; 
 
} 
 

 
.navigation-bar{font-size: 14px;color:#FFFFFF; min-height:40px; color: #FFFFFF; 
 
min-height: 40px; 
 
background-color:#3A3A3A; 
 
border-bottom: 1px solid #8E8E88; 
 
z-index: 999999999999999; 
 
width: 100%; 
 
} 
 

 
.navigation-bar input, .navigation-bar label {display: none;} 
 

 
.navigation-bar label { 
 
    text-align: left; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.navigation-bar input:checked + div label {color: #fff;} 
 
.navigation-bar ul{margin: 0; padding: 0;} 
 
.navigation-bar li{list-style: none;margin: 0px 0px;padding: 0px 0px;float: left;position: relative;border-left: 1px #eee solid;} 
 
.navigation-bar li a{display:block;text-decoration:none;color:#fff;line-height:40px;padding:0px 10px;padding-bottom:1px;} 
 
.navdd:after {content:"+";} 
 
.navdd:hover:after {content:"-";} 
 
.navigation-bar li a:hover, .navigation-bar li:hover > a{background-color: #028302;color:#fff;} 
 
.navigation-bar li ul li a:hover, .navigation-bar li ul li:hover >; a{background-color:#028302;} 
 
.navigation-bar li ul {transition: .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;position:absolute;top:100%;left:0px;z-index:99;width:200px; opacity: 0;height: auto;visibility: hidden;background-color:#3A3A3A;} 
 
.navigation-bar .maxer > ul > li > ul {margin-top:-1px;} 
 
.navigation-bar li ul li a {font-size:12px;color:#fff;line-height:30px;} 
 
.navigation-bar li ul li {float:none;display:block;height: 0;transition: .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;font-weight:normal;} 
 
.navigation-bar li ul ul {top:0px;left:100%;border-top: 0;} 
 
.navigation-bar li:hover > ul { opacity: 1;visibility: visible;} 
 
.navigation-bar li:hover > ul li { height: 30px;} 
 
.search form { 
 
max-width: none; 
 
float: right; 
 
margin: 5px 5px 5px 5px; 
 
min-width: 230px; 
 
background: #fff; 
 
border: 1px solid #2D3C70; 
 
position: relative; 
 
height: 30px;} 
 
.search form input { 
 
width: 100%; 
 
display: block!important; 
 
border: 0; 
 
outline: 0; 
 
border-radius: 0!important; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
bottom: 0; 
 
float: left; 
 
right: 0;} 
 
.search {text-indent:5px;background: transparent;} 
 
.search-button { 
 
float: right; 
 
height: 30px!important; 
 
padding: 0!important; 
 
background: transparent; 
 
color: #094AB1; 
 
border: 0!important; 
 
font-size: 22px!important; 
 
cursor: pointer; 
 
z-index: 21; 
 
position: static; 
 
display: inline-block; 
 
right: 0; 
 
} 
 

 

 
@media screen and (max-width:940px) { 
 
.allmenuitems {overflow-wrap: break-word;} 
 
.navigation-bar { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    position: absolute; 
 
} 
 
.navigation-bar label { display: block; 
 
    padding-left: 5px; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    font-family: cursive; 
 
    float: left; 
 
    cursor: pointer; 
 
    font-weight: normal; 
 
    font-size: 50px; 
 
    line-height: 32px 
 
} 
 
.navigation-bar ul {display: none;position:relative; top: 100%;left:0;right:0;background: #242424;z-index:1; 
 

 

 
} 
 
.navigation-bar > .maxer > ul > li {float: none;border-top: 1px solid #3A3A3A;border-bottom: 1px solid #000000;} 
 
.navigation-bar > .maxer > ul > li > a {line-height: 35px;} 
 
.navigation-bar > .maxer > ul > li > ul {margin-bottom: 10px;} 
 
.navigation-bar input:checked + div ul {display: block;position: absolute;} 
 
.navigation-bar li ul li:hover > a, .navigation-bar li:hover > a { background: transparent;} 
 
.navigation-bar a:hover {background:#028302!important} 
 
.navigation-bar li:hover > ul {opacity: 1;} 
 
.navigation-bar li ul {position: static;visibility: visible;opacity: 1;width: auto;background: transparent;} 
 
.navigation-bar li ul li a, .navigation-bar li a {color: #ccc;} 
 
.navigation-bar li ul li ul {} 
 
.navigation-bar li ul li, .navigation-bar li:hover > ul li {height: auto;} 
 
.navigation-bar li ul li {margin-left: 20px;border-left: 2px solid #028302;} 
 
.search form { 
 
min-width: 0; 
 
float: right; 
 
position: absolute; 
 
left: 30px; 
 
right: 0; 
 
margin-left: 20px; 
 
overflow: hidden; 
 
}

<div class='navigation-bar' id='navigation-bar'> 
 
<input id='l1' type='checkbox'/> 
 
<div class='maxer'> 
 
<label for='l1'>&#8801;</label> 
 
<ul class='allmenuitems'> 
 
<li><a href='#'>Home</a></li> 
 
<li><a href='#'>Facebook</a></li> 
 
<li><a href='#'>Google</a></li> 
 
<li><a href='#'>Twitter</a></li> 
 
<li><a href='#'>Softwares</a></li> 
 
<li><a href='#'>SmartPhones</a></li> 
 
<li><a href='#'>Blogger</a></li> 
 
<li><a href='#'>SEO</a></li> 
 
<li><a href='#'>Computer</a></li> 
 
</ul> 
 
<div class='search'> 
 
<form action='/search' id='searchform' method='get'> 
 
<input class='search' name='q' placeholder='Search Here ...' title='Click the form, type your keyword, then hit enter' type='text'/> 
 
</form> 
 
</div> 
 
</div> 
 
</div>

對不起我的英語。請幫助我找到解決方案。非常感謝您閱讀這個問題並回答。

Answer 1

我剛添加以下到最大寬度的媒體統治的結束：940

.maxer:hover > .allmenuitems 
{ display: block; } 
} 

它會顯示在酥料餅盒的菜單項爲小屏幕。也許這可以讓你走向你的最終目的地。

祝你好運！