<nav class="icon-nav" aria-label="Navigation">
<button class="icon-nav__toggle" title="Show Navigation">
<span class="t-hidden">Show navigation</span>
<svg class="icon-nav__toggle__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M992 384h-352v-352c0-17.672-14.328-32-32-32h-192c-17.672 0-32 14.328-32 32v352h-352c-17.672 0-32 14.328-32 32v192c0 17.672 14.328 32 32 32h352v352c0 17.672 14.328 32 32 32h192c17.672 0 32-14.328 32-32v-352h352c17.672 0 32-14.328 32-32v-192c0-17.672-14.328-32-32-32z"></path>
</svg>
</button>
<ul class="icon-nav__actions" aria-hidden="true">
<li>
<button class="icon-nav__action icon-nav__action--edit" title="Edit">
<span class="t-hidden">Edit</span>
<svg class="icon-nav__action__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"></path>
</svg>
</button>
</li>
<li>
<button class="icon-nav__action icon-nav__action--new" title="New">
<span class="t-hidden">Add</span>
<svg class="icon-nav__action__icon" role="presentation" viewBox="0 0 26 26" width="26" height="26"><path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"/></svg>
</button>
</li>
<li>
<button class="icon-nav__action icon-nav__action--delete" title="Delete">
<span class="t-hidden">Delete</span>
<svg class="icon-nav__action__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M128 320v640c0 35.2 28.8 64 64 64h576c35.2 0 64-28.8 64-64v-640h-704zM320 896h-64v-448h64v448zM448 896h-64v-448h64v448zM576 896h-64v-448h64v448zM704 896h-64v-448h64v448z"></path><path d="M848 128h-208v-80c0-26.4-21.6-48-48-48h-224c-26.4 0-48 21.6-48 48v80h-208c-26.4 0-48 21.6-48 48v80h832v-80c0-26.4-21.6-48-48-48zM576 128h-192v-63.198h192v63.198z"></path>
</svg>
</button>
</li>
</ul>
</nav>
:root {
--color-button: #B82601;
}
$-button-duration: .2s;
@mixin -buttons-reveal($number: 3, $grow: grow) {
li {
@if $grow == grow {
animation-name: fade-in;
opacity: 0;
} @else {
animation-name: fade-out;
opacity: 1;
}
animation-duration: $-button-duration / $number;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@for $i from 1 through $number {
$delay: $-button-duration * (($number - $i) / $number);
@if $grow == grow {
li:nth-child(#{$number + 1 - $i}) {
animation-delay: $delay;
}
} @else {
li:nth-child(#{$i}) {
animation-delay: $delay;
}
}
}
}
// Hidden text for screenreaders
.t-hidden {
width: 1px;
height: 1px;
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
// Menu
.icon-nav {
display: flex;
align-items: center;
.icon-nav__actions {
padding: 0;
display: flex;
align-items: center;
border: none;
list-style-type: none;
li {
opacity: 0;
}
&.active:not(.removing) {
@include -buttons-reveal(3, grow);
}
&.removing {
@include -buttons-reveal(3, fade);
}
}
}
// Buttons
.icon-nav__toggle,
.icon-nav__action {
margin: 1em;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
text-align: center;
background-color: var(--color-button);
border-radius: 50%;
border: none;
cursor: pointer;
path {
fill: #fff;
}
&:focus {
outline: 0;
box-shadow: 0 0 0 2px skyblue;
}
&:active {
outline: 0;
box-shadow: 0 0 5px gray;
}
}
.icon-nav__toggle {
transition: all .25s ease-out;
path {
fill: #fff;
}
&:hover {
--color-button: #565656;
transform: rotate(90deg);
}
&.active {
transform: rotate(135deg);
}
}
.icon-nav__action {
&:hover {
path {
fill: darken(#fff, 10%);
}
}
}
.icon-nav__action--edit {
--color-button: #4ABDAC;
}
.icon-nav__action--new {
--color-button: #062F4F;
}
.icon-nav__action--delete {
--color-button: #E37222;
}
// Animation
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
View Compiled
let timer;
let toggleIcon = document.querySelector('.icon-nav__toggle');
let revealWrapper = document.querySelector('.icon-nav__actions');
toggleIcon.addEventListener('click', () => {
clearTimeout(timer);
if (revealWrapper.classList.contains('active')) {
revealWrapper.className = revealWrapper.className.replace(' active', ' removing');
timer = setTimeout(function() {
revealWrapper.className = revealWrapper.className.replace(' removing', '');
toggleIcon.className = toggleIcon.className.replace(' active', '');
revealWrapper.setAttribute('aria-hidden', 'true');
revealWrapper.setAttribute('aria-expanded', 'false');
}, 200);
} else {
revealWrapper.className += ' active';
toggleIcon.className += ' active';
revealWrapper.setAttribute('aria-expanded', 'true');
revealWrapper.setAttribute('aria-hidden', 'false');
}
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.