La navegación del sitio web es una consideración muy importante cuando se está diseñando un sitio web. Es el elemento principal de su sitio y probablemente el que recibe la mayor interacción del usuario.
Aunque podemos crear un menú HTML y CSS simple y puro, el uso de JavaScript puede ayudar a aumentar la creatividad y mejorar la experiencia del usuario en general.
menús JavaScript son una forma fantástica de tener un menú de navegación que se destaque y la funcionalidad añadida hace que todo sea más interesante.
Un menú de JavaScript se conoce como barra lateral, navegación de encabezado o menú móvil. JavaScript se usa para agregar hermosas animaciones o mejorar la experiencia del usuario del menú.
Al usar JavaScript, puede hacer que el menú sea más interactivo y creativo: solo se puede controlar los eventos de desplazamiento y clic hasta cierto nivel usando solo CSS.
JavaScript le brinda esa funcionalidad adicional que no puede obtener usando solo HTML y CSS.
Puede crear un menú de navegación sin necesidad de JavaScript pero, al usar JavaScript, puede crear algo más interesante y más interactivo, todos estos ejemplos usan JavaScript para mejorar la experiencia del usuario.
ver la pluma
en CódigoPen.
Se utiliza un efecto de inclinación de página único para mostrar un menú en el lado izquierdo, al hacer clic en el Ãcono de la hamburguesa se activará el menú y se moverá todo el cuerpo principal hacia la derecha en una inclinación.
La animación es suave y el aspecto es único, el menú tiene su propio botón de cierre y el Ãcono de la hamburguesa se desliza convenientemente sobre la pantalla.
ver la pluma
en CódigoPen.
Este genial menú desplegable de JavaScript es un ejemplo fantástico de un menú multipropósito que puede encajar en su propia interfaz de usuario y diseño.
La mayorÃa de los menús desplegables solo tendrán un nivel, pero este menú desplegable de JavaScript tiene varios. Puede seleccionar una subcategorÃa y revelar un nuevo menú; luego, también puede hacer clic en “Atrás” para navegar hasta donde estaba.
Muchas funciones avanzadas y dentro del CSS hay algunas variables agradables y fáciles que puede cambiar para editar el estilo.
ver la pluma
en CódigoPen.
Un menú de JavaScript genial y único que se puede integrar en cualquier diseño de sitio web, cambiar los colores del menú, el estilo de fuente y los colores de fondo para adaptarse a su marca en el CSS: variables fáciles que ya se proporcionan para que las cambie.
La estructura HTML es fácil de seguir y agregar, y JavaScript se usa para animar el menú y alternar ciertas clases en eventos de clic.
ver la pluma
en CódigoPen.
Los menús de JavaScript vienen en todas las formas y tamaños y, aunque este menú está más centrado en dispositivos móviles, aún puede salirse con la suya usándolo como un menú de navegación de encabezado principal.
Eres libre de implementar este diseño en tu propio sitio web como quieras, utilÃzalo como un menú de tablero o como uno centrado en dispositivos móviles.
La animación es muy profesional y el JavaScript es mÃnimo y le muestra cómo puede usar JavaScript adicional para hacer que el estilo CSS sea más dinámico y creativo.
ver la pluma
en CódigoPen.
Un menú de JavaScript creativo e interactivo que es muy atractivo de usar. Al hacer clic en el Ãcono del menú, se desliza suavemente hacia el centro y se revelan las opciones del menú para navegar a otras páginas.
Al hacer clic en un Ãcono de menú, se pasa sin problemas a una nueva página y todo se carga como una aplicación de una sola página. El Ãcono del menú permanece en la misma ubicación, lo que facilita la navegación a otros lugares.
Las animaciones son extremadamente fluidas y no abrumadoras, hay un tono de experiencia de usuario adicional en este ejemplo.
ver la pluma
en CódigoPen.
Estamos tan acostumbrados a las barras de navegación de encabezado tradicionales como esta y funcionan muy bien: los usuarios están familiarizados con este estilo y son fáciles de entender.
Aquà es donde entra JavaScript y ayuda a que el menú sea más interactivo y creativo. Los menús de JavaScript son excelentes para agregar ese estilo único a un menú y hacer que se destaque más.
JavaScript se usa aquà para agregar y eliminar dinámicamente estilos CSS, lo que hace que el menú de JavaScript sea más creativo.
ver la pluma
en CódigoPen.
Si está buscando hacer que una barra lateral sea más interesante y más creativa, este ejemplo es excelente para eso.
Pase el cursor y haga clic en los enlaces y observe cómo se desarrollan las animaciones, todas son fluidas y personalizadas para el Ãcono en sÃ.
JavaScript se utiliza para unir todo y mejorar el estilo CSS para que sea dinámico e interactivo.
ver la pluma
en CódigoPen.
Animaciones de 60 FPS de alto rendimiento donde el menú se transforma en un menú vertical de pantalla completa.
Todos los enlaces del menú tienen un sutil efecto de animación cuando se abre y se cierra el menú.
ver la pluma
en CódigoPen.
Un menú estilo hamburguesa que se desliza hacia afuera para expandirse a Ãconos en los que puede hacer clic. Esto podrÃa usarse como un excelente menú móvil o también para un menú de configuración adicional.
Cambie los colores y los iconos para personalizar este menú de JavaScript y que coincida con el estilo y la identidad de su marca.
JavaScript en este ejemplo se usa para activar estilos CSS y para animación.
ver la pluma
en CódigoPen.
Un basico Menú contextual de JavaScript que se muestra al hacer clic con el botón derecho en cualquier parte de la página.
El estilo es muy simple, por lo que puede personalizarlo completamente según sus necesidades.
El beneficio de usar un menú contextual tan simple es que se siente muy natural. Como si fuera un menú contextual proveniente directamente del navegador.
ver la pluma
en CódigoPen.
Un menú de navegación animado que puede integrar en el diseño de su propio sitio web, utiliza un diseño muy materialista y los Ãconos son mÃnimos.
El texto del Ãcono se muestra suavemente a medida que hace clic en cada elemento del menú y se desliza a la vista.
JavaScript se utiliza para activar y eliminar estilos CSS de forma más dinámica en los eventos de clic.
ver la pluma
en CódigoPen.
Si está buscando un menú de JavaScript que se centre solo en el diseño móvil, este es para usted.
Presenta una maqueta de una aplicación, pero el menú funciona completamente. Al hacer clic en el menú de hamburguesas, se muestra el menú móvil animado.
Las animaciones son sutiles y suaves, y el menú ocupa toda la pantalla y se puede agregar fácilmente, ya que utiliza enlaces HTML normales.
ver la pluma
en CódigoPen.
Un menú de navegación de barra lateral con capacidad de respuesta completa, este ejemplo es muy bueno, ya que puede usarlo como punto de partida para su próximo proyecto.
El menú de navegación viene con algunos Ãconos elegantes y animaciones fluidas que se deslizan hacia abajo por los elementos del menú para expandirse aún más.
JavaScript se usa para agregar y eliminar estilos cuando interactúa con el menú, por lo que ha aumentado la interactividad según lo que haga clic el usuario y las clases dinámicas de CSS.
ver la pluma
en CódigoPen.
Un ejemplo que es extremadamente único y podrÃa ser justo lo que está buscando, muy interactivo y creativo: realmente muestra lo que puede hacer con un poco de JavaScript adicional.
Un menú circular con muchas animaciones y efectos. Puede pasar el cursor sobre los diferentes cÃrculos más pequeños para verlos y, al hacer clic, contarán como seleccionados.
ver la pluma
en CódigoPen.
Un ejemplo completamente funcional con un enfoque en un menú basado en obturador, imágenes verticales como fondos y texto para indicar qué categorÃa de elemento de menú es.
Pase el cursor sobre cada elemento para que se revele la imagen y pueda ver más detalles, los elementos en los que haga clic lo llevarán a esa página.
Este ejemplo incluso tiene su propio menú móvil de hamburguesas.
ver la pluma
en CódigoPen.
Aquà hay otro hermoso menú contextual que usa HTML, CSS y JavaScript.
En este caso, el menú contextual se ve hermoso, moderno y con esquinas redondeadas. ¡Incluso permite el uso de iconos!
Gracias a JavaScript, este menú contextual permite realizar un seguimiento de los eventos de clic realizados en cada uno de sus elementos. Haciéndolo ideal para conectar su propia funcionalidad en él.
Compruébelo usted mismo haciendo clic en los elementos y vea cómo se activan las devoluciones de llamada de JavaScript.
ver la pluma
en CódigoPen.
Pase el mouse sobre los elementos del menú y observe cómo el Ãcono indicador se desliza entre cada enlace, todo controlado a través de JavaScript.
Este ejemplo es muy fácil de expandir, todo lo que tiene que hacer es editar el HTML y agregar más enlaces de menú y el menú acomodará enlaces adicionales.
También puede cambiar fácilmente los estilos de color de este ejemplo a otra cosa. También puede cambiar el efecto rebote simplemente editando la variable rebote a cero en el JS.
ArtÃculos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
