Question

我正在关注有关如何为台式机和移动用户制作响应式导航栏的教程。我没有完全遵循，因为我必须更改CSS，因为我有图像徽标。当我尝试制作汉堡菜单时，我无法在列中看到所有的导航链接。为了澄清起见，我想在右侧制作汉堡包行，使其像一个应用程序一样起作用。

/* Basic */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Acme', sans-serif;
  background: white;
  line-height: 1.6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}


/* Navbar */

.navbar {
  display: flex;
  background: #004C66;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  padding: 0 30px;
}

.navbar .logo img {
  width: 100%;
  margin-top: 10px;
}

.navbar .nav-link {
  padding: 10px 50px;
  color: #333;
  background-color: red;
}


/* Burger Navigation */

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 2px;
  background-color: #333;
  margin: 5px;
  border-radius: 25%;
}

@media (max-width: 813px) {
  .nav-link {
    position: absolute;
    padding: none;
    right: 0px;
    height: 92vh;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
  }
}

<body>
  <header class="navbar">
    <a href="" class="logo"><img src="/img/logoS.png" alt=""></a>

    <nav>
      <ul>
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Contact</a>
      </ul>
    </nav>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>

  </header>

</body>

Answer 1

请为您的flex-direction和nav添加ul

nav, ul {
    display: flex;
    flex-direction: column;
}

Answer 2

我已经对您的代码进行了一些更新。试试这个。

Payload:
{"data":{"type":"bundleIds","attributes":{"teamId":"***","name":"XC [myapp] release OneSignalNotificationServiceExtension","identifier":"my.app.release.OneSignalNotificationServiceExtension","seedId":"***"}}}

2020-10-08 16:56:49 +0000  2020-10-08 16:56:49 +0000 IDEProvisioningLedgerEntry: 2020-10-08 16:56:49 +0000 IDEProvisioningLedgerEntry: Received response for *** @ <https://developerservices2.apple.com/services/v1/bundleIds>. Code = 0

2020-10-08 16:56:49 +0000  2020-10-08 16:56:49 +0000 IDEProvisioningLedgerEntry: 2020-10-08 16:56:49 +0000 IDEProvisioningLedgerEntry: Response payload: {
  "errors" : [ {
    "id" : "***",
    "status" : "409",
    "code" : "ENTITY_ERROR.ATTRIBUTE.INVALID",
    "title" : "An attribute in the provided entity has invalid value",
    "detail" : "An App ID with Identifier 'my.app.release.OneSignalNotificationServiceExtension' is not available. Please enter a different string."
  } ]
}

Answer 3

此引导代码将是完整的答案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
        <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 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Service</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

检查：https://jsfiddle.net/sugandhnikhil/9xazvehd/

Answer 4

您可以添加一点 JavaScript。

Menu.style.display = "none";
function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  if (Menu.style.display === "none") {
    Menu.style.display = "block";
  } else {
    Menu.style.display = "none";
  }
}

  .container {
    display: inline-block;
    cursor: pointer;
  }

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }

  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }

  .change .bar2 {opacity: 0;}

  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }

<div class="container" onclick="ShowHide(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="Menu" style="width: 150px; background-color: rgb(217, 231, 255); display: none;">
  <h2><a href="#1">Item 1</a></h2>
  <h2><a href="#2">Item 2</a></h2>
  <h2><a href="#3">Item 3</a></h2>
</div>

View on JSFiddle

Answer 5

您可以转到此链接https://getbootstrap.com/。此链接包含有关如何在项目中安装引导程序的信息。此安装将包含css文件。要解决有关导航栏的问题，请转到以下链接：https://getbootstrap.com/docs/4.0/components/navbar/ 此链接包含使用项目中安装的css设计的导航栏的html代码。希望这会有所帮助。祝你好运！

制作简单的汉堡菜单

5 个答案: