响应式设计——移动&在本例中为桌面布局

Responsive design - reverse css effect between the mobile & desktop layout in this case

本文关键字：布局 桌面 移动 响应      更新时间：2023-09-26

在本例中，菜单在桌面布局中展开，而在移动布局中隐藏。

我的问题是如何使它在下面?

  • 手机布局:无隐藏&展开菜单
  • 桌面布局:隐藏菜单

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
#nav-toggle {
  float: right;
  display: block;
  border-left: 1px solid #fff;
}
nav {
  float: right;
}
.active ul {
  display: block;
}
ul {
  position: absolute;
  display: none;
  top: 60px;
  right: 0;
  width: 150px;
  list-style-type: none;
  background-color: #22bbff;
  border: 1px solid #fff;
  text-align: center;
}
li {
  display: block;
}
a {
  display: block;
  padding-top: 21px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 21px;
  color: #fff;
  text-decoration: none;
  background-color: #294C52;
  border: 1px solid #fff;
}
a:hover {
  background-color: #1BBC9B;
  border: 1px solid #fff;
}
@media screen and (min-width: 767px) {
  nav {
    position: relative;
    float: right;
    right: 50%;
  }
  #nav-toggle {
    display: none;
  }
  ul {
    position: relative;
    float: right;
    display: block;
    top: 0;
    right: -50%;
    width: auto;
    height: 60px;
    list-style-type: none;
    border: none;
  }
  li {
    float: left;
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="top-bar">
  <a href="#" id="nav-toggle">M</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2 <i></i></a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div>

如果你想让你的例子相反-普通浏览器上的小折叠菜单，移动设备上的完整菜单-你可以改变你的@media查询从使用min-width到这个:

@media screen and (max-width: 767px) {

样本。但是，当视口变得太窄时，这会破坏菜单的布局。

你总是可以把你的css样式应用到桌面视图&有针对性的媒体查询，我已经做了下面使用您的原始css。

你需要自定义桌面视图下拉菜单的css(当前视图可能不是你想要的，尽管行为是正确的)。您可以使用额外的css类来实现这一点。请检查浏览器控制台以获取指导。

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: relative;
  float: right;
  right: 50%;
}
#nav-toggle {
  display: none;
}
ul {
  position: relative;
  float: right;
  display: block;
  top: 0;
  right: -50%;
  width: auto;
  height: 60px;
  list-style-type: none;
  border: none;
}
li {
  float: left;
  display: block;
}
a {
  display: block;
  padding-top: 21px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 21px;
  color: #fff;
  text-decoration: none;
  background-color: #294C52;
  border: 1px solid #fff;
}
a:hover {
  background-color: #1BBC9B;
  border: 1px solid #fff;
}
@media screen and (min-width: 767px) {
  #nav-toggle {
    float: right;
    display: block;
    border-left: 1px solid #fff;
  }
  nav {
    float: right;
  }
  .active ul {
    display: block;
  }
  ul {
    position: absolute;
    display: none;
    top: 60px;
    right: 0;
    width: 150px;
    list-style-type: none;
    background-color: #22bbff;
    border: 1px solid #fff;
    text-align: center;
  }
  li {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="top-bar">
  <a href="#" id="nav-toggle">M</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2 <i></i></a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div>

首先加上这个

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

因为你想让它响应…那么如何使用它呢例如

   <body>
<div class="container">
      <h2>Table</h2>
      <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
      <div class="table-responsive">          
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Debbie</td>
          </tr>
          <tr>
            <td>3</td>
            <td>John</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
    </body>

所以如果你把一个类或另一个容器放在这个容器的"table-responsive"之外它就不会再有响应了。

相关文章：