Немного добавить элементов и написать функцию JS
1. Добавить в кнопку бонуса селектор, по которому будет происходить поиск элемента. Это может быть класс или идентификатор. Нужно удалить ссылку, чтобы не было перехода
Ниже два примера (выбери любой):
Добавил класс getBonus
HTML:
<div class="menu"><i class="fa-regular fa-thumbs-up fa-1x getBonus" style="color:#c62fda"></i> <span>Бонус</span></div>
Добавил идентификатор getBonus
HTML:
<div class="menu"><i class="fa-regular fa-thumbs-up fa-1x" style="color:#c62fda" id="getBonus"></i> <span>Бонус</span></div>
2. Добавить кнопки/меню, любой элемент. Сделать скрытым (style="display:none") и добавить селектор по принципу, как указано выше.
Если использовать идентификаторы, то не забывай, что идентификаторы на странице не могу повторяться, они уникальны. И при использовании идентификаторов придется обращаться к каждому элементу "индивидуально". При использовании класса, можно обратиться из JS ко всем элементам с этим классом.
Вариант с классом "bonus"
HTML:
<div class="menu"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 1</span></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 2</span></a></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 3</span></a></div>
Вариант с идентификаторами
HTML:
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x" style="color:#c62fda;display:none" id="bonus1"></i> <span>Бонус 1</span></a></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x" style="color:#c62fda;display:none" id="bonus2"></i> <span>Бонус 2</span></a></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x" style="color:#c62fda;display:none" id="bonus3"></i> <span>Бонус 3</span></a></div>
3. Написать немного JS
Добавить переменную, в которой будем хранить состояние меню: отображено/скрыто
Пишем функцию открытия/закрытия меню
Если openMenu равно 0, значит элементы скрыты и нужно их отобразить, иначе скрыть. Сохранить новое состояние в openMenu.
Ищем элементы с классом
JavaScript:
function openBonus(){
if(openMenu == 0){
document.querySelector(".bonus").style.display = "block";
openMenu = 1;
}else{
document.querySelector(".bonus").style.display = "none";
openMenu = 0;
}
}
Ищем элементы с идентификаторами
JavaScript:
function openBonus(){
if(openMenu == 0){
document.querySelector("#bonus1")style.display = "block";
document.querySelector("#bonus2")style.display = "block";
document.querySelector("#bonus3")style.display = "block";
openMenu = 1;
}else{
document.querySelector("#bonus1")style.display = "none";
document.querySelector("#bonus2")style.display = "none";
document.querySelector("#bonus3")style.display = "none";
openMenu = 0;
}
}
Ну и в конце добавляем обработчик событий, а именно клик по кнопке "Бонус", который запустит функцию openBonus
По классу
JavaScript:
document.querySelector(".getBonus").addEventListener("click", openBonus);
По идентификатору
JavaScript:
document.querySelector("#getBonus").addEventListener("click", openBonus);
Ну и конечный вариант из твоего примера
HTML:
<style>
#user_menu{margin:auto; text-align:center;}
#user_menu div {
background-color: #FFFFFF;
border-radius: 10px;
border: 1px solid #e0e0e0;
box-shadow: 5px 5px 5px -5px rgb(34 60 80 / 60%);
transition: 0.2s;
margin-bottom:10px;
text-align:left;
padding-left:20px;
height:55px;
line-height:55px;
}
#user_menu a{ display:block}
#user_menu span {
letter-spacing: 1.2px;
color: #4C4C4C;
font-size: 18px;
text-transform: uppercase;
color: #2C343C;
font-weight: bold;
margin-left:3px
}
#user_menu div:hover{
background-color:#F9F9F9;
}
#user_menu i{ vertical-align:middle; font-size:26px; width:40px}
</style>
<div id="user_menu">
<div class="menu"><a href="/user/dashboard"><i class="fa-solid fa-desktop-arrow-down fa-1x" style="color:#f16767"></i> <span>Вклады</span></a></div>
<div class="menu"><a href="/user/surfing"><i class="fa-regular fa-hand-pointer fa-1x" style="color:#82ca1c"></i> <span>Серфинг</span></a></div>
<div class="menu"><a href="/user/insert"><i class="fa-light fa-money-bill fa-1x" style="color:red"></i> <span>Пополнить</span></a></div>
<div class="menu"><a href="/user/pay"><i class="fa-light fa-credit-card fa-1x" style="color:#378221"></i> <span>Выплатить</span></a></div>
<div class="menu"><a href="/user/referals"><i class="fa-regular fa-users fa-1x" style="color:#DEAE3F"></i> <span>Рефералы</span></a></div>
<div class="menu"><i class="fa-regular fa-thumbs-up fa-1x getBonus" style="color:#c62fda"></i> <span>Бонус</span></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 1</span></a></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 2</span></a></div>
<div class="menu"><a href="/user/bonus"><i class="fa-regular fa-thumbs-up fa-1x bonus" style="color:#c62fda;display:none"></i> <span>Бонус 3</span></a></div>
<div class="menu"><a href="/user/settings"><i class="fa-solid fa-screwdriver-wrench fa-1x" style="color:#25B4BB"></i> <span>Настройки</span></a></div>
<!--<div class="menu"><a href="/user/hystory"><i class="fa-light fa-history fa-1x" style="color:#b96d2e"></i> <span>История</span></a></div>-->
<div class="menu"><a href="/user/logout"><i class="fa-regular fa-right-from-bracket fa-1x" style="color:#696969"></i> <span>Выход</span></a></div>
</div>
<script>
let openMenu = 0;
function openBonus(){
if(openMenu == 0){
document.querySelector(".bonus").style.display = "block";
openMenu = 1;
}else{
document.querySelector(".bonus").style.display = "none";
openMenu = 0;
}
}
document.querySelector(".getBonus").addEventListener("click", openBonus);
</script>
P.S. Как всегда сам ничего не проверял, должно работать)))
