I am struggling with creating a mobile drop down menu on wordpress. I would like to make a 180° rotation of the arrow, "on click".
The problem is that I'm on wordpress, and I can't change my html code. So I added a pseudo-element :after in the css to get an arrow.
I would like to know how to select it ( in css or js ) to create and call this rotation.
Thanks a lot for your help, here is the snippet:
.menu-item-has-children .sub-menu .menu-item-object-page a {
margin: 0 0 0 1rem;
}
.mobile-menu .sub-menu {
display: inherit;
transition: height 0.2s;
opacity: 0;
position:relative;
height:0;
padding-top:0;
padding-bottom:0;
visibility: hidden;
}
.mobile-menu li:hover .sub-menu {
opacity: 1;
}
.mobile-menu li:hover .sub-menu li {
height:auto;
padding: 1rem 0;
}
.mobile-menu .sub-menu li {
height:0;
padding-top:0;
padding-bottom:0;
}
.menu-item-has-children:hover .sub-menu {
/*display: block;*/
visibility: visible;
transform: translateY(0px);
}
.mobile-menu .sub-menu li:hover {
background-color: transparent;
}
.mobile-menu .menu-item-has-children > a::after {
content: "\276F";
display: inline-block;
transform: rotate(90deg);
}
.mobile-menu .menu-item-has-children a {
display: flex;
justify-content: space-between;
}
.menu-item-has-children {
position: relative;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
width: 240px;
z-index: 1;
padding: 17px 20px 20px 20px;
background: #FFFFFF;
box-shadow: 0px 10px 10px rgb(115 132 167 / 40%);
border-radius: 0px 0px 20px 20px;
transition: all 0.4s ease;
}
.sub-menu li {
text-decoration: none;
display: block;
width: 100%;
text-align: left;
padding: 15px 5px 15px;
transition: all 0.4s ease;
}<div class="mobile-menu">
<ul class="menu">
<li class="menu-item-has-children">
<a aria-haspopup="true" aria-expanded="false" rel="external">MENU A</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page ">1</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">2</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">3</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">4</li>
</ul>
</li>
</ul>
</div>.menu-item-has-children .sub-menu .menu-item-object-page a {
margin: 0 0 0 1rem;
}
.mobile-menu .sub-menu {
display: inherit;
transition: height 0.2s;
opacity: 0;
position:relative;
height:0;
padding-top:0;
padding-bottom:0;
visibility: hidden;
}
.mobile-menu li:hover .sub-menu {
opacity: 1;
}
.mobile-menu li:hover .sub-menu li {
height:auto;
padding: 1rem 0;
}
.mobile-menu .sub-menu li {
height:0;
padding-top:0;
padding-bottom:0;
}
.menu-item-has-children:hover .sub-menu {
/*display: block;*/
visibility: visible;
transform: translateY(0px);
}
.mobile-menu .sub-menu li:hover {
background-color: transparent;
}
.mobile-menu .menu-item-has-children > a::after {
content: "\276F";
display: inline-block;
transform: rotate(90deg);
/* Add transition timing to match dropdown */
transition: all 0.4s ease;
}
/* New: Add hover and/or focus CSS */
.mobile-menu .menu-item-has-children:hover > a::after {
transform: rotate(-90deg)
}
/* End New */
.mobile-menu .menu-item-has-children a {
display: flex;
justify-content: space-between;
}
.menu-item-has-children {
position: relative;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
width: 240px;
z-index: 1;
padding: 17px 20px 20px 20px;
background: #FFFFFF;
box-shadow: 0px 10px 10px rgb(115 132 167 / 40%);
border-radius: 0px 0px 20px 20px;
transition: all 0.4s ease;
}
.sub-menu li {
text-decoration: none;
display: block;
width: 100%;
text-align: left;
padding: 15px 5px 15px;
transition: all 0.4s ease;
}<div class="mobile-menu">
<ul class="menu">
<li class="menu-item-has-children">
<a aria-haspopup="true" aria-expanded="false" rel="external">MENU A</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page ">1</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">2</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">3</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page ">4</li>
</ul>
</li>
</ul>
</div>