Question

我已经设置了一个带有关闭图标的汉堡菜单。我只是不确定如何通过单击一下即可关闭汉堡菜单。我唯一能做的就是完全重新加载页面。也许有一些jquery可以用来解决这个问题。

关闭菜单按钮是菜单列表中的项目1。

这是我的代码。

    <div class="menu-wrapper">

  <nav>

    <a href="#" id="menu-icon"></a>

<ul class="header-menu">
  <li><a href="#" id="close-menu"><i class="far fa-window-close"></i></a></li>
  <li class="current"><a href="home.html">Home</a></li>
  <li><a href="store.html">Prints</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="tutorial.html">Tutorials</a></li>
  <li><a href="sports.html">Sports</a></li>

</ul>
</nav>
</div>

CSS：

  #menu-icon {
  display: hidden;
    width: 40px;
    height: 40px;
    background: url(../img/menu-icon.png) center;
    text-decoration: none;
}

#close-menu {
  display: none;
}

@仅媒体屏幕和（最大宽度：600像素）{

  #menu-icon {

display:inline-block;
z-index: 10000;
}

  #close-menu {
    display: inline-block;
    color: black !important;
      font-size: 20px !important;
  }

Answer 1

好的，这是一个如何制作汉堡导航的例子。 Fiddle

HTML：

<nav data-state=closed>
    <a>&times;</a>
    <a href=something.html>Link 1</a>
    <a href=something-else.html>Link 2</a>
    <a href=etc.html>Link 3</a>
</nav>

了解我们如何准备使用data属性切换打开/关闭状态。（我们可以使用一个类，但是在这种情况下我更喜欢使用DA，因为这意味着我们可以切换它；对于一个类，您必须删除一个类并添加另一个，例如，删除“ closed”并添加“ open” ）

结构简单；我们使用一个nav元素，并使用其中的第一个a作为关闭图标。为此，我们使用乘法（时间）实体。

CSS：

nav {
    position: absolute;
    right: 1rem;
    top: 2rem;
    padding: 1rem;
    background-color: #d55 !important;
}
nav[data-state=closed] {
    cursor: pointer;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/220px-Hamburger_icon.svg.png') no-repeat 100%/100%;
    width: 50px;
    height: 50px;
}
nav a { display: block; }
nav a:not(:first-of-type) { border-bottom: solid 1px rgba(0, 0, 0, .2); padding: .8rem 0; }
nav[data-state=closed] * { display: none; }
nav a:first-of-type {
    position: absolute;
    right: .2rem;
    top: -.1rem;
    font-size: 2rem;
    cursor: pointer;
    font-weight: bold;
}

现在这是关键部分，JS：

//get nav element
let nav = $('nav');

//listen for clicks on it
nav.on('click', evt => {

    //...get current state (open vs. closed)
    let curr_state = nav.attr('data-state');

    //...if open, and click was NOT to close icon (first A tag) ignore click
    if (curr_state == 'open' && !$(evt.target).is('a:first-of-type')) return;

    //...otherwise toggle state (open it or close it)
    nav.attr('data-state', curr_state == 'closed' ? 'open' : 'closed');
})

如何使用关闭图标关闭汉堡菜单

1 个答案: