طرحی سایدمنو حرفه ای با المنتور

تو این آموزش میخوایم یه سایدمنو جذاب با المنتور و css طراحی کنیم که کاربران بتونن به کمک این منو به بخش های مهم سایت دسترسی سریع داشته باشن و یه تجربه کاربری خیلی خوب برای سایتمون ایجاد کنیم.

کدهای CSS:

/*ساید منو*/
selector{
bottom:0px;
margin-top:auto;
margin-bottom:auto;
}
.side-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
}

.side-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




/*منو1*/
selector .menu1 .e-n-menu ul{
display: flex!important;
flex-direction: column!important;
}
selector .menu1 .e-n-menu-title-text{
display: none;
}
selector .menu1:hover{
min-width:220px
}
selector .menu1{
transition:0.3s;
}
selector .menu1:hover .e-n-menu-title-text{
display: block;
}
selector .menu1 .e-n-menu-item{
transition:all 0.3s;
width:40px!important;
margin: 5px 0px;
border-radius: 15px!important;
}
selector .menu1:hover .e-n-menu-item , selector .menu1:hover .e-n-menu-title{
     width:100%!important;
}
selector .e-n-menu-item:hover{
  background-color: #07B9B9;
}
selector .menu1  .e-n-menu-item *{
    cursor: pointer!important;
}
selector .menu1  .e-n-menu-item{
    cursor: pointer!important;
}


/*منو2*/
selector .e-active.e-n-menu-content{
     top:auto!important;
    right: 197px;
}
selector .e-active{
    width: 220px!important;
}
selector .e-active a .elementor-icon-list-icon{
margin-right: -25px;
}
selector .e-active a:hover .elementor-icon-list-icon{
margin-right: 0px;
transition:all 0.3s;
}
selector .e-active a{
padding:0px 10px;
    border-radius: 15px;
    overflow: hidden;
}
selector .e-active a:hover{
   background-color: #00304994;
}


/*دکمه بستن*/
selector .close{
height:40px;
box-shadow: 0 0 4px 0 #6396af;
border-radius: 15px;
right: 10px;
  cursor: pointer;
  transition: all 0.3s;
}


/*ریسپانسیو*/
@media screen and (max-width: 1024px){
selector .menu1:hover .e-n-menu-title-text{
display: none;
}
selector .menu1:hover .e-n-menu-item , selector .menu1:hover .e-n-menu-title{
     width:40px!important;
}
selector .menu1:hover{
min-width:60px
}
selector .e-active.e-n-menu-content{
    top:auto!important;
    right: 36px!important;
}

selector .menu1 .e-n-menu-title{
  cursor: none !important;
}
}

کدهای JS:

<script>
document.addEventListener("DOMContentLoaded", function () {

    const btn = document.querySelector(".close");
    const container = document.querySelector(".side-menu");

    if (btn && container) {

        container.style.transition = "opacity 300ms ease";

        btn.addEventListener("click", function () {

            container.style.opacity = "0";

            setTimeout(function () {
                container.style.display = "none";
            }, 300);

        });

    }

});
document.addEventListener("DOMContentLoaded", function () {

    const menu = document.querySelector(".side-menu");

    if (!menu) return;

    function toggleMenu() {
        if (window.scrollY >= 80) {
            menu.classList.add("show");
        } else {
            menu.classList.remove("show");
        }
    }

    toggleMenu();

    window.addEventListener("scroll", toggleMenu);

});
</script>