Sidenav, das nur auf mobilen Geräten erscheint

Question

So versteht jetzt jeder den Schmerz des responsiven Designs und heute musste ich mich auch ein paar Sekunden am Kopf kratzen.

Also im Grunde, was ich versuche zu tun, ist ein reguläres div-Element (auf dem Desktop - es ist ein Produktfilter) in einem sidenav (http://www.w3schools.com/howto/howto_js_sidenav.asp) auf mobilen Geräten erscheinen, um etwas Platz zu sparen.

Ich habe mich schon seit ein paar Stunden umgesehen, habe aber seitdem nichts gefunden. Könnt ihr mir dabei helfen?

Edit 1: HTML-Quellcode hinzugefügt:

<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

ich für meine Bedürfnisse schrieb das Ansprechverhalten SASS mixin handliche Kontrolle. [link] Wenn Sie SCSS verwenden gerade diese mixin, um Ihren Code hinzufügen und dann:

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

Und hier ist die Probe, die Größe des Browser die Wirkung Codepen

Answer 2

um zu sehen, das Probieren Sie es ony CSS verwendet und 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>