モバイル機器にのみ表示されるSidenav

Question

今や誰もがレスポンシブルデザインの痛みを理解しています。今日は数秒間頭を傷つけなければならなかった。

基本的には、モバイルデバイスのsidenav（http://www.w3schools.com/howto/howto_js_sidenav.asp）に表示される通常のdiv要素（デスクトップ上 - 製品フィルタ）を取得し、スペースを節約することです。

私は数時間前から探していますが、それ以降は何も見つかりませんでした。あなたは私にこれを手伝ってもらえますか？

編集1：HTMLソースコードを追加しました：私は私のニーズのために書いた

<div class="span4"> 
    <div class="vs-sidebox et-sidebox-categ clearfix ty-sidebox"> 
    <h2 class="vs-sidebox-title"><span>Filter</span> <span class="vs-title-toggle cm-combination visible-phone visible-tablet clearfix" id="sw_sidebox_79"><i class="ty-sidebox__icon-open ty-icon-down-open"></i> <i class="ty-sidebox__icon-hide ty-icon-up-open"></i></span></h2> 
    <div class="vs-sidebox-body vs-toggle-body clearfix" id="sidebox_79"> 
     <!-- Inline script moved to the bottom of the page --> 
     <div class="cm-product-filters" data-ca-base-url="http://xxxxxxx.com/koken-and-tafelen/onderweg/" data-ca-target-id="product_filters_*,products_search_*,category_products_*,product_features_*,breadcrumbs_*,currencies_*,languages_*,selected_filters_*" id="product_filters_79"> 
      <div class="ty-product-filters__wrapper"> 
       <div class="ty-product-filters__block"> 
        <div class="ty-product-filters__switch cm-combination-filter_79_4 open cm-save-state cm-ss-reverse" id="sw_content_79_4"> 
         <span class="ty-product-filters__title">Serie</span> <i class="ty-icon-right-open-thin vs-filter-closed"></i> <i class="ty-icon-down-open vs-filter-open"></i> 
        </div> 
        <ul class="ty-product-filters" id="content_79_4"> 
         <li class="ty-product-filters__item-more"> 
          <ul class="ty-product-filters__variants cm-filter-table" data-ca-clear-id="elm_search_clear_79_4" data-ca-empty-id="elm_search_empty_79_4" data-ca-input-id="elm_search_79_4" id="ranges_79_4" style="max-height: 20em;"> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="4" id="elm_checkbox_79_4_5593" name="product_filters[4]" type="checkbox" value="5593">Campus</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="4" id="elm_checkbox_79_4_5621" name="product_filters[4]" type="checkbox" value="5621">ToGo</label></li> 
          </ul> 
          <p class="ty-product-filters__no-items-found hidden" id="elm_search_empty_79_4">Geen items gevonden met dit zoekcriterium</p> 
         </li> 
        </ul> 
       </div> 
       <div class="ty-product-filters__block"> 
        <div class="ty-product-filters__switch cm-combination-filter_79_5 open cm-save-state cm-ss-reverse" id="sw_content_79_5"> 
         <span class="ty-product-filters__title">Print</span> <i class="ty-icon-right-open-thin vs-filter-closed"></i> <i class="ty-icon-down-open vs-filter-open"></i> 
        </div> 
        <ul class="ty-product-filters" id="content_79_5"> 
         <li> 
          <!-- Inline script moved to the bottom of the page --> 
          <div class="ty-product-filters__search"> 
           <input autocomplete="off" class="cm-autocomplete-off ty-input-text-medium" id="elm_search_79_5" name="q" placeholder="Zoeken" type="text" value=""> <i class="ty-product-filters__search-icon ty-icon-cancel-circle hidden" id="elm_search_clear_79_5" title="Verwijder"></i> 
          </div> 
         </li> 
         <li class="ty-product-filters__item-more"> 
          <ul class="ty-product-filters__variants cm-filter-table" data-ca-clear-id="elm_search_clear_79_5" data-ca-empty-id="elm_search_empty_79_5" data-ca-input-id="elm_search_79_5" id="ranges_79_5" style="max-height: 20em;"> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5608" name="product_filters[5]" type="checkbox" value="5608">Animal Planet Giraffe</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5610" name="product_filters[5]" type="checkbox" value="5610">Animal Planet Haai</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5611" name="product_filters[5]" type="checkbox" value="5611">Animal Planet Panda</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5613" name="product_filters[5]" type="checkbox" value="5613">Animal Planet Tijger</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5612" name="product_filters[5]" type="checkbox" value="5612">Animal Planet Wolf</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5614" name="product_filters[5]" type="checkbox" value="5614">Finding Dory</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5615" name="product_filters[5]" type="checkbox" value="5615">Frozen Sisters Forever</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5618" name="product_filters[5]" type="checkbox" value="5618">My favourite horse</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5616" name="product_filters[5]" type="checkbox" value="5616">Paw Patrol</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5619" name="product_filters[5]" type="checkbox" value="5619">Spiderman</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5620" name="product_filters[5]" type="checkbox" value="5620">Star Wars</label></li> 
           <li class="cm-product-filters-checkbox-container ty-product-filters__group"><label><input class="cm-product-filters-checkbox" data-ca-filter-id="5" id="elm_checkbox_79_5_5617" name="product_filters[5]" type="checkbox" value="5617">Trolls</label></li> 
          </ul> 
          <p class="ty-product-filters__no-items-found hidden" id="elm_search_empty_79_5">Geen items gevonden met dit zoekcriterium</p> 
         </li> 
        </ul> 
       </div> 
       <div class="ty-product-filters__tools clearfix"> 
        <a class="ty-product-filters__reset-button cm-ajax cm-ajax-full-render cm-history reset-filters" data-ca-event="ce.filtersinit" data-ca-scroll=".ty-mainbox-title" data-ca-target-id="product_filters_*,products_search_*,category_products_*,product_features_*,breadcrumbs_*,currencies_*,languages_*,selected_filters_*" href="http://xxxxx.com/koken-and-tafelen/onderweg/" rel="nofollow"><i class="ty-icon-cw"></i> Herstel</a> 
       </div> 
      </div><!--product_filters_79--> 
     </div> 
    </div> 
