Question

我正在尝试通过使用此库中的汉堡包按钮来使我的菜单响应https://jonsuh.com/hamburgers/

我的按钮显示在我的屏幕上但是我不确定我应该使用什么jquery将按钮连接到我的菜单以及当有不同的屏幕尺寸时如何触发它。

这是目前的样子：

这是我的HTML：

  <header id="header" role="banner">
    <div class="header-inner">

        <div id="logoWrapper" class="title-logo-wrapper">
            <div id="logoImage" class="logo-image">
                <a href="#">
                    <img src="./images/zipzap.png" alt="">
                </a>
            </div>
        </div>
        <div id="headerNav">
            <div id="mainNavWrapper" class="nav-wrapper">
            <button class="hamburger hamburger--collapse is-active" type="button">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
                <nav id="mainNavigation">
                <ul>
                    <li class="navigation-item">
                      <a href="#">Home</a>                          
                    </li>
                     <li class="navigation-item">
                      <a href="#">Our Team</a>                          
                      </li>
                     <li class="navigation-item" id="media">
                      <a href="#">Media</a>                          
                     </li>
                     <!-- Logo-->
                    <li class="navigation-item" id="about">
                      <a href="#">About Us</a>                          
                    </li>
                    <li class="navigation-item">
                      <a href="#">Contact Us</a>                          
                     </li>
                     <li class="navigation-item" id="donate">
                      <a href="#">Support Us</a>                          
                      </li>
                    </ul>

                </nav>
            </div>
        </div>
    </div>
</header>

这是我的jquery

 var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $hamburger.toggleClass("is-active");

  });

不知道这是否有帮助，但这是我的css

#donate{
    background-color: #7ED321;
    border-radius: 8px;
}

#header {
     padding: 0 18px;
    position: relative;
}


.header-inner {
    padding: 18px 0;
}

#header #logoWrapper, #header #siteTitleWrapper {
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    text-align: center;
}

#header #logoWrapper, #header #siteTitleWrapper, #header #headerNav {
    display: inline-block;
    vertical-align: middle;
}

#mainNavWrapper nav a, #mainNavWrapper nav a:visited {
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:15px;
}

#mainNavigation li{
    display:inline;

任何帮助将不胜感激！

Answer 1

一般的想法是在较小的屏幕上隐藏导航并在按钮点击时显示。

基本示例（您可以将其应用于您的设计）：

HTML：

<a href="#" id="toggle-menu">Toggle menu</a>
<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li><a href="#">Separated link</a></li>
  <li><a href="#">One more separated link</a></li>
</ul>

CSS：

ul {
  display: none;
}
li {
  list-style: none;
  display: inline-block;
  padding: 0 10px;
}
a {
  text-decoration: none;
  color: #333;
}
@media (min-width: 800px) {
  ul {
    display: block;
  }
  #toggle-menu {
    display: none;
  }
}
@media (max-width: 800px) {
  ul.active {
    display: block;
  }
  ul.active li {
    display: block;
  }
}

JS：

$('#toggle-menu').click(function(e) {
  e.preventDefault();
  $('ul').toggleClass('active');
});

触发汉堡按钮以使菜单响应

1 个答案:

CODEPEN