Kombinasi Menu metro Ui dngan Font Awesome v.4.0.3

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

Code:

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

CSS

Code:

.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

Code:

<div class="wrap">
      <div id="menu">
        [url=#]<i class="fa fa-windows"></i>Home[/url]
        <a class="about" href="#" ><i class="fa fa-random"></i>Random Post</a>
        [url=#]<i class="fa fa-sitemap"></i>Site Map[/url]
        [url=#]<i class="fa fa-users"></i>Follow[/url]
        [url=#]<i class="fa fa-envelope-o"></i>Contact Me[/url]
        </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] dan seterusnya.

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

SOURCE

 

kebiasaan nih, saya gak

kebiasaan nih, saya gak ngerti koding tapi tolong lain kali jangan asal tempel disini, ada fasilitas

Code:

<code>

ini code kamu

Code:

 

bagus juga, tapi untuk di

bagus juga, tapi untuk di terapin di blog saya agak kebesaren

 

pram wrote:

Setting aja ukuran nya di css gan

 

Untuk kostumisasi bisa ubah

Untuk kostumisasi bisa ubah ukuran font, width, padding-top, maupun heigthnya ..sesuaikan dengan blog anda. saya juga udah tambahkan fitur responsive untuk menu ini

 

Simpan dulu sy,