Animated CSS3 Metro UI - Bagi blogger pemula dalam mendesain menu bar / dropdown menu untuk sebuah blog tentu akan sedikit mengalami sebuah kesulitan karena harus memahami kode css,javascript,html dan sebagainya nah kali ini saya akan memberikan sedikit solusi untuk brada yang sedang mencari sebuah menu bar yang cukup keren dan tidak begitu sulit dalam pemasangannya.

Kelebihan Animated CSS3 Metro UI Menu
  • Pada tombol Home terdapat tombol share Facebook , Twitter , Google + dan Rss
  • Tombol Tags yang bisa brada sesuaikan
  • Tombol Blog Archive dengan dropdown
  • Tombol Contact Tab 
  • Efect Sliding & fast loading   

Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini.


Kustomisasi 
  • Masuk pada Tataletak 
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
<style>
/* demo page styles */
.mjn-tab1
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IYGTbz0wjBogai6ARxXPu9g4eyF26TZMaV9cm-LjwIESANxiq-M3blj-JYdHVkMBi81d0otIlSF-7osZ0Ed1sln_CRycSx6gfg8KKZLix4UbWytUxnXVYSr5suET6sO6yNl2eNm5bLM/h120/home.png) no-repeat center center #4d90fe;
}.tab1:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IYGTbz0wjBogai6ARxXPu9g4eyF26TZMaV9cm-LjwIESANxiq-M3blj-JYdHVkMBi81d0otIlSF-7osZ0Ed1sln_CRycSx6gfg8KKZLix4UbWytUxnXVYSr5suET6sO6yNl2eNm5bLM/h120/home.png) no-repeat center center #3682FC;
}.mjn-fb
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxF-8PYwLx7b5sL5pplM8Zf1kWy0b1afDImXhy_Q-TNkaLYjyo_Pmge9Vz-GzIyo3cuG_Q5sSy0gemDraFEfv4KtjJAIisGTPqELDq_ZLcwipGXLlbfb416u5JV5SmmzhdA_3lVsOszA/s1600/facebook2.png) no-repeat center center #2A82D9;
}.mjn-fb:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxF-8PYwLx7b5sL5pplM8Zf1kWy0b1afDImXhy_Q-TNkaLYjyo_Pmge9Vz-GzIyo3cuG_Q5sSy0gemDraFEfv4KtjJAIisGTPqELDq_ZLcwipGXLlbfb416u5JV5SmmzhdA_3lVsOszA/s1600/facebook2.png) no-repeat center center #1f69b3;
}.mjn-tw
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIy6ak1lQ0ZqD_ne9hbZF6ztOBnraq2G8hpSFSnCIRTSOc3tYGdRSjhjJSBWRivndjFFIwRVBCfkAIp1MyhMZu8DrTPmdI-Qw3j55LSNcckmSxsFP5SJ54EhITHgC6K82X9V7DycS0Oo/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0;
}.mjn-tw:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIy6ak1lQ0ZqD_ne9hbZF6ztOBnraq2G8hpSFSnCIRTSOc3tYGdRSjhjJSBWRivndjFFIwRVBCfkAIp1MyhMZu8DrTPmdI-Qw3j55LSNcckmSxsFP5SJ54EhITHgC6K82X9V7DycS0Oo/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
}.mjn-g
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oRUAUbohcuMk0xX17rCBjURi07h_VuIInObBDZ79j4cedAlsjcXLnheSZ0TlGXnInW93Ua6SDohxPP2dQQOqo-UAPsM8R4aqQKhv_RQJ6V_aVyC_qmVhzwNguHNApINcXsvd0k5uYk0/s1600/google+plus2.png) no-repeat center center #DC321E;
}.mjn-g:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oRUAUbohcuMk0xX17rCBjURi07h_VuIInObBDZ79j4cedAlsjcXLnheSZ0TlGXnInW93Ua6SDohxPP2dQQOqo-UAPsM8R4aqQKhv_RQJ6V_aVyC_qmVhzwNguHNApINcXsvd0k5uYk0/s1600/google+plus2.png) no-repeat center center #c53727;
}.mjn-rss
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ9Er8vV1vVBL1R_Ep01CZdHfWpvX41pwFDby1ec3-PhyzvYhLS4mvARvFI8e2Id0YAaqFM5aafbFRc873DrS7EyZyCwYOnJ0GGriozXWESTBwIrQaZQk3Y9JiAHdhZsIKY6CDq7fmj4/s1600/feed2.png) no-repeat center center #E9A01C;
}.mjn-rss:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ9Er8vV1vVBL1R_Ep01CZdHfWpvX41pwFDby1ec3-PhyzvYhLS4mvARvFI8e2Id0YAaqFM5aafbFRc873DrS7EyZyCwYOnJ0GGriozXWESTBwIrQaZQk3Y9JiAHdhZsIKY6CDq7fmj4/s1600/feed2.png) no-repeat center center #F9A914;
}.mjn-tab2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivG8BfNUkMUGgTM7urs7OSFjRs1QsXKIEj9o_FLMpWBWiDyAggLRdLHr0CAwDzpHIRpvOcwrgw8jp8aqroMnq4PiqkVp8CcZGArS266cMVpl2G-jgOJDqg3hzfc3s11w8BaT0a752SoKk/h120/Tag.png) no-repeat center center #35aa47;
}.mjn-tab2:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivG8BfNUkMUGgTM7urs7OSFjRs1QsXKIEj9o_FLMpWBWiDyAggLRdLHr0CAwDzpHIRpvOcwrgw8jp8aqroMnq4PiqkVp8CcZGArS266cMVpl2G-jgOJDqg3hzfc3s11w8BaT0a752SoKk/h120/Tag.png) no-repeat center center #1d943b;
}.mjn-tab2sub
{background: #35aa47;
}.mjn-tab2sub:hover{
background: #1d943b;
}.mjn-tab3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyFLdaI6TMGBoxfxQ6SzPT6B39PCNvlWRLGdmXq4u5_77JPz0VhXDQ-g1BeGSiwByHt1Ifn3Z-TO9qXtO5Zzf6DU7PZWM2ZBsBj6nZXhWchSPehHoOQ5Z1qc0l-UWNXokldhCREDeutk/h120/archives.png) no-repeat center center #852b99;
}.mjn-tab3:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyFLdaI6TMGBoxfxQ6SzPT6B39PCNvlWRLGdmXq4u5_77JPz0VhXDQ-g1BeGSiwByHt1Ifn3Z-TO9qXtO5Zzf6DU7PZWM2ZBsBj6nZXhWchSPehHoOQ5Z1qc0l-UWNXokldhCREDeutk/h120/archives.png) no-repeat center center #6d1b81;
}.mjn-tab3sub
{background: #852b99;
height:70px;
}.mjn-tab3sub:hover
{background: #6d1b81;
}.mjn-tab4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9Jwznm6y4lAWq1mBHA6GxD1fkMm_RFkLhDA0K3TXNtZBy4QFwcCEx-yVzOsL9Rf6LquMz7pD9grtb1UuO9M2-cSu8_bkEx1F7N3v3oRfPbgu61JJM84bB2W0zp6wr3J3BcTgj0vEE0Q/h120/contact.png) no-repeat center center #d84a38;;
}.mjn-tab4:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9Jwznm6y4lAWq1mBHA6GxD1fkMm_RFkLhDA0K3TXNtZBy4QFwcCEx-yVzOsL9Rf6LquMz7pD9grtb1UuO9M2-cSu8_bkEx1F7N3v3oRfPbgu61JJM84bB2W0zp6wr3J3BcTgj0vEE0Q/h120/contact.png) no-repeat center center #c53727;
}.mjn-tab4sub
{background: #d84a38;;
}.mjn-tab4sub:hover{
background: #c53727;
}.mjn-tab5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvTUhM7JJMMNPrAH1C7rQmDoD0zgv-GcKttL44xnX-vkFOpMT2M0kuulZRnVYdgwAoB1a6hQ2I-k0j7bIlXBmq5lKHeDTN_1E0dFuQBkIcLpywLCfB2MT2fjvYF5YdbrO4cpCCeZQ-fo/h120/Menu.png) no-repeat center center #555;
}.mjn-tab5:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvTUhM7JJMMNPrAH1C7rQmDoD0zgv-GcKttL44xnX-vkFOpMT2M0kuulZRnVYdgwAoB1a6hQ2I-k0j7bIlXBmq5lKHeDTN_1E0dFuQBkIcLpywLCfB2MT2fjvYF5YdbrO4cpCCeZQ-fo/h120/Menu.png) no-repeat center center #222;
}
body {
    background:none;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
.mjn-metro-menu {
    position:relative;
    background:none;
    width:500px;
    height:90px;
    border:none;
    margin:20px auto;
    padding:20px;
float:left;
}

/* navigation menu styles - main styles */
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:relative;
    top:30%;
    font: 14px Segoe UI, Helvetica, Arial, sans-serif;
    color:#fff;
}

/* top line - hover styles */
ul.navi:hover {
    height:200px;
}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(90px);
    -ms-transform: translatex(90px);
    -o-transform: translatex(90px);
    -webkit-transform: translatex(90px);
    transform: translatex(90px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(180px);
    -ms-transform: translatex(160px);
    -o-transform: translatex(160px);
    -webkit-transform: translatex(160px);
    transform: translatex(180px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(260px);
    -ms-transform: translatex(270px);
    -o-transform: translatex(270px);
    -webkit-transform: translatex(270px);
    transform: translatex(270px);
}
ul.navi:hover li#n5 {
    -moz-transform: translatex(360px);
    -ms-transform: translatex(360px);
    -o-transform: translatex(360px);
    -webkit-transform: translatex(360px);
    transform: translatex(360px);
}

/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:100%;
    height:200px auto;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;

    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
        width:80px auto;
       height:80px;
       position:absolute;
       left:0;
      top:0;
      z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}

/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;

    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(90px);
    -ms-transform: translatex(-70px) translatey(90px);
    -o-transform: translatex(-70px) translatey(90px);
    -webkit-transform: translatex(-70px) translatey(90px);
    transform: translatex(-70px) translatey(90px);
}
ul.navi li:hover ul li.c {
-moz-transform: translatex(2px) translatey(90px);
    -ms-transform: translatex(2px) translatey(90px);
    -o-transform: translatex(2px) translatey(90px);
    -webkit-transform: translatex(2px) translatey(90px);
    transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(74px) translatey(90px);
    -ms-transform: translatex(74px) translatey(90px);
    -o-transform: translatex(74px) translatey(90px);
    -webkit-transform: translatex(74px) translatey(90px);
    transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
    -moz-transform: translatex(146px) translatey(90px);
    -ms-transform: translatex(146px) translatey(90px);
    -o-transform: translatex(146px) translatey(90px);
    -webkit-transform: translatex(146px) translatey(90px);
    transform: translatex(146px) translatey(90px);
}
</style>

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />


<div class="mjn-metro-menu">

<!-- defining top menu elements -->
<ul class="navi">
 <li id="n1"><a class="mjn-tab1" href="http://s2free.blogspot.com/" title="Home" ></a>
<!-- defining sub menu elements --><ul class="sub">
 <li class="l"><a class="mjn-fb" href="https://www.facebook.com/yourlink" title="Like Us on Facebook"></a></li>
 <li class="c"><a class="mjn-tw" href="https://www.twitter.com/yourlink" title="Follow Us on Twitter"></a></li>
  <li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/123456789"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/yourlink"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://s2free.blogspot.com/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
 <li class="r"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="s2free.blogspot.com/2013/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013"><span>2010</span></a></li>
</ul>
</li>
<li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="mjn-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="mjn-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="mjn-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="mjn-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>
</!doctype>

Save dan lihat hasilnya.
Selamat menjalankan ibadah puasa !!! 
Tutorial