请求协助实现响应式网站及汉堡菜单（附代码）

1. 实现顶部汉堡菜单 #

步骤1：调整HTML结构 #

在contactBar内添加汉堡按钮，同时给菜单列表包裹容器：

<div class="contactBar">
  <h1>你的标题</h1>
  <button class="hamburger" aria-label="切换菜单">☰</button>
  <div class="navMenu">
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <li><a href="#">链接3</a></li>
    </ul>
  </div>
</div>

步骤2：添加CSS样式 #

/* 汉堡按钮默认隐藏（大屏不显示） */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.navMenu {
  display: block;
}

/* 小屏适配：显示汉堡按钮，隐藏菜单并添加展开动画 */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  
  .navMenu {
    position: absolute;
    top: 120px;
    right: 0;
    background-color: rgb(31, 31, 128);
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .navMenu.active {
    max-height: 300px;
  }
  
  .contactBar ul {
    flex-direction: column;
    padding: 20px 0;
  }
  
  .contactBar ul li {
    margin: 15px 0;
    text-align: center;
  }
}

步骤3：添加JavaScript交互 #

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.navMenu');

hamburger.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

2. 移动端与平板端响应式适配 #

在现有CSS基础上添加以下媒体查询，覆盖大屏样式：

/* 平板端（768px-1024px）适配 */
@media (max-width: 1024px) {
  .contactBar {
    padding: 50px 20px;
  }
  
  h1 {
    font-size: 45px;
  }
  
  #midSection {
    width: 80%;
  }
  
  .textSection {
    font-size: 18px;
    height: auto;
    padding: 30px;
  }
}

/* 移动端（小于768px）适配 */
@media (max-width: 768px) {
  .contactBar {
    padding: 30px 15px;
    align-items: center;
  }
  
  h1 {
    font-size: 35px;
    margin-left: 0;
  }
  
  #midSection {
    width: 90%;
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 80px;
  }
  
  .textSection {
    border-radius: 0 0 15px 15px;
    box-shadow: 0px 8px 50px rgb(56, 149, 224);
  }
  
  /* 确保图片占满容器宽度 */
  #midSection img {
    width: 100%;
    border-radius: 15px 15px 0 0;
  }
}

3. 为链接添加模态框的初步步骤 #

步骤1：添加模态框HTML结构 #

在页面底部添加对应链接的模态框容器：

<!-- 示例模态框（可复制多个对应不同链接） -->
<div class="modal" id="modal1">
  <div class="modal-content">
    <button class="modal-close">&times;</button>
    <h2>模态框标题</h2>
    <p>模态框内容</p>
  </div>
</div>

步骤2：添加模态框CSS样式 #

/* 模态框背景遮罩 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

/* 模态框内容容器 */
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  position: relative;
}

/* 模态框关闭按钮 */
.modal-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  border: none;
  background: transparent;
  cursor: pointer;
}

.modal-close:hover {
  color: rgb(31, 31, 128);
}

步骤3：添加JavaScript绑定事件 #

// 获取所有导航链接、模态框和关闭按钮
const links = document.querySelectorAll('.contactBar ul li a');
const modals = document.querySelectorAll('.modal');
const closeButtons = document.querySelectorAll('.modal-close');

// 点击链接打开对应模态框
links.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    modals[index].style.display = 'block';
  });
});

// 点击关闭按钮关闭模态框
closeButtons.forEach(button => {
  button.addEventListener('click', () => {
    button.closest('.modal').style.display = 'none';
  });
});

// 点击背景遮罩关闭模态框
window.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal')) {
    e.target.style.display = 'none';
  }
});

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