Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating a Metro style Menu in HTML and CSS

See in this article how to develop a Metro style menu, similar to the start menu of Windows 8 and Windows Phone, using HTML, CSS and Javascript.

Contextualizing the Metro Menu Style

The call METRO style is the new style interface of Microsoft applications, can be seen, for example, in Windows Phone 7 and Windows 8. The main menu of these applications has a simple format, based on the tiles, usually two different sizes.

An example of this menu can be seen in the following figure.

Initial Menu of Windows 8 in Metro style

Figure 1: Initial Menu of Windows 8 in Metro style

Despite being more used in mobile and desktop applications, I present here a solution for the development of a web interface similar to the web page using only the Web Standards (HTML, CSS, Javascript).

In this article, however, will not be developed more complex features like scrolling or moving tiles, will present a general framework that can be customized by the reader.

Get to work

To develop this menu, divide the lines in the central region in which we insert the tiles.

The tiles are of two types: normal and wide (as seen in the image above) and the colors will be given later with the addition of CSS classes.

To begin, let's create the title and the lines that will structure the menu, as shown in Listing 1.

Listing 1: Structure of the Home page

<html>
<head>
    <link rel="stylesheet" href="estilo.css"/>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="<http://code.jquery.com/jquery-1.7.2.min.js>"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Início</h1>
    <div class="pagina">
        <div class="linha">          
        </div>
        <div class="linha">          
        </div>       
        <div class="linha">          
        </div>
    </div>
</div>
</body>
</html>

As can be seen, will be used two additional files (beyond HTML where you insert the code above): estilo.css and script.js, besides being a reference to the jQuery library.

Now let's start formatting the page, and then insert the menu items (tiles). In estilo.css file, start by entering the code contained in Listing 2.

Listing 2: Formatting initial CSS

@font-face { font-family: Century; src: url('GOTHIC.ttf'); }
 
body{
    font-family: Century;
    background: rgb(51,51,51);
    color: #fff;
    padding:20px;
}
 
.pagina{
    width:auto;
    height:auto;     
}
 
.linha{
    width:auto;
    padding:5px;
    height:auto;
    display:table;      
}

Earlier this code, we used a feature of CSS3, the @ font-face which allows you to import from a source file (.Ttf, .Otf, etc). The source GOTHIC.ttf can be found in the folder C: \ Windows \ Fonts in Windows 7, but if the reader prefers, you can use a native source. For this, it would suffice to remove the first line, and the formatting of the body, the name of the count in the native place of Century.

In the class "linha", defined as the property display table, so that the tiles are arranged properly. This is necessary because we use the float property set to left of tiles.

Let us change the contents of the div "pagina", adding some tiles for this, we use the following code.

Listing 3: Tiles added

<div class="pagina">
    <div class="linha">          
        <div class="tile">
        </div>
        <div class="tile">
        </div>
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>           
        <div class="tile tileLargo">
        </div>
    </div>
    <div class="linha">          
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>           
        <div class="tile">
        </div>
        <div class="tile">
        </div>           
        <div class="tile tileLargo">
        </div>
    </div>       
    <div class="linha">          
        <div class="tile">
        </div>
        <div class="tile">
        </div>
        <div class="tile">
        </div>           
        <div class="tile tileLargo">
        </div>
        <div class="tile">
        </div>
        <div class="tile">
        </div>   
    </div>
</div>

Note that some tiles have two classes, "tile" and "tileLargo". The class "tile" is generic and serve to set some properties common to both types of item. The class "tilLargo", in turn, will only increased width relative to another.

Let's look at Listing 4, which defines the formatting of the original tiles.

Listing 4: Formatting initial tiles

.tile{
    height:100px;   
    width:100px;  
    float:left;
    margin:0 5px 0 0;
    padding:2px;
}
 
.tileLargo{
    width:210px;
}
 

The float property value is set to the left so that the tiles in the same row are arranged laterally. The dimensions used were standard 100x100px, but the reader can change the values ​​for SUS preference.

It is important that the class is defined tileLargo after class tile, so that when you load the page, the width of 210px is applied after the initial width of 100px. Otherwise, the configuration that would exist would be the class tile.

Opening the file in the browser, we still can not see the menu as we would like. This is just because the color of the tiles was not set. For that, create some classes in the CSS file containing only the color of the background. In this example, I used four colors, as seen below in Figure 5.

Listing 5: Classes colors of tiles

.amarelo{
    background:#DAA520;
}
 
.vermelho{
    background:#CD0000;  
}
 
.azul{
    background:#4682B4;
}
 
.verde{
    background-color: #2E8B57;
}

These classes and colors can also be customized according to the preference of the reader.

The next step is to attach the tiles to the color classes. In my case, the contents of the div "page" was changed as shown in Listing 6.

Listing 6: Association of tiles to color

<div class="pagina">
    <div class="linha">          
        <div class="tile amarelo">
        </div>
        <div class="tile azul">
        </div>
        <div class="tile tileLargo vermelho">
        </div>
        <div class="tile verde">
        </div>           
        <div class="tile tileLargo amarelo">
        </div>
    </div>
    <div class="linha">          
        <div class="tile tileLargo amarelo">
        </div>
        <div class="tile azul">
        </div>           
        <div class="tile verde">
        </div>
        <div class="tile vermelho">
        </div>           
        <div class="tile tileLargo verde">
        </div>
    </div>       
    <div class="linha">          
        <div class="tile amarelo">
        </div>
        <div class="tile verde">
        </div>
        <div class="tile vermelho">
        </div>           
        <div class="tile tileLargo verde">
        </div>
        <div class="tile azul">
        </div>
        <div class="tile verde">
        </div>   
    </div>
</div>


Now yes you can see the result, which should be similar to Figure 2.

tiles defined

Figure 2: tiles defined

Pretty simple, isn't it?

I'll just apply some additional settings by placing a text within each tile and setting a background image for the page. Listing 7 shows how a tile was based on it the rest can be done also.

Listing 7: Example of tile with title

<div class="tile amarelo">
    <span class="titulo">Tile 1</span><br/>
</div>

The background of the body can be changed just by adding the path of the image, in my case, is called "wallpaper.jpg". The body was then formatting as shown in Listing 8.

Listing 8: New settings of body

body{
    font-family: Century;
    background: rgb(51,51,51) url("wallpaper.jpg");
    color: #fff;
    padding:20px;
}
 
The new result is shown in Figure 3. New page layout

Figure 3: New page layout

To finish, apply a small effect remains the tiles so they have changed the look when clicked. To this we must add the code in Listing 9 to script.js file (which should not be content until now).

Listing 9: Content of archive script.js

$(function(){
    $(".tile").mousedown(function(){       
        $(this).addClass("selecionado");
    });
 
    $(".tile").mouseup(function(){     
        $(this).removeClass("selecionado");
    });
});

When the mouse button is pressed, will add the CSS class "selected" to the tile and when the button is released, this class will be removed. The aforementioned class (see Listing 10) only changes the background color of the tile, but another effect could be applied.

Listing 10: Class to highlight the tile clicked

.selecionado{
    background-color: #483D8B;
}

Thus we finalized our page. In fact is not the same thing as the menu of Windows 8, but it is undoubtedly a viable solution to this situation.

With some knowledge of HTML, CSS and Javascript, the reader can change the look of my set and features for tiles, for example, use them as a link.

I hope the content of this article may be useful in helping web developers interested in developing a layout style meter.

You can see the menu in action here

I hope you liked and see you next time.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login