I'm attempting to create a vertical category menu similar to the one on . I've successfully implemented the vertical menu with transition effects. However, my issue is that I only want the transition to occur the first time a category is clicked. Subsequently, I want all elements within the category to open without any transition.
#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_info_part {
/* width: 75%; */
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: rgba(246, 212, 160, .9);
/* transform: translateX(-100%); */
/* opacity: 0; */
visibility: hidden;
transition: all 0.5s;
transition-duration: 0.5s;
z-index: -1;
left: 25%;
overflow: hidden;
width: 0;
}
#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_left_list > ul > li:hover .category_info_part{
display: block;
/* transform: translateX(0%); */
/* opacity: 1; */
visibility: visible;
overflow: hidden;
width: 863px;
}
Currently, the transition effect applies to all elements within the menu. My goal is for the transition to only occur on initial click, and then stay static. Is there a way to achieve this? Thank you in advance.