仅出现在移动设备上的 Sidenav答案

【问题标题】：Sidenav that only appears on mobile devices仅出现在移动设备上的 Sidenav
【发布时间】：2016-12-18 07:14:59
【问题描述】：

所以现在每个人都明白响应式设计的痛苦，而今天我也不得不挠头几秒钟。

所以基本上我要做的是让一个常规的 div 元素（在桌面上 - 它是一个产品过滤器）出现在移动设备上的 sidenav (http://www.w3schools.com/howto/howto_js_sidenav.asp) 中，以节省一些空间。

我已经四处寻找了几个小时，但从那以后什么也没找到。你们能帮我解决这个问题吗？

编辑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>

【问题讨论】：

能否添加您的 HTML 代码？
只需使用bootstrap。非常易于使用、标准化，并且内置了此功能
@DelightedD0D 那么它将覆盖我们已经内置的某些功能，例如某些样式等。除了使用我所拥有的，我别无他法，那就是 jQuery 或者只是普通的 javascript。
@wscourge 给你
在这种情况下，我只需在这两个地方添加它并根据屏幕宽度切换它们的可见性。其他解决方案将需要使用 javascript，因为您不能真正将父母与 css 混淆。

标签： jquery css responsive-design

【解决方案1】：

试试这个它只使用 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>

【讨论】：

【解决方案2】：

我为我的需要编写了 sass mixin 来方便地控制响应能力。 [link] 如果您使用 scss，只需将此 mixin 添加到您的代码中，然后：

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

这里是示例，调整浏览器大小看效果Codepen

【讨论】：