如何將我的漢堡菜單移動到右上角？
[英]How can I move my hamburger menu to the top right?
問題描述
所以我剛剛進入 JavaScript 和 HTML 等等，我有點掙扎。 我不太確定如何 position 我在網站右上角為桌面和移動設備制作的漢堡菜單。 任何幫助深表感謝！
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 的竅門，而且我不相信在 position 中左右輸入會起作用哈哈哈。 因此，非常需要和贊賞任何幫助！
3 個解決方案
解決方案1
4 已采納 2020-08-20 05:20:09
只需添加position: fixed; 和top: 0; right: 0 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
您想在頁面頂部固定的導航菜單中顯示漢堡圖標，因此您需要更改一些內容
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. Position 導航欄中漢堡包圖標的 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 and 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>
解決方案3
0 2020-08-20 05:34:09
你可以通過很多方式做到這一點
通常 html 從左對齊。 如果你需要改變 alignment 有很多方法..
你可以簡單地通過添加margin-left: auto; 到.menu-btn class
margin-left : auto;
還有別的辦法。。
首先你需要刪除position: relative ; 因為一個 html 元素不能容納兩個position屬性然后將下面的代碼添加到.menu-btn class
.menu-btn{
position: fixed;
top: 0;
right: 0;
}
如何阻止我的漢堡包圖標停留在頂部欄上，使其出現在側面菜單中？
[英]How do I stop my hamburger icon from staying with top bar so it appears with the side menu?
使用 React JS 單擊鏈接時如何關閉我的漢堡菜單？ （使用 ReactJS 掛鈎）
[英]How can I close my hamburger menu when clicking on a link using React JS? (using ReactJS hooks)
我怎樣才能讓我的漢堡菜單更小，並在它周圍有一個完美的圓形邊框？
[英]How can I make my hamburger menu smaller and also have a perfect circular border around it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.