解答:谜语者解答
更新:新版本:
一切正常,但菜单在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/

10-12 00:21
查看更多