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

Question

μ找到了一个很酷的脚本来显示；圆形动画"；汉堡包菜单，请参阅https://jsfiddle.net/sigug/5ohmne6g/25/我有一大堆菜单项，它们目前没有出现，因为它们是"；显示：无"；。当我去掉它的时候，它们就在那里(显然(。我现在如何用动画"；"圆圈"；点击菜单时弹出的？由于它们是"；外部"；在动画中，是否只有可能将它们淡入；之后"；还是什么？

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选择Element，然后从按钮菜单中单独切换新类，如下所示：

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