In this instalment of our Learning Material Design Lite (MDL) series, we’re going to look into the Menu component. This is a component which you might occasionally need to provide a contextual menu of available actions.
In Facebook, for example, you can see a contextual menu deployed in the sidebar where a list of online and offline friends is shown. The menu resides at the bottom, inline with the search form, illustrated with a gear icon.
There’s another good example in Gmail. You can find this contextual menu inline with the Inbox tab, below the Compose button. It provides actions to sort incoming messages in your Inbox for better email management.
In this tutorial, we are going to see how to implement a contextual menu using the MDL menu component. However, before we make a start, add the MDL libraries— the stylesheets and the JavaScript–to the head of your document.
1 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> |
2 |
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> |
3 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> |
4 |
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Once done, let’s go!
Go!
Let’s assume we have a website for our business, and the business now has several branches in different countries. Now we need the website to be presented in multiple languages. This is one good scenario where we might employ the menu component in our website: to switch the language.
To build this language switching menu, we start by creating an icon button element with an id so we can hook it up to the menu. We’ll use the Material Design language icon.
1 |
<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--icon"> |
2 |
<i class="material-icons">language</i> |
3 |
</button>
|
Feel free to opt for a flat button, if you find it more suitable for the overall design of your website, for example:
1 |
<button id="lang-switcher" class="mdl-button mdl-js-button">Languages</button> |
The List
Next, we’ll add the list of the languages. Before doing so, we need to decide where the menu should appear in relation to the button position. Depending on the website layout, the language switcher might be shown in the navigation. We may also add it anywhere at the bottom, in the footer section.
If we find the position is at the bottom right corner of the site, we will add the menu using the Modifier class: mdl-menu--top-right. The menu, as the class name implies, will appear at the top, left of the button. Replace the class with one of the following classes to position the menu differently:
mdl-menu--bottom-right-
mdl-menu--bottom-left: this is default if no other class is associated with the menu. The menu will appear at the bottom, left aligned. mdl-menu--top-left
We could add the menu anywhere. But it is better to keep it close, within the same container as the button.
1 |
<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--icon"> |
2 |
<i class="material-icons">language</i> |
3 |
</button>
|
4 |
<ul class="mdl-menu mdl-js-menu mdl-menu--top-right" for="lang-switcher"> |
5 |
<li class="mdl-menu__item">English</li> |
6 |
<li class="mdl-menu__item">日本語</li> |
7 |
<li class="mdl-menu__item">한국어</li> |
8 |
</ul>
|
for
The thing to keep in mind for the menu markup is the for attribute. As you can see above, the for attribute value has to match the id of the button.
If the button is positioned at top of the website, the menu should appear at the bottom, by adding the mdl-menu--bottom-right class.
More Examples
Another possible application of the menu component is to improve our blog post card from the previous tutorial. There we have the post with a share button; we could use the menu component to provide options for selecting social networks:
Wrapping Up
The MDL menu component is an easy one to implement. As we have learned here, it requires an unordered list element with a few classes, and then we have the menu ready to go—as simple as that.
In the next tutorial, we are going to see how to customize all the components that we have used so far. See you there!
