Question

我制作了一个非常简单的自适应导航菜单，无需任何JavaScript即可使用。

在小屏幕上工作正常。

过去3个小时我尝试在较小的屏幕中为菜单添加CSS动画。

我在尝试什么：在小屏幕视图上;单击≡时，菜单将从左侧滑出。

由于我仍然处于CSS学习的第1级，我无法找到解决方案。

我希望只使用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

我刚刚在媒体规则max-width：940

的末尾添加了以下内容

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

它将在小屏幕的弹出框中显示菜单项。也许这可以让你走向最终目的地。

祝你好运！

将CSS幻灯片动画添加到“响应下拉菜单”

1 个答案: