デバイスに基づいて異なるマニューを表示する

Question

モバイルやテーブルのようなさまざまなデバイスに基づいて別のメニューを表示したい。sidrを使用してメニューを表示したい。 と大きなデバイスのメニュー表現のためのブートストラップメニューを修正する必要があります。 この私のコードをachiveする方法である

私のコードがある

<div id="large-menu"> 
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">My Site</a> 
      </div> 
      <!-- Collection of nav links and other content for toggling --> 
      <div id="navbarCollapse" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="Login">Login </a></li> 
        <li><a href="SignUp">Sign Up</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="AboutUs">About Us</a></li> 
        <li><a href="ContactUs">Contact Us</a></li> 
        <li><a href="Terms">Terms & condition</a></li> 
        <li><a href="Privacy">Privacy policy</a></li> 
        <li><a href="Careers">Career </a></li> 
        <li><a href="business">Business</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 
<div id="mobile-menu"> 
    <div class="bottom-logo"> 
     <a id="simple-menu" href="#sidr" style="font-size: 50px"><i class="fa fa-list"></i></a> 
     <a href="http://www.example.com" style="font-size: 50px">MySite</a> 
    </div> 
    <div id="sidr"> 
     <ul> 
      <li><a href="Login">Login </a></li> 
      <li><a href="SignUp">Sign Up</a></li> 
      <li><a href="ForgetPassword">Forget Password</a></li> 
      <li><a href="AboutUs">About Us</a></li> 
      <li><a href="ContactUs">Contact Us</a></li> 
      <li><a href="Terms">Terms & condition</a></li> 
      <li><a href="Privacy">Privacy policy</a></li> 
      <li><a href="Careers">Career </a></li> 
      <li><a href="business">Business</a></li> 
     </ul> 
    </div> 
</div> 

私の完全なコードは、モバイルビューのために、大きなビューのために、あなたのコード内の2つのメニューがありますHERE

Answer 1

です。大きなビューでは、私はほんの少しのメニューを隠し、@media (min-width: 769px){}の使用と大きなメニューを表示し、モバイルビューのために、私はちょうどこのメディアクエリを追加することによって、大きなメニュー&は私の問題を解決し@media (max-width: 768px){}

@media (max-width: 768px){ 
    #large-menu{ 
    display: none; 
    } 
    #mobile-menu{ 
    display: block; 
    } 
} 

@media (min-width: 769px){ 
    #large-menu{ 
    display: block; 
    } 
    #mobile-menu{ 
    display: none; 
    } 
} 

Answer 2

の使用と小さなメニューを表示する隠しますリンク作業

@media screen and (min-width: 0px) and (max-width: 768px) { 
     #mobile-menu{ 
      display: block; 
     } 
     #large-menu{ 
      display: none; 
     } 
     } 

    @media screen and (min-width: 769px) and (max-width: 2000px) { 
     #mobile-menu{ 
      display: none; 
     } 
     #large-menu{ 
      display: block; 
     } 
      body { 
      padding-top: 50px; 
     } 
    } 

はあなたが唯一の大きなデバイスにのみ、モバイルデバイスや大型のメニューにモバイルメニューを表示したいstackoverflow