-1

I have a dropdown that appears and disappears when the button is clicked. I would like to animate it with display none to block but I don't know how I could do it.

I am currently animating it with css transition max-height and opacity, the animation is ok but this way the menu content is present even when not seen, I don't want this. I mean that in google console if you pass the mouse in the dropdown area, you can see the content of dropdown.

Can anyone tell me the way to animate display none to block with Javascript and Css? Sorry I'm relatively new to this, appreciate any help, thanks.

Snippet with animation not working: At the end of this snippet you find another one that contains the working animation. The only thing that changes between the two snippets is adding display: none; to the .mts_dropdown_content class and adding display: block; to the .mts_dropdown_content.show class.

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: 20%;
   background: #282c33!important;
   font-weight: 500!important;
   font-size: 13px!important;
   position:absolute;
   right: 20px;
   color: #fff;
}

.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 {
   display: none;
   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;
   opacity: 0;
   top: 50px;
   transition: max-height 0.2s, opacity 0.2s, top 0.2s;
}


.mts_dropdown_content.show {
   display: block;
   opacity: 1;
   top: 0;
   transition: max-height 0.2s, opacity 0.2s, top 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>

Snippet with working animation 

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: 20%;
   background: #282c33!important;
   font-weight: 500!important;
   font-size: 13px!important;
   position:absolute;
   right: 20px;
   color: #fff;
}

.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;
   opacity: 0;
   top: 50px;
   transition: max-height 0.2s, opacity 0.2s, top 0.2s;
}


.mts_dropdown_content.show {
   opacity: 1;
   top: 0;
   transition: max-height 0.2s, opacity 0.2s, top 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>
Snorlax
  • 233
  • 8

0 Answers0