通过 jQuery 的响应式汉堡菜单

Question

I am new to coding and am struggling to get the template for my nav menu ready.我是编码新手，正在努力准备好导航菜单的模板。 First of all, I want the hamburger to hide whenever I click on it and then the menu opens.首先，我希望汉堡包在我点击它时隐藏，然后菜单打开。 However, I'm still at the beginning, and can't even get the hamburger to hide.然而，我还处于起步阶段，连汉堡都藏不住。 I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.我想使用 jQuery 切换 class “.hamburger-hide”，其中包括 display:none 属性。

this is the html:这是 html：

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
    <title>Navbar</title>
  </head>
  <body>

    <header class="header">
    <h1 class="logo">Logo</h1>

    <nav class="navbar">
      <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact Us</a></li>
        <li class="nav-item"><a href="#">Links</a></li>
      </ul>
    </nav>

  <div class="btn">
    <a class="cta" href="#"><button>Hello World</button></a>
  </div>

  <img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">

    </header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

this is my CSS:这是我的 CSS：

*{                              /*Setting all to 0*/
  padding:0;
  margin:0;
  box-sizing: border-box;      /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}

header {
  display: flex;              /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
  justify-content: space-between;    /*justify-content + align-itmes = center ==> perfect center*/
  align-items: center;
  background-color: #707070;
  padding: 30px 10%;
}

.logo {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  cursor: pointer;
}

button {
  cursor: pointer;
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);    /* letzter ist alpha --> opacity, 1 = 100%*/
  border: none;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: rgba(0, 136, 169, 0.7);  /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
  text-decoration: none;
}

.btn a {
  text-decoration: none;
}

.nav-item {
  list-style: none;
}

.nav-item {
  display: inline-block;                    /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
  padding: 0px 30px;
}

.navbar li a {
  transition: all 0.3s ease 0s;      /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}

.navbar li a:hover {
  color: #0088a9;
}


.nav-item a, button{
  text-decoration: none;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: normal;
}

.hamburger {
  height:40px;
  cursor: pointer;
  position:relative;
}

.hamburger:hover {
  padding:2px;
  border: 2px solid;
  border-radius: 5px;
}

.hamburger-hide {
  display:none;
}

@media (max-width: 768px){
  .nav-list{
    display: none;
  }
  .cta {
    display: none;
  }

}

@media (min-width:769px){
  .hamburger{
    display:none;
  }
}

and this is the jQuery I tried, so that it hides on click.这是我试过的 jQuery ，所以它在点击时隐藏。

        $(".hamburger").click(function(){
  $(".hamburger").toggleClass(".hamburger-hide");
})

Answer 1

Here you go:这里是 go：

https://jsfiddle.net/ap2rzb5x/1/ https://jsfiddle.net/ap2rzb5x/1/

$("#hamburger").click(function(){
  $("#hamburger").toggleClass("hamburger-hide");
  $("#hamburger").toggleClass("hamburger");
})

Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?).总结您只切换了一个 class，不希望您切换它们（切换原来的汉堡包 class？）。 Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.以防万一我匹配的是 ID 而不是 class，这样我就可以切换掉原来的汉堡包，仍然可以用相同的代码匹配它。

Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search.另一个问题是您切换了不是 class 名称的“.hamburger-hide”，它被称为“汉堡隐藏”，该点仅由 jQuery 用作美元搜索。 Same with #hamburger, it will find ID of hamburger not #hamburger-hide.与#hamburger 相同，它会找到汉堡包的ID 而不是#hamburger-hide。

https://api.jquery.com/category/selectors/ https://api.jquery.com/category/selectors/

Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.可能它并没有完全按照您的意愿行事，但我认为它应该让您摆脱困境，并且您应该能够继续做您打算做的事情。

Answer 2

Solution with jQuery for build up Hamburger navbar responsive带有 jQuery 的解决方案，用于构建汉堡导航栏响应

