How to add closing effect with CSS Keyframe animation dropdown - html

Question

I am trying to add a close effect with Keyframe css to the dropdown menu. I have succeeded with the opening, but I cannot do the same with the close. If you take a look you see the animation on entry, but on exit the menu simply disappears.
Sorry but I'm relatively new, someone kindly explain to me what I'm doing wrong?
I know that I can achieve the same result also with Javascript, but I would like to obtain the result only with css and understand if this is possible.
Updated Snippet: I was looking for an alternative to visibility property because even with hidden menu I have the "ghost container" in front of other elements. I was thinking about display none to block and keyframe animation, but this did not allow me to add a closing effect. Anyway I kept visibility and solved the "ghost container" with height property.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position: relative;
visibility: hidden;
opacity: 0;
top: 50px;
height: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
.mts_dropdown_content.show {
height: 100%;
visibility: visible;
opacity: 1;
top: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>
Original Snippet
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position: relative;
display: none;
animation: fade_in_hide 0.2s;
}
.mts_dropdown_content.show {
display: block;
animation: fade_in_show 0.2s;
}
#keyframes fade_in_show {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes fade_in_hide {
0% {
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: 50px;
}
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

Answer 1

Since you don't want to go the JS route, transitions would be easier here. However, you can't transition display so you'll need to swap that out for visibility and have your menu display set to block from the start and just hide it with visibility and opacity.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover>a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33 !important;
font-weight: 500 !important;
font-size: 13px !important;
}
.icn_button {
margin: 0;
}
.icn_button:before,
.icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -1;
opacity: 0;
top: 50px;
position: relative;
display: block;
visibility: none;
transition: opacity, top, 0.2s linear;
}
.mts_dropdown_content.show {
opacity: 1;
top: 0px;
z-index: 999;
visibility: visible;
transition: opacity, top, 0.2s linear;
}
#keyframes fade_in_show {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes fade_in_hide {
0% {
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: 50px;
}
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>