如何将汉堡菜单移至右上角？

问题描述 投票：0回答：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的窍门，而且我不相信在正确的位置上左右打字会起作用哈哈哈。因此，非常需要并感谢任何帮助！

javascript html css
4个回答
5
投票

只需将 

position: fixed;
和 
top: 0; right: 0
添加到 
.menu-btn
：

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>

1
投票

您想在页面顶部固定的导航菜单中显示汉堡包图标，因此您需要更改一些内容

1。添加导航菜单！

将菜单图标放入页面顶部的

nav element
中：

<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。防止导航栏与内容重叠因为导航栏是固定的，所以它不是页面流的一部分，因此其他元素“忽略”它并且它会与它们重叠。

因此我们需要将页面上的内容向下移动，这样它就不会隐藏在导航栏后面，我们可以使用边距或填充来使用它：

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

定位便捷参考：CSS 技巧 和 Mozilla 文档

注意：我已从 

display: flex;
中删除了您的 
body
，因为它弄乱了内容的布局 - 例如，如果保留它，所有段落都会以连续行显示，而不是单独的行。

工作片段：

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;
}
0
投票

如何成为所有页面顶部的汉堡菜单选项卡

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.