Actually i'm stuck on my dropdown menu. I want to imitate the behavior of a select, option with a ul, li.
If I click on the second li I want it to take the place of the first li without deleting the latter.
Like the behavior of the method appendChild() but without removing the old element.
const listMenu = Array.from(document.querySelectorAll('ul li'))
const menu = document.querySelector('ul')
const arrow = document.querySelector('ul')
let isDisplay = true
function openMenu() {
listMenu.slice(1).forEach(list => {
list.style.display = 'block'
arrow.classList.add('arrow-up')
isDisplay = false
})
}
function closeMenu() {
listMenu.slice(1).forEach(list => {
list.style.display = 'none'
arrow.classList.remove('arrow-up')
isDisplay = true
})
}
function displayMenu() {
if (isDisplay) {
openMenu()
} else {
closeMenu()
}
}
closeMenu()
menu.addEventListener('click', displayMenu)ul {
width: 170px;
list-style-type: none;
display: flex;
flex-direction: column;
color: #fff;
font-weight: bold;
font-size: 1.1em;
position: relative;
border: 1px solid #901c1c;
border-radius: 5px;
padding: 0;
cursor: pointer;
}
li {
background-color: #901c1c;
padding: 20px 20px;
}
li:not(:first-child) {
position: relative;
}
li:not(:first-child)::before {
content: "";
position: absolute;
top: 0px;
left: 5px;
width: 90%;
height: 1px;
background-color: rgb(255, 255, 255);
}
ul::after {
content: "";
position: absolute;
right: 25px;
top: 22px;
width: 0.6em;
height: 0.6em;
border-left: 0.2rem solid rgb(255, 255, 255);
border-bottom: 0.2rem solid rgb(255, 255, 255);
transform: rotate(315deg);
}
.arrow-up::after {
transform: rotate(135deg);
top: 28px;
}<ul>
<li id="popularity">Popularité</li>
<li id="date">Date</li>
<li id="title">Titre</li>
</ul>
