如何使汉堡菜单显示/隐藏在简单的网格/基于Flex的菜单中

Question

我刚刚制作了一个简单的网格/flex菜单。我该怎么做才能使汉堡菜单正常工作，即在单击时显示/隐藏菜单？可以在不使用JavaScript的情况下执行此操作？

我现在拥有的代码如下：

.menu {
    display: grid;
    grid-template: auto / auto 3cm 3cm 3cm 3cm 3cm auto;
    background: #444;
}
.menu-item {
    padding: 10px;
    text-align: center;
    color: #fff;
}
.menu-item:hover {
    background: #fff6;
}
.burger {
    display: none;
    padding: 10px;
    background: #444;
    color: #fff;
}
.burger > div {
    text-align: center;
}
@media (max-width: 20cm) and (orientation: portrait) {
    .menu {
        max-width: 8cm;
        grid-template: 0 auto auto auto auto auto 0 / auto;
    }
    .burger {
        display: flex;
        justify-content: space-between;
    }
}

<div class="burger">
  <div>BURG</div>
  <div>Company Name</div>
</div>
<div class="menu">
  <div></div>
  <div class="menu-item">Home</div>
  <div class="menu-item">Products</div>
  <div class="menu-item">Manuals</div>
  <div class="menu-item">Customers</div>
  <div class="menu-item">Contact</div>
  <div></div>
</div>

Answer 1

这是您的代码和jQuery slidetoggle((函数的一个非常简单的示例。希望可以帮助您获得一个主意。这可以得到很多改进。(减少屏幕宽度，以查看汉堡弹出的JSFIDDLE中弹出(

var _burger = $('.burger');
var _menu = $('.menu');
_burger.on('click', function() {
  console.log("burger clicked");
  _menu.slideToggle();
});

.menu {
  display: grid;
  grid-template: auto / auto 3cm 3cm 3cm 3cm 3cm auto;
  background: #444;
}
.menu-item {
  padding: 10px;
  text-align: center;
  color: #fff;
}
.menu-item:hover {
  background: #fff6;
}
.menu.hide {
  display: none;
}
.burger {
  display: none;
  padding: 10px;
  background: #444;
  color: #fff;
}
.burger>div {
  text-align: center;
}
@media (max-width: 20cm) and (orientation: portrait) {
  .menu {
    max-width: 8cm;
    grid-template: 0 auto auto auto auto auto 0 / auto;
  }
  .burger {
    display: flex;
    justify-content: space-between;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="burger">
  <div>BURG</div>
  <div>Company Name</div>
</div>
<div class="menu">
  <div></div>
  <div class="menu-item">Home</div>
  <div class="menu-item">Products</div>
  <div class="menu-item">Manuals</div>
  <div class="menu-item">Customers</div>
  <div class="menu-item">Contact</div>
  <div></div>
</div>

Answer 2

我可以使用最小的JavaScript进行操作。默认情况下，您希望您的汉堡菜单从汉堡类中显示在屏幕上(position:absolute;left:0;top:0;(，(transform: translate(0, 0);(从Open类中显示。然后，您要翻译Div Off屏幕(transform: translate(-300px, 0);(。通过将300px移动到左侧，它本质上将汉堡菜单从屏幕上移开。

.burger {
    height:100%;
    padding: 10px;
    background: #444;
    color: #fff;
    position:absolute;
    left:0;
    top:0;
}
.open {
  transform: translate(0, 0);
}
.close {
    transform: translate(-300px, 0);
    transition: transform 0.3s ease;
}
function hideMenu() {
  var burgMenu = window.document.getElementById("burg-menu");
  burgMenu.classList.toggle("open");
  burgMenu.classList.toggle("close");
}

这是小提琴