Estoy tratando de hacer una página que tenga un menú lateral, dentro del cual puede haber submenus. Mi problema es que esta fijo el menú y si abro todos los menús, submenus no puedo ver lo que queda abajo. Es decir, solo se ve lo de arriba y no puedo hacer scroll dentro del propio menú lateral.
Mi código HTML, donde se encuentra esa lógica es la siguiente:
<div class="wrapper">
<nav id="sidebar" class="active">
<ul id="sideMenu" style="overflow-y:scroll;" class="list-unstyled components">
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
Y para que se den una idea como se ve adjunto la siguiente imagen
Bueno ahora les muestro mi código CSS, por si ahí esta el error:
.wrapper {
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #B20000;
color: #fff;
transition: all 0.3s;
min-height: 100%;
display: none;
}
#sideMenu{
min-height: 100%;
}
#sidebar.active{
margin-left: -800px;
display: none;
}
#sidebar ul.components{
padding: 20px 0px;
border-bottom: 1px solid #CC0000;
}
ul{
border-bottom: 1px solid black;
}
#sidebar ul p{
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a{
padding: 10px;
font-size: 1.1em;
display: block;
color: white;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #CC0000;
}
#sidebar ul li ul#accesoSub li> a,
#sidebar ul li ul#coreSub li> a,
#sidebar ul li ul li a[aria-expanded="true"] {
color: #fff;
background: #F60000;
}
#sidebar ul li ul li ul li{
padding-left: 10px;
}
#sidebar a:hover,
li:hover{
background-color: #FFF!important;
color: black!important;
text-decoration: none!important;
}
Cabe aclarar, que el menú es desplegable. Es decir cuando hago clic en el icono de hamburguesa se muestra. Gracias al siguiente script de js mas estilo de css:
$(document).ready(function(){
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$('#sidebar').addClass('fixx');
});
});
.fixx{
position: fixed;
z-index: 1;
display: inline-block!important;
}
No intenté mucho que digamos, porque no se por donde esta el problema. Vi algunas paginas, algunos consejos por ejemplo conseguir la altura del menú con esto:
var divHeight;
var obj = document.getElementById("sideMenu");
divHeight = obj.style.height;
console.log(divHeight)
divHeight = obj.style.pixelHeight;
console.log(divHeight)
El primer clg, me devuelve 0 y el segundo undefined.
Intenté colocar el :
style="overflow-y:scroll;"
Tanto en #sidebar y #sideMenu pero en ambos aparece el scroll pero sin la barra para desplazar, como se ve en la imagen.
Antes tenia el height en
#sidebar {
.....
height : 100%;
}
Y recomendaban poner min-height como tengo ahora, pero tampoco me funcionó.
En fin, lo que quiero es que por mas que tenga 40 menú, submenu abiertos quiero que se pueda desplazar por ahí sin que se desplace el scroll de la pagina, pero no se que estoy haciendo mal o que me falta de agregar.
Desde ya, muchas gracias por su ayuda.
overflow: hidden
?