三线Hamburger Menu问题求助：未右对齐且点击无滑动导航

问题1：汉堡菜单未右对齐修复 #

当前header布局下，汉堡菜单被夹在branding和nav中间，无法靠右。只需将汉堡菜单与导航栏包裹在同一容器，让容器整体右对齐即可：

修改HTML的header部分 #

<header>
  <div class="branding" onclick="goToIndex()" style="cursor: pointer;">
    <h1>Simple</h1>
  </div>
  <!-- 新增容器包裹汉堡菜单与导航 -->
  <div class="header-right">
    <div class="menu-toggle" onclick="toggleMenu()">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <nav id="main-nav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

添加CSS样式 #

.header-right {
  display: flex;
  align-items: center;
}

问题2：点击后导航菜单无法滑入修复 #

当前代码用display: none切换菜单不会触发过渡动画，且nav的transform作用范围错误。改用fixed定位让菜单从左侧滑入，移除display切换逻辑：

修改CSS中nav相关样式 #

/* 重新设置nav定位，让菜单从屏幕左侧滑入 */
nav {
  position: fixed;
  top: 60px; /* 与header高度匹配 */
  left: 0;
  width: 100%;
  max-width: 280px;
  background-color: #333;
  padding: 20px;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 100;
}

/* 显示菜单时的状态 */
nav.show {
  transform: translateX(0);
}

/* 移除display切换，改用flex垂直排列菜单 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

nav li {
  margin: 15px 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

整合后完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en" class="prevent-select">

<head>
  <title>Simple</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="assets/main.css" />
  <script src="assets/scripts.js"></script>
</head>

<body>
  <header>
    <div class="branding" onclick="goToIndex()" style="cursor: pointer;">
      <h1>Simple</h1>
    </div>
    <div class="header-right">
      <div class="menu-toggle" onclick="toggleMenu()">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>

      <nav id="main-nav">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="center-box">
    <div>
    </div>
  </main>
</body>

</html>

CSS #

main {
  display: flex;
  flex-wrap: wrap;
}

body {
  text-align: center;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
  height: calc(100vh - 60px);
}

.center {
  margin: 0 auto;
  width: 80%;
  text-align: center;
}

.column {
  flex: 1;
  box-sizing: border-box;
  padding: 10px;
}

.columns-container {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.content-container {
  margin: 0 auto;
  max-width: 300px;
}

h1.center {
  margin: 0 auto;
  width: fit-content;
}

.column p,
.column img {
  margin-bottom: 10px;
  font-size: 20px;
  max-width: 100%;
}

.center-box {
  width: 95%;
  margin: 1% auto;
  padding: 10px;
  background-color: #000;
  text-align: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  flex-basis: 80%;
  overflow: hidden;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center-box .column {
  text-align: center;
}

.center-box img {
  display: block;
  margin: 0 auto 10px;
}

.thumbnail {
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

#modal-img {
  width: 80%;
  max-width: 800px;
  height: auto;
}

header {
  background-color: #333;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
}

.branding {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  margin-left: 10px;
  text-decoration: none;
}

.branding h1 {
  margin: 0;
}

p {
  font-size: 27px;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-right: 10px;
}

.line {
  height: 3px;
  width: 30px;
  background-color: #fff;
  margin: 6px 0;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.social-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 25px;
}

.extra-space-bottom {
  margin-bottom: 20px;
}

.extra-space-top {
  margin-top: 50px;
}

.prevent-select {
  user-select: none;
}

.header-right {
  display: flex;
  align-items: center;
}

nav {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  max-width: 280px;
  background-color: #333;
  padding: 20px;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 100;
}

nav.show {
  transform: translateX(0);
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

nav li {
  margin: 15px 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

nav li.active a {
  text-decoration: underline;
}

JavaScript #

（保持原代码无需修改）

内容的提问来源于stack exchange，提问作者Stack