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.

Cinco sistemas de lista de tareas analógicas para una mejor productividad

Anteriormente discutimos el atractivo de las herramientas de productividad: ¿realmente funcionan cuando se trata de aumentar las tasas de productividad personal? Puede tener todas las aplicaciones de listas de tareas digitales en el mercado, gratuitas o premium, o las aplicaciones para tomar notas que le ayudan a anotar cosas que teme olvidar (y aún así olvidar), pero una vez más, la pregunta es: ¿Eres más productivo con el uso de estas herramientas ?Al ig

(Consejos de tecnología y diseño)

20 ideas de regalos para amantes de los libros

Si bien muchas personas en estos días prefieren los libros digitales o libros electrónicos, todavía hay muchos amantes de los libros entre nosotros. Solo porque leemos en el Kindle o en la tableta, no significa que no perdamos el contacto y el olor del papel o el sonido de las páginas.Al reflexionar sobre esto, decidí cambiar mi perspectiva por un momento rápido y pensar en lo que un amante de libros moderno puede necesitar . En e

(Consejos de tecnología y diseño)