応答メニューの問題の完全なビューを無効

Question

解決：回答リドラー

によって解決アップデート：新しい問題：

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

が唯一のモバイル上で閲覧そうコンディション場合に使用します。

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

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