汉堡菜单的问题

Question

我正在玩一个简单的汉堡包菜单，但不知怎么的，我做不对。这个想法。

在较大的屏幕上，页面应该大致如下所示：

在较小的屏幕上，我们会看到一个汉堡菜单，如下所示：

汉堡可能会在点击时展开，如下所示：

到目前为止一切顺利。这是我的主要想法，如何构建它：

<div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> eL</span>Bi
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>
</div>

简而言之，在大屏幕上：

汉堡菜单图标被隐藏
在flex布局中（flex方向为行），logo和真实菜单可见

在较小的屏幕上：

汉堡图标可见
徽标也可见
真正的菜单尚不可见，但具有弹性布局（弹性方向为列）

当我们单击汉堡包时，会显示菜单，方法是使用以下 jquery 代码：

 $(document).ready(function () {
     $("#hamburger").click(function () {
         var visible = $(".home-navbar-menu").is(":visible");
         if (!visible) {
             $(".home-navbar-menu").show();
         } else {
             $(".home-navbar-menu").hide();
         }
     });
})

问题：

展开屏幕并显示更大屏幕的菜单
缩短浏览器并移动到移动版本
打开和关闭移动菜单
展开屏幕

大屏幕的菜单不再可见...代码段：

$(document).ready(function () {
    $("#hamburger").click(function () {
        var visible = $(".home-navbar-menu").is(":visible");
        if (!visible) {
            $(".home-navbar-menu").show();
        } else {
            $(".home-navbar-menu").hide();
        }
    });
})

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

.btn {
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
}

.home-header {
    background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    color: #fff;
}

.home-header .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px 20px
}

.home-header .content h1 {
    font-size: 3rem;
}

.home-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: right;
    color: #fff;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 20px
}

.home-navbar {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 70px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    background: black;
}

.home-navbar-menu a {
    color: #fff;
    padding: 10px 20px;
    margin: 0 5px;
    text-decoration: none;
}

.home-navbar-menu li {
    display: flex;

    align-items: center;
}

.home-navbar-menu a:hover {
    border-bottom: #28a745 2px solid;
}

/* Text colors */
.text-primary {
    color: #28a745;
}

.hamburger {
    display: none;
}

.home-navbar-logo-hamburger {
    display: flex;
    align-items: center;
}

.logo 
{
    margin-left: 20px;
}

.hamburger 
{
    margin-right: 20px;
}


.home-navbar-menu {
    font-size: 1.2rem;
    list-style: none;
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 724px) {

    .hamburger {
        display: block;
    }

    .home-navbar-logo-hamburger {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .home-navbar {
        display: flex;
        flex-direction: column;
    }

    .home-navbar-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        display: none;
    }
    

    .home-navbar-menu a:hover {
        border-bottom: none;
    }

    .home-navbar-menu li {
        margin: 10px 20px;
        padding-left: 10px;
        text-align: center;
        border-bottom: #28a745 2px solid;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
    <script
        src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>

    <!-- Content -->
    <header class="home-header">
        <div class="content">
            <h1>Test!</h1>
            <h2>Test test test</h2>
        </div>
    </header>
    <!-- EO: Content -->

    <!-- Footer -->
    <footer class="home-footer">
        <div>&copy; Acme 2021</div>
    </footer>
    <!-- EO: Footer -->
</body>
</html>

如有任何关于如何构建菜单的建议，我们将不胜感激。

Answer 1

这是你的 media query 加上你的 jQuery 造成的问题。

添加这个可以解决问题：

@media screen and (min-width: 724px) {
  .home-navbar-menu {
        display: flex!important;
    }
}

你的js/jQuery:

$(document).ready(function () {
    $("#hamburger").click(function () {
        var visible = $(".home-navbar-menu").is(":visible");
        if (!visible) {
            $(".home-navbar-menu").show();
        } else {
            $(".home-navbar-menu").hide();
        }
    });
})

当您的页面折叠成 smaller/mobile 视图时，它通过您的 css 隐藏了菜单。当你想再次显示菜单时，你正在使用汉堡菜单切换，因此 jQuery 开始发挥作用；这是 show/hide（在您的情况下（理想情况下）显示 flex/display none）。

当您将菜单设置为在较小的屏幕上隐藏时，您实际所做的是将其设置为 display:none。因此，当返回到更大尺寸的屏幕时，它仍然是隐藏的。

此答案顶部的 media query 强制它重新显示自己，覆盖 jQuery hide.

您还可以通过将 js/jQuery 更改为以下内容来简化它：

最终产品：

$(document).ready(function () {
    $("#hamburger").click(function () {
        $(".home-navbar-menu").toggle();
    });
})

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

.btn {
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
}

.home-header {
    background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    color: #fff;
}

.home-header .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px 20px
}

.home-header .content h1 {
    font-size: 3rem;
}

.home-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: right;
    color: #fff;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 20px
}

.home-navbar {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 70px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    background: black;
}

.home-navbar-menu a {
    color: #fff;
    padding: 10px 20px;
    margin: 0 5px;
    text-decoration: none;
}

.home-navbar-menu li {
    display: flex;

    align-items: center;
}

.home-navbar-menu a:hover {
    border-bottom: #28a745 2px solid;
}

/* Text colors */
.text-primary {
    color: #28a745;
}

.hamburger {
    display: none;
}

.home-navbar-logo-hamburger {
    display: flex;
    align-items: center;
}

.logo 
{
    margin-left: 20px;
}

.hamburger 
{
    margin-right: 20px;
}


.home-navbar-menu {
    font-size: 1.2rem;
    list-style: none;
    display: flex;
    flex-direction: row;
}

@media screen and (min-width: 724px) {
  .home-navbar-menu {
        display: flex!important;
    }
}

@media screen and (max-width: 724px) {

    .hamburger {
        display: block;
    }

    .home-navbar-logo-hamburger {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .home-navbar {
        display: flex;
        flex-direction: column;
    }

    .home-navbar-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        display: none;
    }
    

    .home-navbar-menu a:hover {
        border-bottom: none;
    }

    .home-navbar-menu li {
        margin: 10px 20px;
        padding-left: 10px;
        text-align: center;
        border-bottom: #28a745 2px solid;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
    <script
        src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>

    <!-- Content -->
    <header class="home-header">
        <div class="content">
            <h1>Test!</h1>
            <h2>Test test test</h2>
        </div>
    </header>
    <!-- EO: Content -->

    <!-- Footer -->
    <footer class="home-footer">
        <div>&copy; Acme 2021</div>
    </footer>
    <!-- EO: Footer -->
</body>
</html>

汉堡菜单的问题

Issues with a hamburger menu

html

css

jquery

media-queries

responsive-design