解答:谜语者解答
更新:新版本:
一切正常,但菜单在1368屏幕上可见,我只想显示768或1024或任何屏幕尺寸更低的菜单。
实际上,我在我的网站中嵌入了一个菜单,它的工作正常,但我想在菜单上做一个小改动。
因为我想禁用全视图,只想让移动视图只意味着响应式设计,但我尝试使用显示:hide,,,我没有工作。。
请帮忙。
HTML代码:
<div class="eos-menu" id="menu">
<div class="eos-menu-title">Welcome to eosMenu Plugin<i class="fa fa-bars fa-lg eos-pull-right" aria-hidden="true"></i></div>
<div class="eos-menu-content">
<li class="eos-item">
<a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
</li>
<div class="eos-group-title"><i class="fa fa-envelope" aria-hidden="true"></i> Contact Us</div>
<div class="eos-group-title"><i class="fa fa-user" aria-hidden="true"></i> Profile <i class="fa fa-angle-right fa-lg eos-pull-right" aria-hidden="true"></i></div>
<div class="eos-group-content">
<li class="eos-item">
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> New User</a>
</li>
<li class="eos-item">
<a href="#"><i class="fa fa-users" aria-hidden="true"></i> All Users</a>
</li>
</div>
<li class="eos-item">
<a href="#"><i class="fa fa-gear" aria-hidden="true"></i> Settings</a>
</li>
<div class="eos-group-title"><i class="fa fa-share" aria-hidden="true"></i> Social Media <i class="fa fa-angle-right fa-lg eos-pull-right" aria-hidden="true"></i></div>
<div class="eos-group-content">
<li class="eos-item">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a>
</li>
<li class="eos-item">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
</li>
<li class="eos-item">
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i> Google Plus</a>
</li>
</div>
<li class="eos-item">
<a href="#"><i class="fa fa-power-off" aria-hidden="true"></i> Logout</a>
</li>
</div>
</div>
CSS代码:
.eos-menu, .eos-menu *, .eos-menu *:before, .eos-menu *:after {
padding: 0px;
margin: 0px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.eos-menu {
font-size: 14px;
color: #eee;
}
.eos-menu li {
list-style: none;
}
.eos-menu .eos-menu-content {
position: absolute;
width: 100%;
overflow-y: hidden;
height: 0px;
z-index: 10;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.eos-menu .eos-group-content {
overflow-y: hidden;
height: 0px;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.eos-menu .eos-menu-title,
.eos-menu .eos-group-title,
.eos-menu .eos-item {
height: 40px;
line-height: 40px;
background: #2F4050;
border-color: #293744;
padding-left: 15px !important;
padding-right: 15px !important;
border-bottom: 1px solid transparent;
}
.eos-menu .eos-menu-title .fa,
.eos-menu .eos-group-title .fa,
.eos-menu .eos-item .fa {
line-height: 40px;
}
.eos-menu .eos-menu-title:hover,
.eos-menu .eos-group-title:hover,
.eos-menu .eos-item:hover {
cursor: pointer;
background: #293744;
}
.eos-menu .eos-group-content .eos-item {
background: #263442;
padding-left: 30px !important;
}
.eos-menu .eos-item a {
color: #eee;
display: block;
text-decoration: none;
}
.eos-menu .eos-pull-right {
float: right;
}
@media (min-width: 768px) {
.eos-menu .eos-menu-title {
display: none;
}
.eos-menu .eos-menu-content {
height: auto;
position: inherit;
}
}
javascript:http://www.jqueryscript.net/demo/Responsive-Collapsible-Toggle-Menu-Plugin-With-jQuery-eosMenu/eosMenu/eosMenu.js
演示:http://www.jqueryscript.net/demo/Responsive-Collapsible-Toggle-Menu-Plugin-With-jQuery-eosMenu/
更多信息:http://www.jqueryscript.net/menu/Responsive-Collapsible-Toggle-Menu-Plugin-With-jQuery-eosMenu.html
谢谢
最佳答案
更新答案:
@media (min-width: 768px) {
.eos-menu {
display: none;
}
}
关于jquery - 响应式菜单问题禁用了全 View ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41296956/