Estoy buscando crear una barra lateral receptiva como navegación para mi página. Me gustaría que la barra lateral tuviera propiedades seleccionadas y flotantes. Esto es lo que estoy tratando de hacer que la opción seleccionada aparezca como:
Imagen de la barra lateral: opción seleccionada (activa)
Quiero que la imagen tenga la altura completa como fondo cuando se seleccione, como si cubriera el lado izquierdo del fondo.
¿Cómo podría hacer esto? Hasta ahora, esto es lo más cerca que tengo de lo que quiero:
.sidebarNav { background-color: white; padding: 10px 10px; border-radius: 5px; } .sidebarNav li { padding: 15px 10px; margin: 5px; } .sidebarNav li img { transition: transform .7s ease-in-out; height: 50px; width: 50px; } .sidebarNav li img:hover { transform: rotate(360deg); } .sidebarNav li:hover { background-color: #4D5BBE; cursor: pointer; border-radius: 10px; } .sidebarNav li:hover img { transform: rotate(360deg); } .sidebarNav li:hover>div { display: block; } .sidebarNav li .active { background-color: #417fbd; padding: 5px 10px !important; } .sidebarNav li:active a { color: white; } .sidebarNav a { color:black; text-decoration: none; padding: 0 20px; } .sidebarNav li:hover a { color: white; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <ul class="sidebarNav nav navbar-nav"> <li class="active"> <span><img src="https://cdn-icons-png.flaticon.com/512/287/287221.png?w=360"/></span><a href="#"> Ranks</a> </li> <li><a href="">Rank Upgrades</a></li> <li><a href="">PokeBoxes</a></li> <li><a href="">Crate Keys</a></li> <li><a href="">Kits</a></li> <li><a href="">Plushies</a></li> <li><a href="">Commands</a></li> <li><a href="">PokePass</a></li> <li><a href="">Miscellaneous</a></li> <li><a href="">Shiny Party</a></li> </ul>Creo que puede cambiar el HTMl, por ejemplo, puede hacer que el enlace de "clasificación" sea un elemento de bloque y aplicar el fondo solo a ese elemento, y luego simplemente mover el "img" a la derecha con una posición relativa/absoluta para superponer el enlace.
También puede intentar usar linear-gradient para crear un fondo de este tipo sin cambios en HTML.
.sidebarNav li.active { background: linear-gradient(90deg, transparent 35px, #417fbd 35px); padding: 0px 10px; border-radius: 10px; }Ejemplo:
.sidebarNav { background-color: white; padding: 10px 10px; border-radius: 5px; } .sidebarNav li { padding: 15px 10px; margin: 5px; } .sidebarNav li img { transition: transform .7s ease-in-out; height: 50px; width: 50px; } .sidebarNav li img:hover { transform: rotate(360deg); } .sidebarNav li:hover { background-color: #4D5BBE; cursor: pointer; border-radius: 10px; } .sidebarNav li:hover img { transform: rotate(360deg); } .sidebarNav li:hover>div { display: block; } .sidebarNav li.active { background: linear-gradient(90deg, transparent 35px, #417fbd 35px); padding: 0px 10px; border-radius: 10px; } .sidebarNav li:active a { color: white; } .sidebarNav a { color:black; text-decoration: none; padding: 0 20px; } .sidebarNav li:hover a { color: white; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <ul class="sidebarNav nav navbar-nav"> <li class="active"> <span><img src="https://cdn-icons-png.flaticon.com/512/287/287221.png?w=360"/></span><a href="#"> Ranks</a> </li> <li><a href="">Rank Upgrades</a></li> <li><a href="">PokeBoxes</a></li> <li><a href="">Crate Keys</a></li> <li><a href="">Kits</a></li> <li><a href="">Plushies</a></li> <li><a href="">Commands</a></li> <li><a href="">PokePass</a></li> <li><a href="">Miscellaneous</a></li> <li><a href="">Shiny Party</a></li> </ul>Siguiendo con la respuesta de Telman...
Me gustaría eliminar cualquier propiedad en el .active li y moverlas al li sobre el que estoy actualmente.
Imagen de la opción de navegación ".active"
Por ejemplo, si pasara el cursor sobre "Actualizaciones de rango" debajo del li ".activo", eliminaría el fondo y la imagen, y los movería al li actual sobre el que estoy pasando el mouse.
¿Como se puede hacer esto?
