Home-theater-designers
Sin lugar a dudas, puede crear un menú móvil conmutable utilizando marcos CSS como TailWind o BootStrap.
Pero, ¿cuál es el concepto detrás de esto? ¿Y cómo se puede hacer uno desde cero sin depender de estos marcos CSS?
Hacer lo anterior usted mismo le brinda un control total de personalización. Entonces, sin más preámbulos, aquí le mostramos cómo crear un menú móvil conmutable utilizando su lenguaje de programación preferido.
Cómo crear su menú móvil conmutable
Si aún no lo ha hecho, abra la carpeta de su proyecto y cree los archivos de su proyecto (HTML, CSS y JavaScript).
A continuación, verá ejemplos del código que necesita para los tres tipos. Y si aún no lo ha hecho, considere descargar estas aplicaciones para aprender código antes de seguir leyendo.
Comenzaremos con HTML:
|_+_|CSS:
|_+_|
Agregar JavaScript:
las mejores aplicaciones de edición de video para Android|_+_|
Así es como se ve una salida de trabajo cuando hace clic en la barra de menú:
El menú se puede alternar, por lo que al hacer clic en la barra nuevamente, o en cualquier lugar dentro de la página, se ocultan las navegaciones.
Relacionado: Elementos del sitio web de estilo con un degradado de fondo CSS
Es posible que su navegador no admita ocultar el contenido cuando hace clic en cualquier lugar dentro de su página web. Puede intentar forzar esto mediante el uso de un destino de evento y un bucle de JavaScript. Puede hacerlo agregando el siguiente bloque de código a su JavaScript:
|_+_|Así que aquí hay un resumen de lo que acaba de hacer: creó tres líneas usando el div etiqueta de HTML. Ajustó su altura y ancho y los colocó en su DOM. Luego les diste un evento de clic usando JavaScript.
Relacionado: Cómo hacer un sitio web: para principiantes
Establece la visualización inicial de sus navegaciones en ninguno para ocultarlos cuando se carga la página. Entonces el hacer clic evento en las tres líneas alterna estas navegaciones basadas en una clase instanciada de JavaScript ( desplegado ). Finalmente, usó esta nueva clase para mostrar las navegaciones usando CSS y JavaScript toggleContents método.
Relacionado: Tendencias de diseño neumorfico en HTML, CSS y JavaScript
El resto del CSS, sin embargo, depende de su preferencia. Pero el del fragmento CSS de ejemplo aquí debería darte una idea de cómo diseñar el tuyo.
Sea más creativo al construir su sitio web
Hacer un sitio web visualmente atractivo requiere algo de creatividad. Y es más probable que un sitio web fácil de usar convierta a su audiencia que uno sencillo.
Aunque aquí le mostramos cómo crear un menú de navegación personalizado, aún puede ir más allá y hacerlo más atractivo. Por ejemplo, puede animar la visualización de las navegaciones, darles un color de fondo y más. Y hagas lo que hagas, asegúrate de que tu sitio web utilice las mejores prácticas de diseño y diseños fáciles de usar para los usuarios.
Cuota Cuota Pío Correo electrónico 15 comandos del símbolo del sistema de Windows (CMD) que debe conocerEl símbolo del sistema sigue siendo una poderosa herramienta de Windows. Estos son los comandos CMD más útiles que todo usuario de Windows debe conocer.
Leer siguiente Temas relacionados- Programación
- HTML
- CSS
- JavaScript
- Consejos de codificación
Idowu es un apasionado de la tecnología inteligente y la productividad. En su tiempo libre, juega con la codificación y cambia al tablero de ajedrez cuando está aburrido, pero también le encanta romper con la rutina de vez en cuando. Su pasión por mostrarle a la gente el camino en torno a la tecnología moderna lo motiva a escribir más.
Más de Idowu OmisolaSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse