时间戳

首页 > 解决方案 > 圆形动画汉堡菜单未打开菜单项

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

问题描述

Ì 找到了一个很酷的脚本来显示“圆形动画”汉堡菜单，请参阅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');
})
``

标签： jquerycsshamburger-menu

解决方案

您可以使用仅包含“显示：无”的单独类并将其添加到脚本开头的列表中。根据我的经验，切换未硬编码到 HTML 中元素的类总是更容易。然后，您只需使用 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

推荐阅读