</div> 

Answer 1

は便利な制御に対する応答性をミックスインSASS。 [link] あなたはSCSSを使用している場合だけで、あなたのコードに、このミックスインを追加して：

#miDIV{ 
    @include media(small,andsmaller){ 
     //your properties for #myDIV elem for mobile devices 
     position:fixed; 
     top:0; 
     left:0; 
     height:100%; 
     width:10vw; 
    }; 
} 

そして、ここではサンプルです、Codepen

Answer 2

はそれがONY CSSを使用し、これを試してみて、htmlの効果を確認するには、ブラウザのサイズを変更します

body{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-color:#f1f1f1; 
 
} 
 
header{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-color:#e2e2e2; 
 
    height:70px; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    z-index:10; 
 
} 
 

 
nav{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    height:70px; 
 
    overflow:hidden; 
 
} 
 
/*=======Mobile Navigation==========*/ 
 
.menu { 
 
    background: #ef4035; 
 
    height: 100vh; 
 
    width: 240px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 20; 
 
    outline: none; 
 
} 
 

 
.menu ul { 
 
    list-style: none; 
 
    padding: 0.5em 0; 
 
    margin: 0; 
 
} 
 

 
.menu ul li { 
 
    transition: all 0.15s linear; 
 
    cursor: pointer; 
 
    height:60px; 
 
} 
 

 
.menu ul li a{ 
 
    width:100%; 
 
    z-index:50; 
 
    color:white; 
 
    display:block; 
 
    height:60px; 
 
    font-size:1.4em; 
 
    line-height:60px; 
 
    text-align:center; 
 
    font-family:'DINNextLTW01-UltraLight_706122'; 
 
} 
 

 
.menu ul li a:hover{ 
 
    font-size:1.5em; 
 
} 
 

 
@media screen and (min-width: 65em) { 
 
    .menu { 
 
    visibility:hidden; 
 
    } 
 
} 
 

 
@media screen and (max-width: 65em) { 
 
    #navbar-header{ 
 
    width:100%; 
 
    float:none; 
 
    } 
 

 
    .navbar-brand{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    } 
 

 
    #navbar-header img{ 
 
    height:60px; 
 
    width:auto; 
 
    margin:0; 
 
    padding:0; 
 
    margin-top:5px; 
 
    display:block; 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    } 
 

 
    .menu { 
 
    width:230px; 
 
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0); 
 
    transform: translate3d(-230px, 0, 0); 
 
    transition: all 0.3s ease-in-out; 
 
    } 
 

 
    .menu .smartphone-menu-trigger { 
 
    width:50px; 
 
    height:70px; 
 
    position:absolute; 
 
    left:100%; 
 
    background:#fd5f54; 
 
    } 
 

 
    .menu .smartphone-menu-trigger:before, 
 
    .menu .smartphone-menu-trigger:after { 
 
    content: ''; 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
    } 
 

 
    .menu .smartphone-menu-trigger:after { 
 
    top: 55%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
    } 
 

 
    .menu:focus { 
 
    transform: translate3d(0, 0, 0); 
 
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6); 
 
    } 
 

 
    .menu:focus .smartphone-menu-trigger { 
 
    pointer-events: none; 
 
    } 
 
}

<header> 
 
    <div class="container"> 
 
    <nav role="navigation"> 
 
     <div class="menu" tabindex="0"> 
 
      <div class="smartphone-menu-trigger"></div> 
 
      <ul> 
 
      <li tabindex="0"><a href="index.php"><span>Home</span></a></li> 
 
      <li tabindex="0"><a href="#about-section"><span>About</span></a></li> 
 
      <li tabindex="0"><a href=""><span>Services</span></a></li> 
 
      <li tabindex="0"><a href="#portfolio-section"><span>Projects</span></a></li> 
 
      <li tabindex="0"><a href="#clients-section"><span>Clients</span></a></li> 
 
      <li tabindex="0"><a href="#contact-section"><span>Contact</span></a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 

 
</header>