如何将汉堡菜单图标放在标题的右侧？
[英]How do I place my Hamburger Menu icon on the right side of my Title?
问题描述
如何将汉堡菜单图标放在网页名称的右侧？ 所以它看起来像这样：（汉堡图标）工具
下图显示“工具”一词与汉堡图标重叠。 我要他们并排。 我尝试将汉堡包和单词放入单独的容器中，但结果不正确。
图片下方是我当前的代码。
当前导航栏
通缉导航栏
* { margin: 0; padding: 0; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked+.menu__btn>span { transform: rotate(45deg); } #menu__toggle:checked+.menu__btn>span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked+.menu__btn>span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked~.menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 20px; left: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn>span, .menu__btn>span::before, .menu__btn>span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: .25s; } .menu__btn>span::before { content: ''; top: -8px; } .menu__btn>span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); transition-duration: .25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #CFD8DC; }
<nav class="navbar navbar-expand-lg navbar-custom"> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> <h1>Tools</h1> </nav>
4 个解决方案
解决方案1
0 2022-07-17 14:35:45
body { margin: 0px; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 32px; left: 30px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: 0.25s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; } .menu__box { display: block; position: fixed; top: 0; right: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #eceff1; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); transition-duration: 0.25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: 0.25s; } .menu__item:hover { background-color: #cfd8dc; } .navbar { display: flex; } .nav-brand { margin-left: 55px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-custom"> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> <h1 class="nav-brand" >Tools</h1> </nav> </body> </html>
解决方案2
0 已采纳 2022-07-17 14:37:37
使用flexbox 。 请参阅下面的示例，这只是一个基本示例。
* { margin: 0; padding: 0; box-sizing: border-box; } nav { width: 100%; height: 100px; display: flex; padding: 0 2rem; column-gap: 1rem; align-items: center; background-color: brown; } .hamburger { border: 0; width: 32px; height: 32px; display: grid; background: none; place-items: center; } .hamburger svg { fill: white; } ul { display: none; column-gap: 1rem; list-style: none; } a { color: white; text-decoration: none; font-family: sans-serif; } h1 { color: white; font-family: sans-serif; }
<nav> <button class="hamburger"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path> </svg> </button> <ul> <li><a href="#">Home</a></li> <li><a href="#">test</a></li> </ul> <h1> Tools </h1> </nav>
解决方案3
0 2022-07-17 15:05:17
这不是最佳实践，但在这种情况下，一个简单的解决方法是将以下内容添加到菜单按钮的样式表中：
margin-left: 95%;
这比使用像素特定边距要好，因为它将相对于屏幕（在考虑交叉兼容性时，请记住样式表的其他部分，因为 px 数量在所有设备上保持相同，而如果您使用 % 代替，它与屏幕大小有关）
添加左边距有以下结果：
就像我说的那样，这显然不是最好的方法，使用父容器或网格布局或类似的东西会更容易接受，但样式表中的这一行应该足以快速轻松修复
如果您不熟悉 css 布局，可能值得在 w3 学校查看以下内容： https ://www.w3schools.com/css/css_website_layout.asp
如果您还不熟悉响应式网页设计，也可能值得一看以下内容： https ://www.w3schools.com/css/css_rwd_intro.asp
编辑：
我现在意识到我并没有真正回答您提出的问题，但是我认为您最好的方法是将所有内容包装在父 div 中并使用它们来相应地设置您的元素的样式。
我还认为您应该尝试使用标签而不是 , 并在标签中使用标签来添加您的图标。 有一个关于这个的教程，你可以在下面找到@ W3 Schools https://www.w3schools.com/howto/howto_css_navbar_icon.asp
解决方案4
0 2022-07-17 15:28:49
如果将图标更改为相对位置，则它是相对于其他对象的。 Afaik 你不能用 position: fixed 做到这一点。
您还需要将两者的显示属性更改为 inline-block （否则它们是块模式并占据完整的行）
因为您的菜单框是位置固定的，它将位于按钮的顶部，您将需要另一个按钮来关闭或使框变小（高度 - 顶部栏）
h1, .hamburger-menu{ display: inline-block; } .hamburger-menu{ width: 32px; position: relative; } * { margin: 0; padding: 0; } .my-container { border: 1px solid green; } .my-row { border: 3px solid red; height: 300px; } .my-col { border: 3px dotted blue; } .navbar-custom { background-color: #bb0008; } #menu__toggle { opacity: 0; } #menu__toggle:checked+.menu__btn>span { transform: rotate(45deg); } #menu__toggle:checked+.menu__btn>span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked+.menu__btn>span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked~.menu__box { left: 0 !important; } .menu__btn { /*position: fixed; this needs to leave*/ top: 20px; left: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn>span, .menu__btn>span::before, .menu__btn>span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: .25s; } .menu__btn>span::before { content: ''; top: -8px; } .menu__btn>span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); transition-duration: .25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #CFD8DC; }
<nav class="navbar navbar-expand-lg navbar-custom"> <h1>Tools</h1> <!--Hamburger Menu--> <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">test</a></li> </ul> </div> </nav>
如何阻止我的汉堡包图标停留在顶部栏上，使其出现在侧面菜单中？
[英]How do I stop my hamburger icon from staying with top bar so it appears with the side menu?
如何使用引导程序同时 position 我的汉堡菜单及其在右侧的下拉菜单？
[英]How can I position my hamburger menu and its drop down on the right side at the same time with bootstrap?
单击时如何阻止我的引导程序汉堡包图标和可折叠菜单跳跃？
[英]How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.