如何将我的汉堡菜单移动到右上角？
[英]How can I move my hamburger menu to the top right?
问题描述
So I'm just getting into JavaScript and HTML and what not, and I'm struggling a little.
所以我刚刚进入 JavaScript 和 HTML 等等，我有点挣扎。 I'n not quite sure how to position the hamburger menu I made to the top right of the website for desktop and for mobile.我不太确定如何 position 我在网站右上角为桌面和移动设备制作的汉堡菜单。 Any help is much appreciated!任何帮助深表感谢！
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>
Reminder, I am quite new and am trying to make a website for my coach to use in the future.提醒一下，我是新手，正在尝试制作一个网站供我的教练将来使用。 I seem to not get the hang of css yet, and I don't believe typing right and left in position will work hahaha.我似乎还没有掌握 css 的窍门，而且我不相信在 position 中左右输入会起作用哈哈哈。 So any help is much needed and apprciated!因此，非常需要和赞赏任何帮助！
3 个解决方案
解决方案1
4 已采纳 2020-08-20 05:20:09
just add position: fixed;只需添加position: fixed; and top: 0; right: 0和top: 0; right: 0 top: 0; right: 0 to .menu-btn : 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>
解决方案2
1 2020-08-20 05:52:45
You want to show the hamburger icon in a nav menu fixed at the top of the page, so there are a few things you need to change您想在页面顶部固定的导航菜单中显示汉堡图标，因此您需要更改一些内容
1. Add the navmenu! 1.添加导航菜单！
Put your menu icon into a nav element at the top of the page:将您的菜单图标放入页面顶部的nav element中：
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
2. Make it fixed to the top of the page when you scroll using position:fixed and top:0 : 2.使用position:fixed和top:0滚动时将其固定在页面顶部：
nav.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
3. Position the div for your hamburger icon in the navbar. 3. Position 导航栏中汉堡包图标的 div 。 We use position:absolute to put it exactly where we want it in the nav bar - in this case top right我们使用position:absolute将它准确地放在导航栏中我们想要的位置 - 在这种情况下是右上角
.menu-btn {
position: absolute;
top: 0;
right: 0;
/* rest of your CSS */
}
4. Prevent the navbar from overlapping the content Because the navbar is fixed, it is not part of the page flow so the other elements "ignore" it and it will overlap with them. 4.防止导航栏与内容重叠因为导航栏是固定的，它不是页面流的一部分，所以其他元素“忽略”它，它会与它们重叠。
Therefore we need to move the content on the page down so it isn't hidden behind the navbar, We can use that using margin or padding:因此我们需要将页面上的内容向下移动，这样它就不会隐藏在导航栏后面，我们可以使用边距或填充来使用它：
body {
padding-top: 100px;
/* Rest of your CSS */
}
Handy References for Positioning : CSS Tricks and Mozilla Docs方便的定位参考： CSS Tricks and Mozilla Docs
Note : I have removed your display: flex;注意：我已经删除了你的display: flex; from the body because it messes up the layout for the content - if you keep it in, all the paragraphs are displayed in continuous lines instead of separate lines for example.从body中删除，因为它弄乱了内容的布局 - 如果您保留它，所有段落都以连续行而不是单独的行显示。
Working Snippet:工作片段：
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>
解决方案3
0 2020-08-20 05:34:09
You can do it many way你可以通过很多方式做到这一点
generally html align from left.通常 html 从左对齐。 if you need to change alignment there is many way..如果你需要改变 alignment 有很多方法..
you can simply do it by adding margin-left: auto;你可以简单地通过添加margin-left: auto; to .menu-btn class到.menu-btn class
margin-left : auto;
There is other way do it..还有别的办法。。
Firstly you need to remove position: relative ;首先你需要删除position: relative ; because one html element can't hold two position property then add code below to .menu-btn class因为一个 html 元素不能容纳两个position属性然后将下面的代码添加到.menu-btn class
.menu-btn{
position: fixed;
top: 0;
right: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.