For my example:对于我的例子：

 (function($) { // Begin jQuery $(function() { // DOM ready // If a link has a dropdown, add sub menu toggle. $('nav ul li a:not(:only-child)').click(function(e) { $(this).siblings('.nav-dropdown').toggle(); // Close one dropdown when selecting another $('.nav-dropdown').not($(this).siblings()).hide(); e.stopPropagation(); }); // Clicking away from dropdown will remove the dropdown class $('html').click(function() { $('.nav-dropdown').hide(); }); // Toggle open and close nav styles on click $('#nav-toggle').click(function() { $('nav ul').slideToggle(); }); // Hamburger to X toggle $('#nav-toggle').on('click', function() { this.classList.toggle('active'); }); }); // end DOM ready })(jQuery);

 @charset "UTF-8"; body{ margin:0; }.navigation { height: 70px; background: #6d7993; font-family: montserrat, sans-serif; font-weight: 400; font-style: normal; opacity: 0.88; }.brand { position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; }.brand a, .brand a:visited { color: #ffffff; text-decoration: none; }.nav-container { max-width: 1000px; margin: 0 auto; } nav { float: right; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { float: left; position: relative; } nav ul li a, nav ul li a:visited { display: block; padding: 0 20px; line-height: 70px; background: #6d7993; color: #ffffff; text-decoration: none; } nav ul li a:hover, nav ul li a:visited:hover { background: #4b5569; color: #ffffff; } nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: " ▾"; } nav ul li ul li { min-width: 190px; } nav ul li ul li a { padding: 15px; line-height: 20px; }.nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); } /* Mobile navigation */.nav-mobile { display: none; position: absolute; top: 0; right: 0; background: #6d7993; height: 70px; width: 70px; } @media only screen and (max-width: 798px) {.nav-mobile { display: block; } nav { width: 100%; padding: 70px 0 15px; } nav ul { display: none; } nav ul li { float: none; } nav ul li a { padding: 15px; line-height: 20px; } nav ul li ul li a { padding-left: 30px; }.nav-dropdown { position: static; } } @media screen and (min-width: 799px) {.nav-list { display: block;important: } } #nav-toggle { position; absolute: left; 18px: top; 22px: cursor; pointer: padding; 10px 35px 16px 0px, } #nav-toggle span: #nav-toggle span,before: #nav-toggle span:after { cursor; pointer: border-radius; 1px: height; 5px: width; 35px: background; #ffffff: position; absolute: display; block: content; "": transition; all 300ms ease-in-out: } #nav-toggle span:before { top; -10px: } #nav-toggle span:after { bottom; -10px. } #nav-toggle:active span { background-color; transparent. } #nav-toggle:active span,before. #nav-toggle:active span:after { top; 0. } #nav-toggle:active span:before { transform; rotate(45deg). } #nav-toggle:active span:after { transform; rotate(-45deg): } article { max-width; 1000px: margin; 0 auto: padding; 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <section class="navigation"> <div class="nav-container"> <div class="brand"> <a href="#!">Logo</a> </div> <nav> <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> <ul class="nav-list"> <li> <a href="#!">Home</a> </li> <li> <a href="#!">Contact Us</a> </li> <li> <a href="#!">Link</a> </li> </ul> </ul> </nav> </div> </section>

Updated更新

Solution 2, Using Pure CSS方案二，使用纯CSS

 body { margin: 0; font-family: Helvetica, sans-serif; background-color: #f4f4f4; } a { color: #000; } /* header */.header { background-color: #fff; box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); position: fixed; width: 100%; z-index: 3; }.header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: #fff; }.header li a { display: block; padding: 20px 20px; border-right: 1px solid #f4f4f4; text-decoration: none; }.header li a:hover, .header.menu-btn:hover { background-color: #f4f4f4; }.header.logo { display: block; float: left; font-size: 2em; padding: 10px 20px; text-decoration: none; } /* menu */.header.menu { clear: both; max-height: 0; transition: max-height.2s ease-out; } /* menu icon */.header.menu-icon { cursor: pointer; display: inline-block; float: right; padding: 28px 20px; position: relative; user-select: none; }.header.menu-icon.navicon { background: #333; display: block; height: 2px; position: relative; transition: background.2s ease-out; width: 18px; }.header.menu-icon.navicon:before, .header.menu-icon.navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all.2s ease-out; width: 100%; }.header.menu-icon.navicon:before { top: 5px; }.header.menu-icon.navicon:after { top: -5px; } /* menu btn */.header.menu-btn { display: none; }.header.menu-btn:checked ~.menu { max-height: 240px; }.header.menu-btn:checked ~.menu-icon.navicon { background: transparent; }.header.menu-btn:checked ~.menu-icon.navicon:before { transform: rotate(-45deg); }.header.menu-btn:checked ~.menu-icon.navicon:after { transform: rotate(45deg); }.header.menu-btn:checked ~.menu-icon:not(.steps).navicon:before, .header.menu-btn:checked ~.menu-icon:not(.steps).navicon:after { top: 0; } /* 48em = 768px */ @media (min-width: 48em) {.header li { float: left; }.header li a { padding: 20px 30px; }.header.menu { clear: none; float: right; max-height: none; }.header.menu-icon { display: none; } }

 <header class="header"> <a href="" class="logo">Your Logo</a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Me</a></li> </ul> </header>

通过 jQuery 的响应式汉堡菜单

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-11-30 21:41:10

解决方案2
0 2020-11-30 22:04:13

Updated更新

通过 jQuery 的响应式汉堡菜单

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-11-30 21:41:10

解决方案2 0 2020-11-30 22:04:13

Updated更新

解决方案1
0 已采纳 2020-11-30 21:41:10

解决方案2
0 2020-11-30 22:04:13