如何使侧边菜单底部，按钮和内容响应？

时间：2018-04-06 02:27:40

标签： css css3 responsive-design responsive

我的html代码中有一个侧边菜单，我想让它响应。我希望所有的侧面菜单底部，按钮和其他内容都能够响应。但它没有发生。下面我发布了代码，你可以看到，如果我将浏览器从底部拖到上面，窗口会变小，然后按钮就会消失。如果向下拖动到底部，则可以看到按钮消失。我该如何解决这个问题？

这是我到目前为止尝试的代码：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#sidebar").mCustomScrollbar({
    theme: "minimal"
  });

  $('#dismiss').on('click', function() {
    $('#sidebar').removeClass('active');
  });

  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').addClass('active');
    $('.collapse.in').toggleClass('in');
    $('a[aria-expanded=true]').attr('aria-expanded', 'false');
  });
});
＆＃13; 
#sidebar {
  width: 425px;
  position: fixed;
  top: 0;
  right: -425px;
  height: 100vh;
  z-index: 999;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
  right: 0;
}

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #7386D5;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#dismiss:hover {
  background: #fff;
  color: #7386D5;
}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: none;
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #6d7fcc;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  padding-left: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}

.f-left {
  float: left;
  padding-top: 15px;
  padding-left: 10px;
}

.cart-img {
  position: relative;
}

p {
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  color: #999999;
  font-family: monospace;
}

.scrollbar {
  height: 500px;
  background: #F5F5F5;
  overflow-y: scroll;
}

.force-overflow {
  min-height: 450px;
}

#style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb {
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

<div class="wrapper">
  <nav id="sidebar">
    <div id="dismiss">
      <i class="zmdi zmdi-arrow-right"></i>
    </div>

    <div class="sidebar-header">
      <h3>Cart</h3>
    </div>

    <ul class="list-unstyled components">
      <li>
        <div class="total-cart-pro">
          <!-- single-cart -->
          <div class="scrollbar" id="style-5">
            <div class="force-overflow">

              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>
              <div class="single-cart clearfix">
                <div class="cart-img f-left">
                  <a href="#">
                    <img src="https://i-cdn.phonearena.com/images/phones/66417-xlarge/Samsung-Galaxy-S8-0.jpg" width="60px" />
                  </a>
                </div>
                <div class="cart-info f-left">
                  <h6 class="text-capitalize">
                    <a href="#">Samsung S8 Smartphone</a>
                  </h6>
                  <p>
                    <span>Brand <strong>:</strong></span> Samsung
                  </p>
                  <p>
                    <span>Kogus <strong>:</strong></span> 1
                  </p>
                  <p>
                    <span>Hind <strong>:</strong></span> 1000$
                  </p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </li>
    </ul>

    <ul class="list-unstyled CTAs">
      <li><a href="#" class="download">Go Pay</a></li>
      <li><a href="#" class="article">Back to store</a></li>
    </ul>
  </nav>


  <!-- Page Content Holder -->
  <div id="content">

    <nav class="navbar navbar-default">
      <div class="container-fluid">

        <div class="navbar-header navbar-right">
          <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>Open Sidebar</span>
                            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Page</a></li>
            <li><a href="#">Page</a></li>
            <li><a href="#">Page</a></li>
            <li><a href="#">Page</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <h2>Collapsible Sidebar Using Bootstrap 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>

    <div class="line"></div>

    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>

    <div class="line"></div>

    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>

    <div class="line"></div>

    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

通过在CSS中使用媒体查询，可以使侧栏响应。 以下代码是使用媒体查询的示例。

@media screen and (max-width: 1000px) {
  .sidebar {
     width: 100%;
     overflow: scroll;
  }
}
@media screen and (max-width: 800px) {
   .sidebar {
     width: 80%;
     overflow: scroll;
  }
}

但请记住，媒体查询必须放在默认样式下面。

有关更多信息，请参阅链接：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

答案 1 :(得分：0)

你必须处理侧边栏的宽度和位置，你必须根据屏幕尺寸使用媒体查询来捕捉适当的样式。

#sidebar {
  width: 100%;
  max-width:425px;
  position:fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  z-index: 999;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

和

@media screen and (max-width: 1000px) {
  .sidebar {
     width: 100%;
     overflow: scroll;
  }
}
@media screen and (max-width: 400px) {
   .sidebar {
     width: 80%;
     overflow: scroll;
  }
}

对于HTML部分，请务必添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

请查看fiddle

修改

对于各种屏幕尺寸，您需要使用各种媒体查询来破坏您的代码。例如：

@media screen and (max-width: 700px) {
  // your code for screen <=700 : applied to screens ranging from 700px to 641px
}
@media screen and (max-width: 640px) {
  // your code for screen <=640 : applied to screens ranging from 640px to 561px
}
@media screen and (max-width: 560px) {
  // your code for screen <=560 : applied to screens ranging from 560px to 481px
}
@media screen and (max-width: 480px) {
  // your code for screen <=480 : applied to screens ranging from 480px to 361px
}
@media screen and (max-width: 360px) {
  // your code for screen <=360 : applied to screens ranging from 360px to 321px
}
@media screen and (max-width: 320px) {
  // your code for screen <=320 : applied to screens ranging from 320px to 0px
}
相关问题
最新问题