Question

因此，我为网站创建了一个导航菜单，该菜单具有移动响应功能（仅CSS）。但是，在响应模式下，它可以垂直转换菜单，这很好。我仍然希望菜单垂直堆叠，但是出于专业原因，我希望它具有汉堡包风格。如何将响应式菜单更改为汉堡式？我希望它也只能使用CSS构建。

我找到了一个使用javascript的汉堡包样式示例，是否可以仅使用CSS做到这一点？

这是当前的响应式菜单：

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
  list-style-type: none;
  margin-left: -9px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:x-large;
  float:left;
  padding-bottom:10px
}

nav a:hover:not(.active) {
  background-color: #111;
}

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


@media screen and (max-width: 700px) {
  nav a {
    text-align: center;
    float: none;
  }
}




img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<nav>

  <a class="navbar-brand" href="/">
    <img src= "logo.png" width="60px" height="50px" class="center" >
    </a>

  <a  href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#example">example</a>
  <a href="#example">example2</a>
  <a href="#example">example</a>

  <a style="float:right" href="#form">Form</a>
  <a style="float:right" href="#registration">Registration</a>
</nav>





</body>
</html>

这是一个汉堡包示例，我希望我的响应版本看起来像，但是我不确定如何转换：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

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

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

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

.active {
  background-color: #4CAF50;
  color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<nav class="topnav">
  <a href="#home" ><img src="logo.png" width="60px" height="40px class="center"></a>
  <section id="myLinks">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#example">example</a>

  </section>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</nav>

<main style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>

<!-- End smartphone / tablet look -->
</div>

<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

</body>
</html>

Answer 1

尝试一下

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Something</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Something</a>
      </li>
    </ul>
  </div>
</nav>

如何将移动响应式垂直堆栈菜单转换为汉堡式响应式菜单？

1 个答案: