Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite
Webdesign

Aprendiendo Material Design Lite: El Menú

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Cards
Learning Material Design Lite: Customizing

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En esta entrega de nuestra serie sobre Material Design Lite (MDL), vamos a ver el componente de Menú. Puedes necesitar este componente en aquellas ocasiones en las que necesites proporcionar un menú contextual de acciones disponibles.

En Facebook por ejemplo, puedes ver un menú contextual que se despliega en la columna lateral y que muestra a una lista de tus amigos conectados y desconectados. El menú se ubica abajo, a la misma altura que el campo de búsqueda, representado mediante el icono de rueda.

Barra lateral para menú contextual de Facebook.

Existe otro buen ejemplo en Gmail. Puedes encontrar este menú contextual situado a continuación de la pestaña Inbox, bajo el botón Compose. Proporciona acciones para organizar los mensajes recibidos en tu bandeja de entrada y así gestionar mejor tu correo.

En este tutorial, vamos a ver como iplementar un menú contextual usando el componente de menú MDL. En cualquier caso, antes de comenzar, añade las librerías MDL—las hojas de estilo y el JavaScript–en el head de tu documento.

Una vez hecho, !comenzamos!

¡Vámos!

Asumamos que tenemos una web para nuestro negocio, y la empresa tiene ahora sedes en diferentes países. Así que necesitamos que la web este disponible en varios idiomas. Este sería un buen escenario en el cual usar el componente de menú: para cambiar los idiomas.

Para construir este menú de cambio de idioma, empezamos creando un botón a modo de icono con un id de manera que podamos hacer referencia posterior al mismo. Usaremos el lenguaje de iconos de Material Design.

Siéntete libre de elegir un botón plano, si lo encuentras más apropiado con el diseño global de tu web, por ejemplo:

La Lista

Lo siguiente es añadir la lista de lenguajes. Antes de hacerlo, necesitamos decidir dónde debe aparecer el menú en relación a la posición del menú. Dependiendo del diseño de la web, el cambio de idioma podría mostrarse mejor en la navegación de la página. También podríamos añadirlo en algún lugar abajo de la página, por ejemplo en el pié.

Si decidimos que la mejor posición es abajo en la esquina derecha de la web, añadiremos el menú usando la clase Modifier: mdl-menu--top-right. El menú, tal y como el nombre de la clase implica, aparecerá arriba, a la izquierda del botón. Reemplaza la clase con una de las alternativas siguientes para posicionar el menú de diferente forma:

  • mdl-menu--bottom-right
  • mdl-menu--bottom-left: es la clase por defecto si ninguna otra es asignada al menú. El menú aparecerá abajo, alineado a la izquierda.
  • mdl-menu--top-left

Podríamos añadir el menú en cualquier sitio. Pero es mejor mantenerlo cerca, dentro del mismo contenedor que el botón.

para

Lo que tenemos que tener presente en el marcado del menú es el atributo for. Como puedes observar arriba, el valor del atributo for debe coincidir con el id del botón.

Si el botón está posicionado en la parte superior de la página, el menú debería aparecer por debajo, añadiendo la clase mdl-menu--bottom-right.

Más Ejemplos

Otra posible aplicación del componente de menú es la de mejorar las tarjetas de nuestro blog que vimos en el tutorial anterior. Allí tenemos el post con un botón para compartir; podríamos utilizar el componente del menú para proporcionar un modelo de selección para las opciones de las redes sociales:

Resumiendo

El componente de menú MDL es sencillo de implementar. Tal y como hemos aprendido aquí, requiere un elemento de lista no ordenada (ul) con unas clases, y ya tenemos el menú listo para usar, tan simple como eso.

En el siguiente tutorial, vamos a ver cómo personalizar todos los componentes que hemos utilizado hasta ahora. ¡Nos vemos allí!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.