Kombinasi Menu Metro UI Dan Font Awesome

Kombinasi Menu Metro UI Dan Font Awesome - Menerapkan efek - efek unik untuk menu blog rasanya tidak akan habis untuk dibahas, seperti menu navigasi metro ui dan menu metro ui efek modal dialog. Ini sebagai pengembangan blog gaya metro style dan FontAwesome seperti artikel sebelumnya tentang FontAwesome Icon V3.2.1. Namun kali ini saya tidak menggunakan versi ini melainkan versi terbarunya versi 4.0.3 yang dikombinasikan dengan CSS3, agar penerapan template blog metro style lebih maksimal.

• DEMO

Untuk dapat menggunakannya silakan install font awesome versi 4.0.3 sebelum kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

CSS

.wrap{width:95%;margin:0 auto;}
#menu {margin-bottom: 10px;}
#menu a { float: left;display: block;color: #fff;text-decoration: none;text-align:center;}
#menu a i {
    font-size:36px;
    display:block;
    text-align:center;
    padding-top:30px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me
{
    margin-right: 3px;
    height: 120px;
}

#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{
    margin-right: 3px;
    width: 11%;
   /* padding-top: 115px;*/
    padding-left: 20px;
    padding-right: 20px;
  /*  height: 35px;*/
}


#menu a.home {
    background: #27ae60;}
#menu a.random-post {
    background: #e67e22;}
#menu a.sitemap {
    background: #2980b9;}
#menu a.follow {
    background: #8e44ad;}
#menu .contact-me {
    background: #16a085;}

/* CSS3 Effects */
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#menu  a:hover {
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
@media (max-width:768px){
    #menu a i{
        font-size:16px;
    }
    #menu .home,
    #menu .random-post,
    #menu .sitemap,
    #menu .follow,
    #menu .contact-me{
        height:73px;
    }
    #menu a.home,
    #menu a.random-post,
    #menu a.sitemap,
    #menu a.follow,
    #menu a.contact-me
    {width:22%;}
}

HTML

<div class="wrap">
      <div id="menu">
        <a class="home" href="#"><i class="fa fa-windows"></i>Home</a>
        <a class="random-post" href="#" ><i class="fa fa-random"></i>Random Post</a>
        <a class="sitemap" href="#"><i class="fa fa-sitemap"></i>Site Map</a>
        <a class="follow" href="#"><i class="fa fa-users"></i>Follow</a>
        <a class="contact-me" href="#"><i class="fa fa-envelope-o"></i>Contact Me</a>
        </div>
    </div>

Jika anda terlanjur menggunakan FontAwesome versi dibawah 4.0 anda bisa mengganti penulisan font pada HTML diatas, untuk format penulisannya seperti ini <i class="icon-windows"></i> dan seterusnya.

Demikian tips blog metro style kali ini, semoga bermanfaat dan memberikan inspirasi untuk terus mengembangkan blog dengan gaya terkini. Happy Bloggin