堆棧內存溢出
  簡體   English   中英

嘗試為響應式菜單定位漢堡包圖標

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

 原文  2022-07-15 01:20:33  2   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