圆形动画汉堡菜单未打开菜单项

Question

Ì 找到了一个很酷的脚本来显示“圆形动画”汉堡菜单，请参阅 https://jsfiddle.net/sigug/5ohmne6g/25/ 我有一个 ul 菜单项列表，它们目前没有显示，因为它们是“显示：无”。当我删除它时，它们就在那里（显然）。 现在如何使用单击菜单时弹出的动画“圆圈”来显示它们？ 由于它们在动画的“外部”，是否只能将它们淡入“之后”或其他什么？

HTML

<div class="menu"><button class="nav-tgl" type="button" aria-label="toggle menu"><span aria-hidden="true"></span></button>
    <nav class="nav">
        <ul>
            <li>element one</li>
            <li>element two</li>
            <li>element three</li>
            <li>element four</li>
        </ul>
    </nav>
</div>

CSS

.cd-nav-trigger {
  top: 18px;
  right: 5%;
  height: 44px;
  width: 44px;
  z-index: 5;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.cd-overlay-nav, .cd-overlay-content {
  /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
  position: fixed;
  top: 18px;
  right: 5%;
  height: 4px;
  width: 4px;
  transform: translateX(-20px) translateY(20px);
}

.cd-overlay-nav span, .cd-overlay-content span {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: scale(0);
}

.cd-nav-trigger .cd-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #ffffff;
  z-index: 10;
}

.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon:after {
  /* upper and lower lines of the menu icon */
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transition: transform .3s;
}

.cd-nav-trigger .cd-icon::before {
  transform: translateY(-6px) rotate(0deg);
}

.cd-nav-trigger .cd-icon::after {
  transform: translateY(6px) rotate(0deg);
}

.cd-nav-trigger.close-nav .cd-icon {
  /* user clicks on the .cd-nav-trigger element - transform the icon */
  background-color: rgba(255, 255, 255, 0);
}

.cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after {
  background-color: white;
}

.cd-nav-trigger.close-nav .cd-icon::before {
  transform: translateY(0) rotate(45deg);
}

.cd-nav-trigger.close-nav .cd-icon::after {
  transform: translateY(0) rotate(-45deg);
}

.cd-nav-trigger::before, .cd-nav-trigger::after {
  /* 2 rounded colored backgrounds for the menu icon */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  transition-property: transform;
}
.cd-nav-trigger::before {
  background-color: #091d23;
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}
.cd-nav-trigger::after {
  background-color: #ffb441;
  transform: scale(0);
  transition-duration: 0s;
  transition-delay: 0s;
}
.cd-nav-trigger.close-nav::before {
  /* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */
  transform: scale(0);
}
.cd-nav-trigger.close-nav::after {
  /* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}

jQuery

const menu = document.querySelector('.menu');
const btn = menu.querySelector('.nav-tgl');
btn.addEventListener('click', evt => {
  menu.classList.toggle('active');
})
``

Answer 1

这是一个全 CSS 解决方案。我没有使用事件，而是使用带有标签的复选框作为按钮。

HTML

<div class="nav">
    <input type="checkbox" class="nav__checkbox" id="nav-toggle">
    <label for="nav-toggle" class="nav__button">
      <span class="nav__icon"></span>
    </label>

    <div class="nav__background"></div>

    <nav class="nav__menu">
        <ul class="nav__list">
            <li class="nav__item">Item1</li>
            <li class="nav__item">Item2</li>
            <li class="nav__item">Item3</li>
            <li class="nav__item">Item4</li>
        </ul>
    </nav>
</div>

CSS

.nav__checkbox{
  display: none;
}

.nav__button{
  background-color: #fff;
  position: fixed;
  height: 4.375rem;
  width: 4.375rem;
  border-radius: 50%;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 20;
  cursor: pointer;
}

.nav__background{
  background-image: linear-gradient(#000, #000);
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 50%;
  position: fixed;
  top: 2.8125rem;
  right: 2.8125rem;
  z-index: 10;
  transition: transform .6s ease;
}

.nav__menu{
  height: 100vh;
  position: fixed;
  color:#00f;
  top: 0;
  left: 0;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  width: 0;
  transition: all .6s ease;
}

.nav__checkbox:checked ~ .nav__menu{
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.nav__checkbox:checked ~ .nav__background{
  transform: scale(20);
}

body{
  background-color: #eee;
}

这是链接

https://jsfiddle.net/1wcpz3ua/8/

Answer 2

您可以使用仅包含“显示：无”的单独类，并将其添加到脚本开头的列表中。根据我的经验，切换未硬编码到 HTML 中元素的类总是更容易。然后您只需使用 JQUERY 选择元素并从按钮菜单中单独切换新类，如下所示：

jquery：

const menu = document.querySelector('.menu');
const btn = menu.querySelector('.nav-tgl');
$('.nav ul').addClass("hidden");
btn.addEventListener('click', evt => {
  menu.classList.toggle('active');
  $('.nav ul').toggleClass("hidden");
})

CSS：

.hidden {
  display: none;
}

JSfiddle