How to Make Metro Style Windows 8 CSS3 Menu

This tutorial about creating metro style windows 8 CSS3 menu. We will teach you how you can style the menus just like window eight by using HTML5 and CSS3.

It’s easy to build with the help of DIV element then we will use fonts and apply different color classes to make them look like the Window Startup style.

The Metro style is a new interface of Microsoft applications which can be seen in Window 8 and also in Window 7 phones. These main menus are simple and based on tiles. This navigation menu can be used for modern flat design websites.

These Metro Menus are in different sizes, usually in two sizes. The sizes of tiles have two type, one is called small or regular, and another one is wide style.

How to Style Menu Like Windows 8 with CSS3

We have wrapped the div and each menu consists of a class name btn-big for wide menus and for small btn-small have been used. We have added another class for colors. Each color hold own class name, e.g., Red, blue, yellow, etc.

We keep the HTML structure as simple as we can. All of the titles inside the wrap div and each div inside the wrap represent one title. The icons used are from Font Awesome

<div class="wrap">
    <div class="btn-big red">
        <i class="fa fa-envelope fa-2x"></i>
        <span class="label bottom">Mail</span> 
    </div>
    
    <div class="btn-big blue">
        <i class="fa fa-calendar fa-2x"></i>
        <span class="label bottom">Calendar</span> 
    </div>
    
    <div class="btn-small orange">
        <i class="fa fa-windows fa-2x"></i>
        <span class="label bottom">Store</span> 
    </div>
    
    <div class="btn-big blue">
        <i class="fa fa-user fa-2x"></i>
        <span class="label bottom">User</span> 
    </div>
    
    <div class="btn-small green last">
        <i class="fa fa-umbrella fa-2x"></i>
        <span class="label bottom">Application</span> 
    </div>
</div>

The CSS for Metro Style Menu

Let’s see how we have developed the CSS. Remember here we will show you some basic CSS stuff but you can download full source from above.

First, have a look a simple CSS for the size of tiles and few color combinations.

.btn-big{width: 200px;}
.btn-small{width: 95px;}
.last{margin-right: 0 !important;}

.red{background: #df0024;}
.blue{ background: #00a9ec;}
.orange{background: #ff9000;}
.green{background: #0e5d30;}

Each tile has some unique styles which we have defined like below.

div[class^="btn"]{
float: left;
margin: 0 10px 10px 0;
height: 95px;
position: relative;
cursor: pointer;
transition: all .4s ease;
user-drag: element;
border: solid 2px transparent;
text-align:center;
line-height:100px;
}

However, this is the simple solution to create your own custom Metro style Windows 8 like tiles menu using CSS3. But if you are looking for ready-made solution than you can use this kit.

Please leave comments below and tell us about it. We will bring more excellent Tutorials which will help you to make your website more outstanding.