Tutorial: Creating a Flipping Metro Style Menu using CSS3 & HTML5

The Metro design style, which is Microsoft’s brand new user interface design language, is rapidly becoming popular among web designers. Originally it was created for Windows Phone 7, but now is being used in other Microsoft’s products such as Windows 8.
The visual look of this design style is inspired by flat design that is currently a prominent trend in web design arena. In this tutorial, firstly I’ll take you on a tour of key design principles of “Metro”, and after that I’ll show you how to create a metro-style menu with flip effect using CSS3 and HTML5.
Let’s get started!

Principles of Metro Style Design

Do More With Less:

The Metro design style lets users interact directly with content, instead of chrome that most of desktop browsers have. Content can be in any form: blog posts, images, emails, and so on. By removing the chrome (options, menus, toolbars and status bars etc), it leaves only the most relevant commands and functionality on screen.
This design style keeps users away from interacting with the browser, so they could get immersed in what they actually care about. Even, it makes use of the content itself to build navigation elements and takes advantage of color, scale and font to reduce redundancy in UI. In a nutshell, the Metro is invented to “put content before chrome”.

Fast and Fluid:

This principle promises to deliver a clean, immersive and responsive experience to users. Taking advantage of alive, responsive and engaging Live Tiles, the Metro style brings the user interface to life. Creating a sense of continuity, Live Tiles doesn’t only respond to a user’s actions quickly but also are ready for his next action.
Inspired by Saul Bass, a great American graphic designer, who used motion in his designs, Metro promotes a wide range of compelling and meaningful responses, transitions and animations to delight users. In essence, the Metro design style is a great effort of Microsoft to put everything from people to tasks before technology.

Pride in Craftsmanship:

According to this principle, everything from typography and colors to pixel perfect alignment must be complete and polished at every stage of UI development. This principle clarifies why designers are required to devote their passion, energy and time to small things that are mostly seen by users.
Microsoft’s Metro design language suggests designers to incorporate balance, symmetry, and hierarchy in their designs, so that users could get into the rhythm of a web page quickly and comfortably. In short, it inspires an individual to distinguish himself as a professional designer by taking pride in his skills and workmanship.

Authentically Digital:

Instead of being just Iconographic, Metro design adopts an Infographic approach for representing information in a dynamic and alive manner. Using typography and colors beautifully, it delivers cleaner content and actionable information without any distraction like reflections, shadows, stitching and texture effects etc.
Following the powerful design philosophy of the Bauhaus, an iconic design school, Metro believes in removal of any design element that’s superfluous. In a few words, authentically digital means going beyond the limits of physical world to create a more effortless and efficient user experience.

Win As One:

This principle focuses on unifying communication across different platforms and devices. Users are more comfortable with what they already know and they don’t adopt a new surface so easily. Therefore, designers are required to build user interfaces on standard controls, interaction patterns, touch gestures, animations and even common authentication.

This doesn’t mean that you should not be innovative. Undoubtedly innovation is great, but it should have a limit and must not demonstrate a negative impact on user experience. Succinctly, Metro design language gives you a golden opportunity to design for user scenarios that are impossible by building for a single platform.
How to Create a Windows-8-like Menu

After understanding key principles of Metro design style, now let’s come to the main point: step-by-step process of developing a flipping metro-style menu with CSS3 and HTML5.

Step 1: Include Files

The first and foremost thing you have to do is referencing all essential files in the head section of your HTML document. This includes links to the CSS, your favorite Google Fonts, and icon font that you’re using.

<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
</head>

As you can see in my demo code, I’ve placed links to Open Sans Condensed fonts by Google. For the icon font, I’ve chosen to use Ionicons. However, you can use other alternatives such as Font Awesome and Icomoon etc.

Step 2: Develop the Menu

Once all essential files are included in the <head>, the next step is to write HTML code for menu items. Below is the markup for the menu:

