堆栈内存溢出
  繁体   English   中英

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

[英]Trying to position the hamburger icon for a responsive menu

 原文  2022-07-15 01:20:33  3   1    html/ css/ responsive/ hamburger-menu

问题描述

我正在尝试创建一个响应式菜单，其中汉堡包图标在 640 像素宽度的屏幕下弹出 - 菜单大部分工作但我不知道如何让我的菜单项“关于”、“工作”和“恢复”出现在汉堡图标下方 - 它总是重叠。 我目前有一个背景颜色，至少可以让它看起来很干净，但我希望能在定位问题上提供任何帮助。 先感谢您！

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：

<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>

1 个解决方案

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

对于出现在汉堡图标“下方”的项目，将图标和菜单项放在同一个 div 中会有所帮助。

我在您的 html 中将图标更改为向上 ↑。

我还修改了标题栏的工作方式。 主要是通过删除 100% 的标题栏宽度（如果你给它填充，这会搞砸，因为它是 100% 的屏幕 + 填充，这会使标题超出页面。）

并添加left:0; 和right:0; 这使得它总是占据屏幕的整个宽度。

使用名为“ flexbox ”的 css 功能，我做到了，所以徽标和菜单项之间总是有空间。 并且使用 Flexbox，您还可以使用flex-direction:column;

（了解所有这些 flexbox 功能的一个很好的参考是这个网站https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ）

我还添加了一个小的 javascript 片段，这样您就可以单击汉堡包来切换菜单。 通过使用 css 切换一个名为“open”的类，我们检查菜单是否应该可见。

请检查下面附加的脚本，我已经添加/修改/到我修改你的代码的地方。

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代码：

/*  ----------------- 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;
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 汉堡图标左对齐的响应式菜单 带有汉堡图标的响应式侧面导航菜单 （汉堡包图标）响应式菜单上带有toggleClass功能的.reveal类未正确定位？ 响应式移动汉堡菜单 如何从菜单汉堡图标中删除固定的 position 下拉汉堡包响应式 带有汉堡菜单的响应式导航 通过 jQuery 的响应式汉堡菜单 响应式导航汉堡包菜单不起作用 在图标上关闭汉堡菜单，点击
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM