HTML CSS AND JS 帮助创建响应式汉堡菜单答案

【问题标题】：HTML CSS AND JS Help to create responsive hamburger menuHTML CSS AND JS 帮助创建响应式汉堡菜单
【发布时间】：2022-01-14 02:19:10
【问题描述】：

我需要什么帮助

大家好。我在尝试创建响应式导航栏时需要帮助。我正在努力做到这一点，以便当网页变得小于汉堡菜单时会出现，然后可以单击该选项卡的下拉菜单。如果有人可以帮助我，将不胜感激。

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #AC876A;
  /* this is the turqoise color */
  color: black;
  /* color of font */
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  /* no tail font is more readable for small font */
  font-size: 16px;
}

#titleNav {
  /* titleNav is fixed, always at the top */
  /* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  /* To make sure titleNav is on top of content, give it a higher z-index than content 
                            (content would have default value of zero). */
  width: 100%;
  background-color: rgb(71, 39, 14);
  padding-bottom: 10px;
  /* height: 86px; /* NEW */
  color: burlywood;
  font-family: serif;
  font-weight: bold;
  border-bottom: 1px solid #68615D;
}

#pageTitle {
  /* no change */
  padding: 12px;
  padding-bottom: 0px;
  font-size: 48px;
  letter-spacing: 1.5px;
  /* spaces out letters a bit */
}

#nav {
  /* fix the nav bar */
  position: fixed;
  padding-right: 10rem;
  top: 0px;
  right: 0px;
  text-align: right;
  font-size: 24px;
  padding-bottom: 12px;
  padding-top: 32px;
  overflow: hidden;
  /*when content to big to fit in area */
}

#nav a {
  /* no change */
  text-decoration: none;
  /* Do not want links in "nav" to be underlined */
  color: #C8C8C8;
  /* light gray: to provide color for links, you have to style the "a" tag */
  float: left;
  padding-left: 16px;
  padding-right: 16px;
}

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

#nav a.active {
  border-bottom: 2px solid black;
}

#content {
  /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
  padding: 12px;
  padding-top: 80px;
  /* prevent the top of the content from getting hidden under the fixed titleNav */
  padding-bottom: 40px;
  /* prevent the the bottom of the content from getting hidden under the fixed footer */
}

#footer {
  /* footer fixed, always at the bottom */
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  /* make sure footer is on top of content which would have default z-index value of 0 */
  background-color: rgb(71, 39, 14);
  color: burlywood;
  width: 100%;
  text-align: center;
  padding: 8px;
}

.icon {}

<!DOCTYPE html>
<html>

<head>
  <!-- Use this type of comment within HTML -->
  <title>U-Bin Moving</title>
  <!-- this is your internal style sheet -->
  <link href="style/myStyle.css" rel="stylesheet">
</head>

<body>
  <div id="titleNav">
    <div id="pageTitle">
      U-Bin Moving
    </div>
    <div id="nav">
      <a href="index.html" class="active">Home</a>
      <a href="services.html">Services</a>
      <a href="about.html">About Us</a>
      <a href="blog.html">Contact</a>
    </div>
  </div>
  <div id="content">
    <h2>The Right Moving Company For You</h2>
    <p>
      At U-Bin Storage we will get the job done for the lowest price.
    </p>
    <p style="text-align:center;">
      <img src="pics/box.jpg" style="width:50%; border-radius:10px;">
    </p>
  </div>
  <!-- content. [[Keep track of nesting]] -->
  <div id="footer">
    [ Kyle Hrivnak ]
  </div>
</body>

【问题讨论】：

stackoverflow.com/help/how-to-ask
这样吗？ w3schools.com/howto/howto_js_topnav_responsive.asp

标签： javascript html css

【解决方案1】：

你想要的是media query。当屏幕宽度变小时，您可以应用自定义 CSS。

  html,
body {
  margin: 0;
  padding: 0;
}

.navbar {
  width: 100%;
  min-height: 50px;
  background-color: red;
}

.navitem {
  width: 70px;
  height: 50px;
  line-height: 50px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: inline-block;
  text-align: center;
}

.navitem:hover {
  background-color: white;
  color: red;
}

.content {
  padding: 10px;
}

@media screen and (max-width: 500px) {
  /* This CSS is only applied when the screen width is smaller than 500px. */
  .navitem {
    display: block;
    width: 100%;
  }

<div class="navbar">
  <a href="#" class="navitem">Link 1</a>
  <a href="#" class="navitem">Link 2</a>
  <a href="#" class="navitem">Link 3</a>
  <a href="#" class="navitem">Link 4</a>
</div>

<div class="content">
  <h1>Media Queries</h1>
  <p>Try resizing this window. The navigation links will show in stacks in mobile devices.</p>
</div>

这是一个小例子，其中导航栏在移动浏览器中发生了变化。要使用汉堡按钮，您需要一些 javascript 来切换菜单。（在移动设备上只需将display: block 传递给汉堡包按钮）

【讨论】：

【解决方案2】：

我谦虚的建议是“站在巨人的肩膀上”，可以这么说，除非你真的想要学习，否则不要自己从头开始编写代码。

我建议使用 MDBootstrap 来创建响应式汉堡菜单和您需要的其他页面控件。 https://mdbootstrap.com/docs/standard/extended/hamburger-menu/

作为一名开发人员，最好让那些花费数天/数周/数月/数年的时间在这些东西上工作的开发人员来完成工作 - 这样您就可以专注于您的项目所独有的工作 - 所以您可以按时完成最后期限。

此外，当您使用 Bootstrap 时，您可以合理地确定这些页面元素将适用于所有平台：即与各种浏览器、设备（移动设备、笔记本电脑等）和屏幕分辨率兼容。

【讨论】：