Las barras laterales son un elemento básico de la navegación de un sitio web: son cómodas para los usuarios y garantizan que ciertos elementos de la página estén siempre a la vista. Dentro de ellas, puedes colocar enlaces, menús, widgets, CTAs, anuncios o cualquier otra cosa que desees.
Si estás haciendo tu propio sitio web, es fácil añadir barras laterales con sólo un poco de conocimiento de HTML y CSS. Puedes utilizar un marco de trabajo CSS como Bootstrap CSS para tu barra lateral – esta plantilla de Start Bootstrap proporciona una interfaz de barra lateral simple y amigable para el móvil que puedes probar. O bien, es posible que quieras una implementación de CSS pura.
En este artículo, aprenderás varias formas de hacer una barra lateral con CSS junto con algunos ejemplos de barras laterales. Haremos barras laterales estáticas, barras laterales fijas y pegajosas, barras laterales de página completa, barras laterales en cuadrículas CSS y barras laterales plegables. Es mucho para cubrir, así que vamos a sumergirnos.
/* CSS */.sidebar {height: 100%;width: 150px;position: absolute;left: 0;top: 0;padding-top: 40px;background-color: lightblue;}.sidebar div {padding: 8px;font-size: 24px;display: block;}.body-text {margin-left: 150px;font-size: 18px;}
Como Bootstrap 4 y Bootstrap 3 no proporcionan ningún menú de barra lateral, construiremos 5 soluciones distintas. Cada una de ellas tendrá características y diseño ligeramente diferentes, por lo que puedes elegir la que mejor se adapte a tus necesidades.
Si el elemento colapsable está cerrado por defecto, debe tener un valor de aria-expanded=”false”. Si has configurado el elemento colapsable para que esté abierto por defecto usando una clase .in, establece aria-expanded=”true” en el control en su lugar.
En esta parte, haremos una barra lateral similar pero será fija. Esto significa que no se desplazará junto con la página sino que permanecerá fija en el mismo lugar. Esto se aplicará sólo a los dispositivos más grandes con un ancho de ventana de 768px o más. Toda la página también será responsiva.
En este ejemplo, en lugar de construir una barra lateral que se colapse por completo, construiremos una barra de navegación lateral parcialmente colapsable. El menú lateral se convertirá en una versión comprimida después de hacer clic en el botón de alternancia.
En pantallas más pequeñas, mantendremos la versión comprimida como estado activo por defecto de la barra lateral. Es decir, la versión no comprimida no se utilizará en los móviles y la versión comprimida será visible después de hacer clic en el botón de alternancia.
Si tiene permisos de administración para un espacio, puede personalizar la barra lateral del espacio para que tenga su propio logotipo, cambiar la forma en que se muestra la jerarquía y añadir enlaces de acceso directo para ayudar a navegar a contenidos importantes rápidamente.Para empezar a configurar la barra lateral, seleccione Herramientas del espacio > Configurar barra lateral.Cambiar el nombre y el logotipo del espacio Para cambiar el nombre del espacio:
Para cambiar el logotipo del espacio: Cosas que debe saber:Configurar los enlaces de la barra lateralCambiar las opciones de visualización de la navegaciónAñadir contenido personalizado a una barra lateralPuede personalizar aún más una barra lateral utilizando el marcado wiki para añadir contenido personalizado. Para añadir contenido personalizado a tu barra lateral:Los campos de la barra lateral, la cabecera y el pie de página utilizan marcado wiki, consulta nuestra guía de marcado wiki para obtener ayuda, o echa un vistazo a algunas personalizaciones comunes a continuación.
Históricamente, el propósito principal de la barra lateral ha sido proporcionar ayuda a la navegación del visitante, una función comúnmente necesaria hasta el día de hoy. Estas ayudas a la navegación están diseñadas para ayudar a la gente a moverse por tu sitio y encontrar la información que quieres que vean. La lista de elementos de navegación incluye Categorías, Páginas, Archivos e incluso los posts más recientes. Otra herramienta de navegación que verás en la barra lateral es un formulario de búsqueda para ayudar a la gente a encontrar lo que está buscando en tu sitio.
Esto pone el título Páginas en un encabezado H2 y luego pone las Páginas en una lista debajo del título. Este es sólo un ejemplo de su uso y hay más opciones disponibles para controlar el resultado final de la etiqueta de la plantilla llamada wp_list_pages().
Este ejemplo pone el texto de los enlaces a la derecha y a la izquierda de la pantalla. Puedes cambiar esto por algo más adecuado a la apariencia de tu barra lateral cambiando las referencias de la hoja de estilo o personalizando aún más los enlaces de la entrada siguiente y anterior.