YAMM3 - Build Megamenu para Bootstrap 3

Hay muchas ventajas de usabilidad en el uso de megamenú en una página web. Con megamenú, puedes tomar el control total de tu menú . Casi todos los elementos web se pueden asignar allí. Algunas grandes empresas incluso han aplicado megamenú en su sitio web. Amazon y Mashable por ejemplo. Amazon tiene un fondo de imagen en su menú y Mashable usa imágenes en miniatura para un menú más atractivo.

Si ha estado trabajando con Bootstrap, ahora puede construir un megamenú en un abrir y cerrar de ojos con esta nueva biblioteca llamada Yamm de Geedmo.

Yamm3 ( Yet Another Megamenu ) es una biblioteca CSS que te ayuda a construir un megamenú en Bootstrap 3 fácilmente. El megamenú funciona para diseños sensibles y fijos . Cubre casi todos los elementos de arranque que se incluirán en la barra de navegación como la imagen, el acordeón, la lista, la cuadrícula, la tabla, la forma, etc.

Guía Básica

Yamm3 usa CSS liviano y puro. Para comenzar con Yamm3, solo tiene que incluir la clase Yamm3 que necesita en el marcado HTML de la barra de navegación estándar.

Antes de trabajar con Yamm3, el primer paso es incluir la biblioteca de hojas de estilos Yamm3 y Bootstrap en la sección principal de la siguiente manera:

 ...  ... 

Y no se olvide de incluir también la biblioteca jQuery y Bootstrap en su proyecto, ya sea en la sección de cabeza o cuerpo, de esta forma:

 ... ... 

Tenga en cuenta que usamos Bootstrap 3 aquí y la versión mínima de jQuery requerida es la versión 1.9.0+ . Si todavía está ejecutando la versión anterior de Bootstrap, le recomendamos seguir la guía de la versión anterior de Yamm.

Marcado HTML

En el uso básico, para usar Yamm3 primero agregue la clase .yamm en la parte superior de la marca de la barra de navegación. Luego, puede agregar su .dropdown-menu clase .dropdown-menu . El siguiente es un ejemplo básico.

Como se ve allí, también puede usar .yamm-content como una opción para ajustar el contenido con el relleno.

Por ejemplo, intentemos agregar un menú de acordeón dentro de nuestra barra de navegación de marcado. Reemplace el comentario de Your Menu Goes Here con el siguiente código.

Artículo # 1 del Grupo de Acordeón 
 Este es un menú colapsable. 
Artículo # 2 del Grupo de Acordeón 
 Este es un menú colapsable. 

Al invocar la ID de accordion y usar una clase de panel-group para agrupar, puede crear un acordeón dentro de la barra de navegación. Y entonces nuestro menú se verá como la captura de pantalla a continuación:

Hay muchos otros componentes que puede agregar a la barra de navegación. Puede realizar la autoexploración de otros componentes que puede implementar si descarga el archivo completo Yamm3 y abre el archivo index.html con su editor de código favorito.

Javascript

Hay un código de JavaScript adicional utilizado para la prevención de un menú cerrado inesperado en algunos componentes como acordeón, formularios, etc. Solo incluya el siguiente código en su cabeza o sección del cuerpo:

Conclusión

Yamm3 es otro gran producto de terceros para impulsar el desarrollo de su Twitter Bootstrap al construir una barra de navegación atractiva. Solo necesita un pequeño esfuerzo para explorar todos los componentes de implementación, ya que carece de soporte de documentación para crear el menú de varios componentes .

Comparta su opinión con nosotros en la sección de comentarios a continuación.

Transforma tus fotos en historias de video con Pearl

Compartimos (a veces, compartimos) nuestras vidas en las redes sociales tanto que se ha convertido en una forma de vida para muchos usuarios en línea . Claro, a veces las personas van por la borda con las fotos de boda, fotos de bebés, fotos de mascotas, fotos de comida, fotos de viajes, etc. y mientras algunos de nosotros nos quejamos, casi todo lo que alguien hace es la preocupación de otro usuario .Un

(Consejos de tecnología y diseño)

Fondos de iPad para Video Gamers

Si posee un iPad, es muy probable que haya experimentado con muchas funciones. Una de las mejores características es la capacidad de personalizar y personalizar su iPad para reflejar su personalidad, lo que se puede hacer seleccionando un fondo de pantalla que refleje quién es usted.Y si eres un jugador, entonces adorarás todos los fondos de pantalla con temas disponibles en el iPad. H

(Consejos de tecnología y diseño)