1

Alguien sabe como centrar el menu seleccionado, tengo el siguiente caso: Cuando selecciono el menu, aparece en la parte de abajo como se ve en la imagen. pero tengo mas menus abajo, y al seleccionarlos me aparecen abajo y no se cual tengo seleccionado hasta bajar el menu.

introducir la descripción de la imagen aquí

Necesito que al seleccionar un menu, automaticamente me aparezca en el centro de la pantalla como el caso de ma siguiente imagen:

introducir la descripción de la imagen aquí

El codigo html es el siguiente:

    <aside class="bd-sidebar">
    <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Menu</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
        </div>
        <div class="offcanvas-body">
            <nav class="bd-links w-100" th:if="${!#session.getAttribute('listMenuSesion').isEmpty()}" id="bd-docs-nav" aria-label="Docs navigation">
                <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
                    <li class="bd-links-group py-2" th:each="lista : ${#session.getAttribute('listMenuSesion')}" th:if="${lista.idMenu==0}">
                        <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold" >
                            <svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true">
                            <use th:attr="'xlink:href'=${lista.icono}"></use></svg>
                            <span th:text="${lista.menu}" th:remove="tag"></span>
                        </strong>
                        <ul class="list-unstyled fw-normal pb-2 small" >
                            <li th:each="sublista : ${#session.getAttribute('listMenuSesion')}" th:if="${lista.id==sublista.idMenu}">
                                <a th:href="@{/}+${sublista.urlSubmenu}" class="bd-links-link d-inline-block rounded" th:classappend="${sublista.id}==${num} ? 'active' : ''" th:attr="aria-current=${sublista.id}==${num} ? 'page' : ''" th:text="${sublista.submenu}"></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</aside>

1 respuesta 1

1

1) Con Javascript

Se hace usando scrollIntoView

<script>
  document.addEventListener('DOMContentLoaded', () => {
       document.querySelector("a.active").scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
  });
</script>

Donde dice center, es la parte que te centra el scroll

2) Solo con HTML + CSS

Este método hace uso del hash # en la url, para ello necesitas colocar una ID en tus menús. Puedes ocupar la misma logica que agregas la clase active, pero ahora además le agregas el ID active.

Tu link activo debería verse de esta forma

<a class="active" id="active">blablabla</a>

y los no activos

<a href="pagina#active">blablabla</a>

Ojo que en el href va para todos los no activos #active al final de la url

luego el css

#active:target{
    scroll-margin-top: calc(50vh - 20px);
}

Donde el 20px debes cambiarlo por la mitad de la altura de tu menú superior

1
  • Muchas gracias me sirvió el punto, pero al centrar el menu, sube tambien el título del formulario. 2) Solo con HTML + CSS Commented el 25 oct. 2022 a las 4:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.