Estoy trabajando en este sitio web: https://sampledemos.online/training/dashboard.html en el que el menú de alternancia oculta el contenido cuando el menú se expande.
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active"> <div class="app-brand demo"> <a href="index.html" class="app-brand-link"> <img class="logo" src="/training/images/weblogo.jpg"> </a> <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto"> <i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i> </a> </div> <div class="menu-inner-shadow"></div> <ul class="menu-inner py-1"> <!-- Dashboard --> <li class="menu-item active"> <a href="course-master-list.html" class="menu-link"> <i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i> <div data-i18n="course">Course Master</div> </a> </li>y estoy usando javascript como se muestra a continuación
<script> function openNav() { $(document).ready(function () { $('#layout-menu').toggleClass('active'); }); } </script>A continuación he usado estilos como este...
#layout-menu.active { width: 64px; } .active~.layout-page { padding-left: 65px !important; } .app-brand .layout-menu-toggle { position: absolute; left: 15rem; border-radius: 50%; } .active .layout-menu-toggle { left: 4rem; } ``` Is there I missed anything in my codings...Si entiendo su pregunta correctamente, lo que sucede es que la 'barra de desplazamiento perfecta' de su complemento está agregando la clase 'ps' a <ul class="menu-inner py-1 ps"> que agrega overflow: hidden !important . Eso significa que todo lo que queda fuera de ese contenedor interno del menú está oculto. Si revisa su inspector de elementos y elimina el desbordamiento: oculto, verá que su menú de alternancia se vuelve visible.