logo标签列表

如何将汉堡菜单移动到页面的右上角？

javascripthtmlcss
4

我刚开始学习JavaScript、HTML等相关技术，但是有一些困难。我不太清楚应该如何将我制作的汉堡菜单放置在桌面端和移动端网站的右上角位置。

非常感谢您的帮助！

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  min-height: 100vh;
}
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-16px);
}
.menu-btn__burger::after {
  transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- links -->
  <link rel="stylesheet" href="style.css">
  <!-- Top of the Page -->
  <title>Uni High Aquatics</title>
</head>
<body>
  <div class="menu-btn">
      <div class="menu-btn__burger"></div>
    </div>





  <script src="main.js"></script>
</body>
</html>

提醒一下，我还很新手，正在尝试为我的教练制作一个未来可以使用的网站。似乎我还没有掌握css，而且我不相信在位置中打左右键会起作用哈哈哈。所以任何帮助都非常需要和感激！

这真的取决于你需要什么 - 例如，你会有一个菜单栏，这将是其中的一部分，如果有的话，里面还有什么其他内容（例如网站名称或标识）？你希望它是静态的，因此始终固定在顶部吗？ - FluffyKitten
Fluffy，我打算让它一直停留在页面顶部，无论用户向下滚动多少，我希望它能与导航栏结合起来，但是我不太确定具体该如何实现。我为此付出了很大的努力哈哈哈。 - Oliver Pomaranski
好的，总体来说你的HTML有几个问题，如果你想在导航栏中使用菜单图标，那么你需要改变所需的CSS。我认为你可能是想在学会基本页面设计之前就急于求成了:) 也许可以先尝试一些基本页面设计教程，而不是直接跳入flex和vh - 例如，flex在HTML body上不会真正起作用。给我一分钟，我会给你提供一些信息的答案... - FluffyKitten
我看了一些视频，也在CodePen上写了几个笔记。我试图把我所学的东西整合起来。虽然我认为我是在学步之前就想跑了。 - Oliver Pomaranski
找到一个好的教程可能很困难，我发现视频可以获得一般的想法，但是需要更详细的书面教程进行跟进。这个可能是一个很好的复习和起点 如何使用HTML和CSS创建网站的7个步骤，还可以查看右侧列出的CSS教程。先准备好您的虚拟内容，然后开始担心它的外观 - 这很无聊，但是很必要（特别是当您刚开始时 :)）。也请检查我的答案以获取您的固定导航栏 :)。 - FluffyKitten
3个回答
5
只需将 .menu-btn 添加 position: fixed; 和 top: 0; right: 0 即可。 

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  min-height: 100vh;
}
.menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-16px);
}
.menu-btn__burger::after {
  transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- links -->
  <link rel="stylesheet" href="style.css">
  <!-- Top of the Page -->
  <title>Uni High Aquatics</title>
</head>
<body>
  <div class="menu-btn">
      <div class="menu-btn__burger"></div>
    </div>





  <script src="main.js"></script>
</body>
</html>

在Stack Overflow上，不鼓励只提供代码的答案，因为它们无法解释它是如何解决问题的。请编辑您的答案，解释这段代码的作用以及它如何回答问题，这样对于提问者和其他遇到类似问题的用户都会有帮助。 - FluffyKitten
1
你想在固定在页面顶部的导航菜单中显示汉堡图标，因此需要进行一些更改。
1. 添加导航菜单！
将菜单图标放入页面顶部的 nav 元素 中：
<nav class="navbar">
  <div class="menu-btn">
    <div class="menu-btn__burger"></div>
  </div>
</nav>

2. 将其固定在页面顶部，使用position:fixed和top:0进行滚动：

nav.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px; 
}

3. 将您的汉堡图标的div定位在导航栏中。我们使用position:absolute将其放置在导航栏中的特定位置 - 在此情况下为右上角。

.menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  /* rest of your CSS */ 
}

4. 防止导航栏与内容重叠 由于导航栏是固定的，它不是页面流的一部分，因此其他元素会“忽略”它，并且它将与它们重叠。

因此，我们需要将页面上的内容向下移动，以便它不会被导航栏隐藏，我们可以使用margin或padding来实现：

body {
  padding-top: 100px;
  /* Rest of your CSS */
}

定位技巧参考: CSS Tricks和Mozilla Docs

注意: 我已经从body中删除了你的display: flex;，因为它会破坏内容的布局 - 如果你保留它，所有段落都会连续显示而不是分开显示。

工作示例:

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /*  display: flex; */
  /* remove this or it will mess up your standard text display */
  background: #272727;
  min-height: 100vh;
  position: relative;
  /* make space for the navbar - the fixed nav bar is not part of the "flow" so it will overlap the content */
  padding-top: 100px;
}

p {
  color: white;
}

nav.navbar {
  background: #444;
  position: fixed;
  /* means it will always be stuck to the top of the page */
  top: 0;
  /* places it at the top */
  width: 100%;
  height: 80px;
}

.menu-btn {
  /* Place the element in the exact position we want - top right corner  0,0 */
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}

.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before {
  transform: translateY(-16px);
}

.menu-btn__burger::after {
  transform: translateY(16px);
}


/* ANIMATION */

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- links -->
  <link rel="stylesheet" href="style.css">
  <!-- Top of the Page -->
  <title>Uni High Aquatics</title>
</head>

<body>
  <nav class="navbar">
    <div class="menu-btn">
      <div class="menu-btn__burger"></div>
    </div>
  </nav>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
</body>

</html>

0

有许多方法可以做到这一点

通常情况下HTML是从左边对齐的。如果您需要更改对齐方式，有很多方法..

您可以通过将margin-left : auto;添加到.menu-btn类来轻松实现。

 margin-left : auto;

还有另一种方法可以做到这一点。

首先，您需要删除position: relative；因为一个HTML元素不能拥有两个position属性，然后将以下代码添加到.menu-btn类中。

.menu-btn{
  position: fixed;
  top: 0;
  right: 0;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接