Creating a Metro Style Menu in HTML and CSS

TutorialPedia Team

Date Updated

The Metro style, popularized by Microsoft in Windows 8, offers a clean, modern, and visually appealing interface design. Metro style menus are characterized by large, colorful tiles that provide quick access to different sections or features of a website. In this blog post, we will explore how to create a Metro style menu using HTML and CSS. By the end of this guide, you'll have a solid understanding of the fundamental concepts, usage methods, common practices, and best practices for building your own Metro style menu.

Table of Contents#

  1. Fundamental Concepts
  2. HTML Structure for a Metro Style Menu
  3. CSS Styling for a Metro Style Menu
  4. Usage Methods
  5. Common Practices
  6. Best Practices
  7. Conclusion
  8. References

Fundamental Concepts#

Tiles#

The core element of a Metro style menu is the tile. Tiles are rectangular or square blocks that represent different sections or functions. They can contain text, icons, or both. Tiles are usually arranged in a grid layout, making it easy for users to scan and access the desired content.

Color Scheme#

Metro style menus often use a bold and vibrant color scheme. Each tile can have a different color to distinguish it from others and make the menu more visually appealing. The use of high-contrast colors also helps in improving readability.

Responsiveness#

In today's multi-device world, it's essential for a Metro style menu to be responsive. This means that the menu should adapt to different screen sizes, such as desktops, tablets, and mobile phones, without losing its functionality or visual appeal.

HTML Structure for a Metro Style Menu#

The following is a basic HTML structure for a Metro style menu:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <title>Metro Style Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body>
    <div class="metro-menu">
        <a href="#" class="tile tile - blue">
            <span class="tile - content">Home</span>
        </a>
        <a href="#" class="tile tile - green">
            <span class="tile - content">About</span>
        </a>
        <a href="#" class="tile tile - red">
            <span class="tile - content">Services</span>
        </a>
        <a href="#" class="tile tile - yellow">
            <span class="tile - content">Contact</span>
        </a>
    </div>
</body>
 
</html>

In this code:

  • The metro - menu class is used to wrap all the tiles.
  • Each tile is represented by an <a> tag, which makes it clickable.
  • The tile class is a common class for all tiles, and additional classes like tile - blue, tile - green, etc., are used to apply different colors to the tiles.
  • The tile - content class is used to hold the text inside the tile.

CSS Styling for a Metro Style Menu#

The following CSS code (styles.css) can be used to style the Metro style menu:

/* Global styles */
body {
    font-family: Arial, sans - serif;
    background-color: #f0f0f0;
}
 
.metro - menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}
 
.tile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    text-decoration: none;
    color: white;
    font-size: 24px;
    transition: transform 0.2s ease - in - out;
}
 
.tile:hover {
    transform: scale(1.05);
}
 
.tile - blue {
    background-color: #0078d7;
}
 
.tile - green {
    background-color: #107c10;
}
 
.tile - red {
    background-color: #e81123;
}
 
.tile - yellow {
    background-color: #ffb900;
}

In this CSS:

  • The body element has a simple background color and font family.
  • The metro - menu class uses flexbox to arrange the tiles in a flexible grid layout. The flex - wrap property allows the tiles to wrap to the next line if there is not enough space.
  • The tile class sets the basic styling for each tile, including its size, color, and hover effect.
  • The individual color classes (tile - blue, tile - green, etc.) define the background color for each tile.

Usage Methods#

Adding Icons#

To add icons to the tiles, you can use icon libraries like Font Awesome. First, include the Font Awesome CSS in your HTML file:

<head>
    <!-- Other meta tags and title -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/6.0.0/css/all.min.css">
</head>

Then, modify the HTML for the tiles:

<a href="#" class="tile tile - blue">
    <i class="fas fa - home"></i>
    <span class="tile - content">Home</span>
</a>

Linking to Different Pages#

You can change the href attribute of the <a> tags to link to different pages on your website. For example:

<a href="about.html" class="tile tile - green">
    <span class="tile - content">About</span>
</a>

Common Practices#

Using Semantic HTML#

Although the basic structure uses <a> tags for tiles, you can use more semantic HTML elements if appropriate. For example, if a tile represents a section of the page, you can use <section> or <article> tags inside the <a> tag.

Grouping Tiles#

You can group related tiles together by using additional HTML elements. For example, you can create a <div> to group tiles related to a particular category:

<div class="category - group">
    <a href="#" class="tile tile - blue">
        <span class="tile - content">Sub - item 1</span>
    </a>
    <a href="#" class="tile tile - blue">
        <span class="tile - content">Sub - item 2</span>
    </a>
</div>

Best Practices#

Responsive Design#

To make the Metro style menu responsive, you can use media queries in CSS. For example:

@media (max - width: 768px) {
    .tile {
        width: 100%;
    }
}

This code makes the tiles full-width on screens with a maximum width of 768 pixels, such as tablets and mobile phones.

Accessibility#

Ensure that the menu is accessible to all users. Use proper contrast ratios between the text color and the background color of the tiles. Also, add ARIA (Accessible Rich Internet Applications) attributes to the HTML elements to improve screen reader compatibility.

Conclusion#

Creating a Metro style menu in HTML and CSS is a great way to add a modern and visually appealing navigation system to your website. By understanding the fundamental concepts, using the right HTML structure and CSS styling, and following common and best practices, you can build a functional and responsive Metro style menu. Whether you're a beginner or an experienced developer, these techniques can help you create a menu that stands out.

References#

2025-10