Langsung ke konten utama

Animated CSS3 Metro UI

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 !!! 
Label:

Komentar

  1. AnonimMinggu, Juli 28, 2013

    mas cara buat % saat mouse digerakan gimna....

    BalasHapus
  2. HP YitnoMinggu, Juli 28, 2013

    Ane copy kode-kodenya aja.
    Siapa tahu bisa untuk menu modifikasi drop down di situs ane.

    BalasHapus
  3. dedetea66Minggu, Juli 28, 2013

    parantos nu anyar deui wae rupina kang bro,,,

    BalasHapus
  4. Staff AdministratorMinggu, Juli 28, 2013

    Nunggu waktu luang...baru sy jajal ya kang :)

    BalasHapus
  5. AnonimSelasa, Juli 30, 2013

    waw kodenya panjang banget nih sob. ^_^ thx sob.

    BalasHapus
  6. AnonimSelasa, Juli 30, 2013

    template nya cantik banget nih, btw bikin scroll back to top bagaimana ya sob? :)

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Juli 30, 2013

      tuh banyak tinggal search aja di si mbah banyak ,, mau posting bikin back to top dah terlalu banyak sob ... atau datang kesini http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-implement-a-sticky-back-to-top-button/

      Hapus
  7. Catatan Harian IrfanSabtu, Agustus 03, 2013

    Script yang panjang itu untung di tempel di bagian widget yah, coba kalo dibagian dalam templatenya wah lumayan rumit tuh hehehee
    Keren keren,,, nice blog :)

    BalasHapus
  8. UnknownSelasa, Agustus 06, 2013

    Widgetnya keren sob,,,!

    BalasHapus
  9. abitalitaRabu, Agustus 07, 2013

    mantap ni gan widgetnya, izin save ya...trims

    BalasHapus
  10. Kang RianSenin, Agustus 12, 2013

    nyimak dulu deh kang rully .. hehe makasih udh berbagi , ditunggu tutorial selanjutnya .. happy blogging kang ^_^ .. #enjoy aja ..

    BalasHapus
  11. Produksi SukabumiSenin, Januari 13, 2014

    keren" kang ,. tapi masih bingung.. hihi
    newbe

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya