汉堡菜单的问题

Posted 2023-03-06

【中文标题】汉堡菜单的问题

【英文标题】：Issues with a hamburger menu

【发布时间】：2021-09-05 08:19:00

【问题描述】：

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

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

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

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

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

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

问题：

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

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

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

感谢任何关于如何构建菜单的建议。

【问题讨论】：

请将您的帖子缩减为一个具体问题并更新您的标题以反映这一点。不要把整个项目扔给我们。见How to Ask。

您也可以单击[<>] stack sn-p 编辑器并在此处而不是在可能删除代码或您可以更改代码以不再反映问题的站点上的其他位置发布问题

看起来这可能是事件绑定的问题，尝试$("#hamburger").on('click',function () 而不是$("#hamburger").click(function () & 是的，对于其他 cmets，请 sn-pify :)

好的，我按照建议将其移至 sn-p 而不是 jsfiddle。我做了一些努力来减少这个问题，但这并不总是可行的。我需要展示 css、导航栏和 javascript 的三个元素。

【参考方案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>