Create responsive metro style website menu with HTML and CSS3

Hi everyone, Now a days metro (Flat) design is famous one for web development. So that today we will have tutorial about creation of Metro style website menu with CSS3 effects.

Features:

  • Responsive menu
  • User friendly design

It loads very fast because i have used font-awesome iconic font for icons instead of using images.

I have used css3 transform and transition to handle the scaling and time delay. Refer the following code

For responsive i have used @media to handle the width and height of the menu item. Refer css code

HTML code:

Complete CSS Code:

Thanks….

Demo and Download

Note:

Please don’t forget to share and subscribe to latest updates of the blog .

  • stereomaik

    Hi,
    this is a great tutorial, I am using it right now.
    There is an error in the code though:

    #men.a.logo,
    is supposed to be:

    #menu.a.logo,

    also why are

    /* padding-top: 115px;*/and
    /* height: 35px;*/commented out?

    I really love the tutorial nevertheless. Great work.