Question

解决：Riddler解决的答案

更新：新问题：

Everthing工作正常，但菜单在屏幕1368中可见，我想仅在768或1024或任何较低的屏幕尺寸下显示菜单。

实际上我在我的网站上嵌入了一个菜单并且工作正常，但我想在菜单中做一个小改动。

因为我想要禁用完整视图并且只想让移动视图仅表示响应式设计，但我尝试使用显示：隐藏,,,我没有工作..

请帮忙。

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

由于

Answer 1

更新回答：

@media (min-width: 768px) {
        .eos-menu {
            display: none;
        }            
    }

Answer 2

如果您只想在移动设备上查看移动菜单，请使用if条件。

var windowwidth = $(window).width();
if ((windowwidth < 767)) {
    $("#menu").eosMenu();
};

@media only screen and(max-width:767px){
     write css for mobile
}

响应式菜单问题禁用完整视图

2 个答案: