【问题标题】：Making responsive navigation for mobile devices为移动设备制作响应式导航
【发布时间】：2018-01-17 21:10:15
【问题描述】：

我有这个菜单。我想让它针对移动设备进行优化，例如单击带有三个条形线的切换按钮时，菜单会滑入。谁能帮助我以最简单的方式做到这一点？

我的菜单代码

<div id="stuck_container">
  <div class="header-navigation">
    <div class="flag-left"></div>
    <div class="flag-right"></div>
    <nav>
      <ul class="sf-menu">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="gallary.php">Our Gallery</a></li>
        <li><a href="pricing.php">Membership Plans</a></li>
        <li><a href="register.php">Register</a></li>
        <li><a href="contact.php">Contacts</a></li>
      </ul>
    </nav>
    <div class="clear"></div>
  </div>
</div>

这在台式机和笔记本电脑浏览器中运行良好，但是当我进入移动响应模式时，菜单消失了。请帮助我，如何在此处使用 css 制作移动优化菜单。

【问题讨论】：

stuck_container wrap 的 css 是什么样的？
如果可以，您是否可以访问 css，请将其发布，以便我们帮助解决解决方案。
欢迎来到 Stack Overflow，您的问题应包含a Minimal, Complete, and Verifiable example。

标签： jquery html css

【解决方案1】：

这是一个响应式设计示例，您必须将其应用到您的代码中。我基本上将最大宽度设置为 100%，为保存列表的容器上的小型设备设置 180px 的中间宽度，然后我在每个列表项上添加了一个精确的宽度和一个最小宽度，因此当屏幕减小按钮中心以进行响应时移动设计。

.linkContainer{
width:100%;
height:2em;
min-width:180px;
margin-left:auto;
margin-right:auto;
}
.navContainer{
width:100%;
min-width:180px;
float:left; 
}
li{
width:160px;
min-width:100px;
float:left; 
text-align:center;
list-style:none;
}
</style>
</head>
<body>
<div id="stuck_container">
<div class="header-navigation">
<div class="flag-left"></div>
<div class="flag-right"></div>
<div class="linkContainer">
<nav class="navContainer">
  <ul class="sf-menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="gallary.php">Our Gallery</a></li>
    <li><a href="pricing.php">Membership Plans</a></li>
    <li><a href="register.php">Register</a></li>
    <li><a href="contact.php">Contacts</a></li>
  </ul>
</nav>
<div class="clear"></div>
</div>
</div> 
</div>
</body>
</html>

【讨论】：

【解决方案2】：

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

<div class="topnav" id="myTopnav">
 <a href="index.php" class="active">Home</a>
 <a href="about.php">About Us</a>
 <a href="gallary.php">Our Gallery</a>
 <a href="pricing.php">Membership Plans</a>
 <a href="register.php">Register</a>
 <a href="contact.php">Contacts</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

这个也是响应式的。带有 class="icon" 的链接用于在小屏幕上打开和关闭 topnav。

或者你也可以这样做：使用 MediaQueries

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

编辑

要添加下拉列表，您可以将此代码应用到您的下拉列表中

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}


#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Open" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>



<div class="container">

 
 
</div>


  
<div class="message">
  


</div>

【讨论】：

在第二个例子中，我用一个按钮切换我想添加一个向下滑动的效果。我该怎么办？