如何将汉堡菜单移到右上方？

时间：2020-08-20 05:17:11

标签： javascript html css

因此，我只涉及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的知识，而且我不相信在左右位置输入都行得通哈哈哈。因此，任何帮助都是非常需要和赞赏的！

3 个答案:

答案 0 :(得分：4)

只需将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)

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

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 Tricks和Mozilla Docs

注意：我已经从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>

答案 2 :(得分：0)

您可以采用多种方式

通常html从左对齐。如果您需要更改对齐方式，则有很多方法。

您只需在margin-left : auto;类中添加.menu-btn即可做到

 margin-left : auto;

还有另一种方法..

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

.menu-btn{
  position: fixed;
  top: 0;
  right: 0;
}
相关问题
最新问题