<body>
<ul>
<li>
<div class="front" id="tile1"><i class="icon ion-ios7-home-outline"></i> </div>
<div class="rear"> Home </div>
</li>
<li>
<div class="front" id="tile2"> <i class="icon ion-ios7-person-outline"> </i> </div>
<div class="rear">About</div>
</li>
<li>
<div class="front" id="tile3"> <i class="icon ion-ios7-briefcase-outline"></i> </div>
<div class="rear">Portfolio</div>
</li>
<li>
<div class="front" id="tile4"><i class="ion-ios7-monitor-outline"></i> </div>
<div class="rear">Services</div>
</li>
<li>
<div class="front" id="tile5"><i class="ion-ios7-people-outline"></i> </div>
<div class="rear">Clients</div>
</li>
<li>
<div class="front" id="tile6"><i class="ion-bag"></i></div>
<div class="rear">Order</div>
</li>
<li>
<div class="front" id="tile7"><i class="ion-ios7-paper-outline"></i></div>
<div class="rear">Blog</div>
</li>
<li>
<div class="front" id="tile8"><i class="ion-ios7-email-outline"></i></div>
<div class="rear">Contact</div>
</li>
<li>
<div class="front" id="tile9"><i class="ion-ios7-chatboxes-outline"></i></div>
<div class="rear">Live Chat</div>
</li>
</ul>
</body>

Let’s go into detail about the above code. Notice that I’ve used an unordered list in which each list item contains tow <div> elements: the first <div> with class front and the second <div> with class rear. The front class is what you’ll see by default and the rear class is what you’ll get to see when hovering over a menu item.

Also, I’ve added ionicons icon tag to the first <div> and name of the menu to the second <div> of every list item. The ionicons icon tag will show an icon on the front side, while name of the menu will be displayed on the rear side of the menu.

Step 3: Style Elements

After creating the menu, now it’s time to style elements to make our menu more interesting. Let’s start with putting styles for the body, ul and li tags.

body {
background: #ecf0f1;
background-image: url("common/images/background.png ");
}
ul {
width: 60%;
margin: 6.4% 0 0 18.7%;
}
li {
width: 250px;
height: 150px;
margin-right: 8px;
margin-bottom: 8px;
float: left;
list-style: none;
position: relative;
cursor: pointer;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
-webkit-perspective:1500;
-moz-perspective:1500;
-ms-perspective:1500;
-o-perspective:1500;
perspective:1500;
}

No special thing I’ve done here. I’ve just added some basic CSS properties to body, ul and li. However, the perspective property may be relatively new for you. I’ve used the perspective property to make animations look better, as it defines how many pixels a 3D element is placed from where it’s being viewed. In my example, I’ve set it to 1500. You can adjust to fit your taste.

Now, let’s add some styles to the div tag.

div {
color: #fff;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}

In the above code snippet, I’ve added some general styles to div, set the duration of transition, and disabled the backface visibility to hide the front element on flipping.

After that, I’ve added styles to front and rear classes. That’s the juicy stuff!

.front {
text-align: center;
font-size: 60px;
}
.rear {
color: white;
text-align: center;
line-height: 150px;
font-size: 30px;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
transform:rotateY(-180deg);
background: #4f6f8f;
}

There is nothing extraordinary here, except the transform property. For the rear side of the menu item, I’ve set up a transform property with -180 degrees. Setting rotateY to -180 degrees defines where the animation will start. It also defines where the animation will end when a user move the mouse away from the element.
Next, I’ve defined what should happen when a user hover the mouse over a menu item.

li:hover > .front{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
li:hover > .rear {
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}

For the front class, which is the child class of the :hover pseudo-class, I’ve set up rotateY to 180 degrees. This will force the browser to rotate the element by 180 degrees on the Y-axis (vertical), only if there is a :hover pseudo-class on the list item. On the other hand, setting up the rotateY to 0 degree for the rear class defines the position where the animation will start.

Finally, let’s define the background color of the front class contained in the first <div> of each list item.

#tile1 {
background: #f12481;
}
#tile2 {
background: #2ab9a7;
}
#tile3 {
background: #0fb9ef;
}
#tile4 {
background: #d67118;
}
#tile5 {
background: #912525;
}
#tile6 {
background: #6240f2;
}
#tile7 {
background: #29b765;
}
#tile8 {
background: #f1c410;
}
#tile9 {
background: #007fb8;
}

That’s all!

If you want to better understand and play around with the code, please take a look at the live demo.

Author Bio:

Ajeet is an experienced WordPress developer who is working with WordPressIntegration – Developing WordPress themes from PSD. In his spare time, he writes about different topics related to HTML5, Responsive, WordPress, eCommerce, and JavaScript to share his work experience with others. For weekly updates, follow @Wordpress_INT.