Un «menú fijo» asegura que la navegación de su sitio web esté siempre visible. Cuando la navegación se coloca en la parte superior de una página, desaparece tan pronto como un visitante se desplaza hacia abajo.
El primer intento de solucionar ese problema fue la introducción de marcos. Afortunadamente, hemos progresado más allá de la tecnología de marcos toscos y ahora podemos implementar una navegación elegante que permanece en un solo lugar.
Vamos a usar el menú fijo (¡o cualquier cosa!) en el complemento de desplazamiento para mantener nuestra navegación. Ese nombre es un bocado, por lo que para simplificar las cosas, me referiré al complemento como «Menú fijo».
¿Qué son los menús fijos o flotantes?
Antes de comenzar, debemos hablar sobre la terminología por un momento. Tanto «pegajoso» como «flotante» se utilizan para describir un elemento de página que no se mueve cuando se desplaza la página.
Si esas palabras parecen contradictorias, es porque lo son. Es difícil imaginar algo «pegajoso» flotando. Pero se puede hacer un argumento para cualquiera de los términos, y ambos se usan comúnmente, por lo que los usaremos aquí indistintamente.
Instalación del complemento de menú fijo
Inicie sesión en su panel de administración de WordPress.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «Menú fijo».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Haga clic en el botón «Activar».
Cómo funciona el menú fijo
El complemento hace que un elemento de página sea pegajoso usando el selector CSS del elemento. No funciona directamente en menús o widgets (aunque sería genial para cualquier desarrollador de complementos). Pero es posible configurar su propia barra de navegación, menú o widget.
Tendremos que investigar un poco para encontrar el selector de CSS para el elemento de página que queremos pegar. Pero debido a que el complemento funciona de la manera que lo hace, es más flexible que una versión de apuntar y hacer clic.
Encontrar selectores de CSS en una página podría ser un tutorial en sí mismo. No puedo cubrir todo el tema aquí, así que usaremos una forma rápida y fácil de encontrar selectores de CSS.
Nuestro ejemplo utiliza Google Chrome «DevTools». Otros navegadores pueden diferir, pero la mayoría tiene una herramienta similar.
Para acceder a DevTools para un elemento en particular, haga clic derecho en él en la pantalla. Los usuarios de Mac utilizarán el clic de CMD.
Quiero saber el selector de CSS para el menú. Eso es lo que quiero «pegar». Así que haré clic con el botón derecho en el menú y haré clic en el enlace «Inspeccionar».
Se abrirá una ventana de DevTools en una ventana separada o como un panel al costado o en la parte inferior de la ventana del navegador.
Como puede ver aquí, hay muchas clases de CSS diferentes resaltadas. Un menú se compone de muchas partes, y lo que muestra DevTools depende de dónde haga clic.
Entonces, ¿qué clase de CSS queremos?
Al pasar el mouse sobre las líneas de código en la ventana «Elementos», notará que las áreas correspondientes se resaltan en la página.
Pasemos el mouse sobre el código de la ventana «Elementos» hasta que se resalte nuestro menú.
De acuerdo, ahí está, pero hay muchos selectores de CSS adjuntos. Hay una ID de CSS y tres o cuatro clases de CSS.
Pero también hay otra área de DevTools que nos guiará hacia lo que estamos buscando.
La sección «Estilos» a la derecha nos dice que cuando nos desplazamos sobre el código de navegación, .main-navigation es la clase.
Así que eso es lo que usaremos.
Es posible que deba hacer un poco de prueba y error al pegar elementos de página complejos que usan varias clases o ID de CSS. Pero en este caso, podemos estar bastante seguros de que .main-navigation funcionará .
Configuración del menú fijo
Bueno. agreguemos el selector .main-navigation a la configuración del complemento y veamos qué sucede.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Configuración» y haga clic en el enlace «Menú fijo (¡o cualquier cosa!)».
Vamos a usar el campo «Elemento adhesivo» para configurar nuestra imagen adhesiva. Ahí es donde ingresamos al selector de CSS.
Las otras opciones, «Espacio entre la parte superior de la página y el elemento fijo», «Comprobar la barra de herramientas de administración», «No pegar el elemento cuando la pantalla es más pequeña que», «No pegar el elemento cuando la pantalla es más grande que», deben ser independientes. explicativo. No usaremos ninguno de ellos para esta demostración.
Ingresaré .main-navigation en el campo «Elemento adhesivo». Asegúrese de comenzar el nombre del selector con un punto.
Desplácese hacia abajo y haga clic en el botón «Guardar cambios».
Ahora podemos ver si nos desplazamos hacia abajo en una página del sitio, el menú permanece visible.
Pero no se ve muy bien, ¿verdad?
Arreglemos eso.
Aplicar un color de fondo a un menú fijo
Nuestro menú fijo o flotante se ve un poco confuso cuando hay otro texto de página debajo. El menú es transparente a propósito, por lo que se verá bien si cambia el color de fondo en su tema. Pero para nuestros propósitos, necesita un color de fondo.
Vamos a hacer eso con «CSS adicional». La ubicación de su CSS adicional depende de su tema. Pero para muchos temas, está en el «Personalizador de temas».
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Apariencia» y haga clic en el enlace «Personalizar».
Haga clic para abrir la sección «CSS adicional».
Defina un color de fondo para nuestra clase, .main-navigation .
|
1
2
3
|
.main-navigation { background-color: #ffffff;} |
Ingrese el color de fondo CSS en el campo «CSS adicional» y haga clic en el botón «Publicar».
Ahora, si nos desplazamos hacia abajo en una página, no podemos ver el texto en nuestro menú.
Pegar otros elementos de la página
El mismo método que usamos para pegar nuestro menú se puede usar para cualquier elemento de página que tenga un selector CSS.
Por ejemplo, podríamos pegar una imagen. Si hacemos clic derecho en una imagen, la etiqueta de la imagen (<img…) se resalta en DevTools.
La clase CSS para la imagen es .wp-image-1692 , y si la agregamos al complemento como hicimos con el selector de menú, cuando nos desplazamos hacia abajo en la página, la imagen permanece visible.
Así que hemos usado el complemento para hacer que un menú y una imagen sean pegajosos. Pero puede flotar o pegar íconos del carrito de compras, botones de llamada a la acción, cualquier elemento de página que tenga un selector de CSS.
Como habrás notado, el complemento está limitado a un solo elemento fijo. El desarrollador dice que una versión futura tendrá la capacidad de configurar múltiples elementos fijos.
Qué sucede si desinstala el complemento Sticky Menu
Si desinstala el complemento, los elementos que usaron el complemento se verán afectados. Los elementos que se configuraron para ser pegajosos volverán a su comportamiento predeterminado.
La usabilidad siempre debe ser nuestra prioridad
Un menú flotante en su sitio de WordPress suele ser algo bueno. Tener las opciones del sitio web disponibles para el visitante en todo momento puede verse como una mejora de la usabilidad.
Usualmente.
Si tiene un menú o navegación grande o molesto, hacerlo flotar continuamente frente al otro contenido del sitio podría volverse molesto. Incluso podría evitar que un visitante vea contenido importante.
Del mismo modo, como en nuestra demostración aquí, flotar una imagen pequeña probablemente no sería el mejor uso para el complemento. Pero encontrar el selector CSS de imagen correcto fue más sencillo que, por ejemplo, encontrar un selector de navegación superior. Es por eso que la imagen se usó como ejemplo.
Cuando descubrimos tecnología de sitios web que hace cosas geniales, es tentador usarla en exceso o mal. Es importante hacer de la usabilidad una prioridad y esforzarse por convertirla en una fuerza positiva en nuestros sitios web.
¿Recuerdas los marcos (y el recuerdo te hace temblar un poco)? ¿Utiliza elementos adhesivos o flotantes en su sitio web? Házmelo saber en los comentarios.