尝试为响应式菜单定位汉堡包图标

Question

I'm trying to create a responsive menu where the hamburger icon pops up under 640px width screen -- the menu mostly works but I cannot figure out how to get my menu items "About," "Work," and "Resume" to appear beneath the hamburger icon - it always overlaps.我正在尝试创建一个响应式菜单，其中汉堡包图标在 640 像素宽度的屏幕下弹出 - 菜单大部分工作但我不知道如何让我的菜单项“关于”、“工作”和“恢复”出现在汉堡图标下方 - 它总是重叠。 I currently have a background color on to at least make it appear clean but I'd appreciate any help on the positioning issue.我目前有一个背景颜色，至少可以让它看起来很干净，但我希望能在定位问题上提供任何帮助。 Thank you in advance!先感谢您！

CSS (sorry for the inelegant code, still new to all of this): CSS（对于不优雅的代码感到抱歉，这对所有这些都是新的）：

/*  ----------------- NAVIGATION ----------------- */
.header_nav {
  display: inline-table;
  list-style: none;
  background-color: #fffef9f7;
  height: 75px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.header_nav ul, .header_nav a {
  list-style: none;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 28px;
  text-transform: uppercase;
}

ul {
  display: block !important;
  list-style-type: disc !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
  padding-inline-start: 40px !important;
}

.header_nav a:hover {
  color: #78F51D;
}

.logo {
  display: inline-block;
  padding-left: 5%;
  padding-top: 25px;
}

.logo img {
  max-height: 45px;
}

.menu {
  display: inline-block;
  float: right;
  padding-right: 5%;
  padding-top: 2px;
}

.menu li {
  padding-left: 20px;
}

.menu .icon {
  display: none;
}

li .icon {
  padding-right: 0px;
}

li {
  padding-left: 12px;
  display: inline-block;
}

/*  ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
  .menu ul li:not(.icon) {display: none;}
  .menu ul li.icon {
    float: right;
    display: block;
    right: 25px;
    top: 25px;
  }
  .menu.responsive {
    background-color:#FFFEF9;
    position: relative;
  }
  .menu.responsive .icon {
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: -1;
  }
  .menu.responsive ul li:not(.icon) {
    float: none;
    display: block;
    top: 100px;
    padding-right: 1%;
    text-align: right;
  }
}

HTML: HTML：

<div class="header_nav">

  <div class="logo">
    <a href="index.html"><img src="images/logo_v3.png"></a>
  </div>

  <div class="menu" id="myMenunav">
    <ul>
      <li><a href="about.html">ABOUT </a></li>
      <li><a href="index.html#work">WORK </a></li>
      <li><a href="Resume.pdf" target="_blank">RESUME </a></li>
      <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">
        <i class="fa-solid fa-burger"></i></a></li>
    </ul>
  </div>

</div>

Answer 1

For the items to appear "below" the hamburger icon, it helps to have both the icon and the menu items inside the same div.对于出现在汉堡图标“下方”的项目，将图标和菜单项放在同一个 div 中会有所帮助。

I changed the icon to be a bit more up ↑ in your html.我在您的 html 中将图标更改为向上 ↑。

I also modified the way your header Bar was working abit.我还修改了标题栏的工作方式。 Mostly by removing the header bar width of 100% (which messes things up if you give it padding, because then its 100% of screen + padding, which makes the header go outside the page.)主要是通过删除 100% 的标题栏宽度（如果你给它填充，这会搞砸，因为它是 100% 的屏幕 + 填充，这会使标题超出页面。）

And added left:0;并添加left:0; and right:0;和right:0; which makes it so it always takes up the full width of the screen.这使得它总是占据屏幕的整个宽度。

Using the css feature called " flexbox " i made it so there always is space between the logo and the menu items.使用名为“ flexbox ”的 css 功能，我做到了，所以徽标和菜单项之间总是有空间。 And using Flexbox you can also easly make things go "beneath each other" using flex-direction:column;并且使用 Flexbox，您还可以使用flex-direction:column;

(A good reference to understand what all these flexbox things do is this website https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) （了解所有这些 flexbox 功能的一个很好的参考是这个网站https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ）

I also added a small javascript snippet, that makes it so you can click on your hamburger to toggle the menu.我还添加了一个小的 javascript 片段，这样您就可以单击汉堡包来切换菜单。 By toggleing a class called "open" that with css we check for to know if the menu should be visible.通过使用 css 切换一个名为“open”的类，我们检查菜单是否应该可见。

Please check the below attached scripts, i have added / modification / to where i have modified your code.请检查下面附加的脚本，我已经添加/修改/到我修改你的代码的地方。

Html Code: html代码：

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="./index.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
        <!-- Added a small script to toggle a class using javascript -->
        <script>
            function toggleMenu(localThis){
                localThis.parentNode.classList.toggle('open');
            }
        </script>
    </head>
    <body>
        <div class="header_nav">
            <div class="logo">
                <a href="index.html">
                    <!-- <img src="images/logo_v3.png"/> -->
                    <!-- temporary logo -->
                    <svg width="50" height="20">
                        <rect width="50" height="20" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
                      </svg>
                </a>
            </div>

            <div class="menu" id="myMenunav">
                <!-- Moved hamburger icon to be over here -->
                <div class="hamburger-toggle" style="display:none;">
                    <a href="javascript:void(0);" onclick="toggleMenu(this)"> <i class="fa-solid fa-burger"></i></a>
                </li>
                </div>
                <ul>
                    <li><a href="about.html">ABOUT </a></li>
                    <li><a href="index.html#work">WORK </a></li>
                    <li><a href="Resume.pdf" target="_blank">RESUME </a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

Css code: CSS代码：

/*  ----------------- NAVIGATION ----------------- */
.header_nav {
    display: inline-table;
    list-style: none;
    background-color: #FFFEF9F7;
    height: 75px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.header_nav ul,
.header_nav a {
    list-style: none;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: 28px;
    text-transform: uppercase;
}

ul {
    display: block !important;
    list-style-type: disc !important;
    margin-block-start: 1em !important;
    margin-block-end: 1em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    padding-inline-start: 40px !important;
}

.header_nav a:hover {
    color: #78F51D;
}

.logo {
    display: inline-block;
    padding-left: 5%;
    padding-top: 25px;
}

.logo img {
    max-height: 45px;
}

.menu {
    display: inline-block;
    float: right;
    padding-right: 5%;
    padding-top: 2px;
}

.menu li {
    padding-left: 20px;
}

.menu .icon {
    display: none;
}

li .icon {
    padding-right: 0px;
}

li {
    padding-left: 12px;
    display: inline-block;
}

/* Modifications */
body {
    margin: 0;
}

.logo {
    padding: 0px;
    display: flex;
}

.menu {
    padding: 0px;
    float: unset;
    display: flex;
}

.menu ul {
    margin: 0px !important;
    padding: 0px !important;
    list-style-type: none !important;
}

.menu ul li {
    /* padding: 0px; */
}

.header_nav {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    width: unset;
    left: 0;
    right: 0;
}

/*  ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
    /* .menu ul li:not(.icon) { display: none; } */

    /* .menu ul li.icon {
        float: right;
        display: block;
        right: 25px;
        top: 25px;
    }

    .menu.responsive {
        background-color: #FFFEF9;
        position: relative;
    }

    .menu.responsive .icon {
        position: absolute;
        right: 25px;
        top: 25px;
        z-index: -1;
    }

    .menu.responsive ul li:not(.icon) {
        float: none;
        display: block;
        top: 100px;
        padding-right: 1%;
        text-align: right;
    } */

    /* Modifications */

    .menu {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .hamburger-toggle {
        display: flex !important;
    }

    ul {
        display: none !important;
    }

    ul li {
        padding-top: 20px;
    }

    .hamburger-toggle.open + ul {
        display: flex !important;
        flex-direction: column;
    }
}

尝试为响应式菜单定位汉堡包图标

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-07-15 08:30:09

尝试为响应式菜单定位汉堡包图标

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-07-15 08:30:09

解决方案1
1 已采纳 2022-07-15 08:30:09