汉堡菜单的问题

Question

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

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

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

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

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

<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 方向为行）

在较小的屏幕上：

• 汉堡图标可见

• 标志也可见

• 真正的菜单尚不可见，但具有弹性布局（弹性方向为列）

• 当我们点击汉堡时，菜单会显示出来，使用以下 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();
           }
       });
  })
  

问题：

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

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

$(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();
        }
    });
})

当您的页面折叠为较小的/移动视图时，它会通过您的 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>