修改

Question

我有这个菜单。我想让它针对移动设备进行优化，例如当点击切换按钮时，菜单会滑入三个条形线。任何人都可以用最简单的方式帮助我吗？

我的菜单代码

<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制作移动优化菜单。

Answer 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>

Answer 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>

为移动设备制作自适应导航

2 个答案:

修改