Blog
Compartimos con Ustedes nuestros conocimientos y de momentos interesantes
31 octubre, 2018

Cómo hacer un menú desplegable?

Cómo hacer un menú desplegable?

Cómo hacer un menú desplegable. Análisis detallado de dos opciones para crear un menú emergente. Usando CSS3 y JavaScript o sin usar este último.

¡Queridos amigos! Hoy vamos a ver objetos importantes en la programación, a saber el menú desplegable. Sabemos que la capacidad de mostrar información hermosa y funcional para el usuario es una buena manera de cualquier proyecto de Internet exitoso.

Primero veamos las variedades de menús emergentes que existen en este momento. Se dividen en varias especies y se analizarán en este artículo.

Tipos de menú desplegable

  • Menú desplegable al pasar el ratón. La vista de menú donde aparece el menú cuando el usuario coloca el puntero del ratón sobre el elemento de menú. Este menú se minimiza si el puntero sale del área del menú.
  • Menú desplegable al hacer clic. El tipo de menú en el que aparece el menú sólo cuando el usuario hace clic en cualquier elemento de menú con el ratón. Se minimiza al hacer clic en un área vacía.

Sólo hay 2 tipos. Pero la placenta es muy diferente. Esto se debe a que el primer tipo se puede implementar tanto con CSS + JavaScript como con CSS3.

En el menú desplegable al hacer clic, usamos JavaScript. Por lo tanto, los dos tipos de menú que vamos a considerar en detalle. Ahora es muy popular usar el menú solo en CSS.

Menú desplegable al pasar el ratón

En esta parte vamos a crear un menú que aparecerá al pasar sobre los elementos del menú del puntero del ratón. En este trabajo, usaremos las capacidades de CSS sin usar los servicios de JavaScript. El menú es muy simple y claro Usted será capaz de crear sus hermosos menús. La principal ventaja de esto es que le permite publicar cualquier información. Usted será capaz de poner allí div-s, tablas y bloques de texto. Imágenes y otros contenidos multimedia incluidos los vídeos.

Menú desplegable al hacer clic en el ratón

Hemos revisado la función de menú al pasar el ratón. ¿Qué pasa si necesitamos que el sistema entienda no el puntero del ratón, sino el clic del botón del ratón? Debe usar las propiedades de JavaScript aquí. El código que voy a mostrar aquí será claro incluso para un principiante. Tenemos que aprender los detalles de sus acciones o simplemente transferir la información al sitio.

En este menú usamos lo siguiente: asignamos una clase al contenedor .vypad_menu – podemos organizar visualmente el menú a voluntad. También asignamos la clase de referencia principal main-item. Esto es necesario para que podamos administrar las propiedades CSS3 como active y: focus. Es a través de estas propiedades podemos hacer que nuestro menú pop-up con un clic del ratón.

Esta línea de código es la única que vamos a tomar de JavaScript. Es necesario para que al hacer clic en el ratón no actualizamos la página y no pasó nada. Este comando es igual al siguiente código onclick = ‘ return false;’. Al hacer clic en el elemento de menú se encenderá el menú, y la transición a través del enlace no será.

Parámetro opcional. Esto es muy importante para nuestro menú, por lo que hacemos que nuestro menú no se desvanezca, sino que se retrase hasta que se produzca la siguiente acción del usuario.

Ahora echemos un vistazo a CSS. Todos los comentarios estarán en el código.

Resultado

Hemos revisado dos tipos de menú desplegable. Uno, al hacer clic, el otro, al pasar el ratón sobre los elementos del menú. Elija Cuál más le guste. ¡Buena suerte!

Epígrafes: ,

Siempre estamos en contacto con usted

Antes de contactar con los contactos que aparecen aquí, le pedimos que compare los precios y condiciones de nuestros competidores.

Esto le dará Una idea amplia de cuánto cuesta los servicios en el desarrollo del sitio llave en mano, cuánto tiempo lleva crear una tienda en línea o un sitio de tarjeta de visita.

No tardaremos más de tres semanas. Gracias.