Cara Membuat Menu Dengan CSS Transition

Posted by : Stiker Jalingkut

Apa kabar sobat semuah seperti biasa kami mau berbagi
sedikit Tutorial mengunakan CSS Transition 
trik ini dulu sudah pernah kami posting sobst bisa lihat linik di bawah
DEMO

Bisa jua Disini

 Menu ini ada dua pilian yang satu menggunakan gambar 
yang kedua hanya menggunakan linik
sobat bisa pilih di antar dua pilian itu sesuka sobat semuah
Silakan sobat yang mau pasang ikuti langkah-langkahnya di bawah

 Pertama sobat masuk ke blog sobat semuah 
pilih Edit Template lalu copy kode di bawah ini
pastekan pas di bawah kode <head> atau di bawah kode </b:skin>

 

<style type='text/css'>.menu_body {
    /* CSS3 perspective */
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    -o-perspective: 1500px;
    perspective: 1500px;
}

.menu, .page_content {
    /*CSS3 kotak-sizing, transisi dan transformasi */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}

/* elemen menu utama (yang muncul dari atas) */
.menu {
    background:transparans;
    display: block;
    position: fixed;
    width: 100%;
    height: 100px;
    z-index: 1;

    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(-95%);
    -moz-transform: rotateX(-45deg) translateY(-95%);
    -ms-transform: rotateX(-45deg) translateY(-95%);
    -o-transform: rotateX(-45deg) translateY(-95%);
    transform: rotateX(-45deg) translateY(-95%);
}

/* mengubah warna latar belakang dan memutar elemen menu utama di hover */
.menu:hover {
    background:transparans;

    /* CSS3 transform */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* menu utama - sifat UL-LI */
.menu ul {border: 1px solid #1E1E1E;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
   -moz-box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
   box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1036px;
}
.menu ul li {background:#00ff00;
    float: left;
    list-style: none outside none;
    margin: 10px;

    /* CSS3 transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu ul li:hover {
    background-color: #7e00d6;

    /* CSS3 border-radius */
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
}

/* rest page content */
.page_content {
    padding: 20px 0 0;
}

/*ketika kita mengarahkan kursor pada menu - mengubah page_content bawah */
.menu:hover ~ .page_content {
    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(50px);
    -moz-transform: rotateX(-45deg) translateY(50px);
    -ms-transform: rotateX(-45deg) translateY(50px);
    -o-transform: rotateX(-45deg) translateY(50px);
    transform: rotateX(-45deg) translateY(50px);
}

/* page's elemen naungan (terlihat secara default) */
.page_content .shade {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;

    /* CSS3 linear-gradient */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);

    /* CSS3 transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* ketika kita mengarahkan kursor pada menu - menampilkan teduh */
.menu:hover ~ .page_content .shade {
    opacity: 1;
    visibility: visible;
}</style>



<div class='menu'>
            <ul>
<li><a href='http://bloggertutoria.blogspot.com/'>HOME</a></li>
<li><a href='http://mkrgayamdesain.blogspot.com/'>TUTORIAL</a></li>
<li><a href='http://bingkaiframes.blogspot.com/'>TEMPLATE</a></li>
<li><a href='http://selladrt-tempelate.blogspot.com/'>CSS</a></li>
<li><a href='http://selladrt11.jw.lt/'>JAVASCRIP</a></li>
<li><a href='http://bloggertutoria.blogspot.com/'>MODIVIKASI</a></li>
<li><a href='http://bloggertutoria.blogspot.com/'>WISATA</a></li>
<li><a href='http://bingkaiframes.blogspot.com/'>AWARD</a></li>
<li><a href='http://selladrt-tempelate.blogspot.com/'>SAHABAT</a></li>
<li><a href='http://selladrt11.jw.lt/'>TUKER LINIK</a></li>
<li><a href='http://bloggertutoria.blogspot.com/'>JURAGAN JENGKOL</a></li>
<li><a href='http://selladrt11.jw.lt/'>TUKER LINIK</a></li>
<li><a href='http://bloggertutoria.blogspot.com/'>JURAGAN JENGKOL</a></li>
</ul>
</div> 
 

code di atas Css Dan Div nya itu Menu yang menggunakan linik

Sobat Geser Kurso  nya keatas biar bisa keluar Menunya
Demonya Diini

 begitu juga Demo yang di sini sobat Geser Kurso keatas

 Kode yang kedua kode yang menggunakan kambar silakan Copy Kode di bawah ini



<style type='text/css'>.menu_body {
    /* CSS3 perspective */
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    -o-perspective: 1500px;
    perspective: 1500px;
}

.menu, .page_content {
    /* CSS3 kotak-sizing, transisi dan transformasi*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}

/* elemen menu utama (yang muncul dari atas) */
.menu {
    background:transparans;
    display: block;
    position: fixed;
    width: 100%;
    height: 300px;
    z-index: 1;

    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(-95%);
    -moz-transform: rotateX(-45deg) translateY(-95%);
    -ms-transform: rotateX(-45deg) translateY(-95%);
    -o-transform: rotateX(-45deg) translateY(-95%);
    transform: rotateX(-45deg) translateY(-95%);
}

/* mengubah warna latar belakang dan memutar elemen menu utama di hover */
.menu:hover {
    background:transparans;

    /* CSS3 transform */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* menu utama - sifat UL-LI */
.menu ul {border: 1px solid #1E1E1E;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
   -moz-box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
   box-shadow: 0 5px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1036px;
}
.menu ul li {background:#00ff00;
    float: left;
    list-style: none outside none;
    margin: 10px;

    /* CSS3 transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu ul li:hover {
    background-color: #7e00d6;

    /* CSS3 border-radius */
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
}

/* rest page content */
.page_content {
    padding: 20px 0 0;
}

/* ketika kita mengarahkan kursor pada menu - mengubah page_content bawah */
.menu:hover ~ .page_content {
    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(50px);
    -moz-transform: rotateX(-45deg) translateY(50px);
    -ms-transform: rotateX(-45deg) translateY(50px);
    -o-transform: rotateX(-45deg) translateY(50px);
    transform: rotateX(-45deg) translateY(50px);
}

/* page's shade element (terlihat secara default) */
.page_content .shade {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;

    /* CSS3 linear-gradient */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);

    /* CSS3 transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* ketika kita mengarahkan kursor pada menu - menampilkan teduh */
.menu:hover ~ .page_content .shade {
    opacity: 1;
    visibility: visible;
}</style>

<div class='menu'>
<ul>
<li><a href='http://bloggertutoria.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6wt08wwyPepfNdyWGl5wms7-inWOAePcfZxrA2l_gYvMO77iziNz6H6fSgIy_SBdoR_VpUkNSp4t3WM4pHpfCRI6VelYl6RwViWopg-b7fMkRkV5NwWw9TsewcTv9c5p6l8aUZ1wq_I/s72-c/BD.jpg'/></a></li>
<li><a href='http://mkrgayamdesain.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gkH0rpWvOQgf3HP5pWEKIXJXhNl280-roCARCn0eeZX-LLVNMTjc6_1PNcEKKktXIoEpvCRQRFg2PKgazoR7RUI6mKSd9z2e6HapctMa9VM3mAkvz3mH_fLhyphenhypheng_waV77hMsK2P04bok/s72-c/Liar.jpg'/></a></li>
<li><a href='http://bingkaiframes.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZV4wNtIcKv8BEsAIFzVtNE025EQBj3DF_O78HdnbsgAAAVXu6M4LAbi9T_NOyIPqbATnQnOuMPWg15FcYAtJ_mWtNZuD-EZC17PtJXPM0_2_56Id5qoLp6Kt50UYOzAJmpF9vM39nVI/s72-c/Cewek_Bandung_sh_Dq_KM88.jpg'/></a></li>
<li><a href='http://selladrt-tempelate.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7QfmPyVLobmuUZyJU7-l26ls4gFb8tSoOifmhG3sS8m2u6RZ98ZAt5SkL-CPyqdRDbYeau31nYElHTa92ECLs99XGUZgWV2KeOcvBfakFx74JEQtdcL7mbP5flxzFgYT3oTABiy83UE/s72-c/menu+serbaguna.jpg'/></a></li>
<li><a href='http://selladrt11.jw.lt/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-1hamCTTgNlH6bqnBO_mg8YC7BWpcoHXDt-scdsNMVJFsvPb2WwcMU7nyyJeID59hQwKQZg7KKPu22s04jG_eo6Kilwilx9iRaRVAdWamkeNX-mEsi-kfnCitkvqQ0TpWkPnRpvsvILU/s72-c/lebel3.jpg'/></a></li>
<li><a href='http://bloggertutoria.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIJoBJ3LQ5OjQF05gOUzJImBI4mTB8FaUbEr6E206tc5u33FaVWKeRWOvl2GP8KvbOGeW9ULgS7akN3VWorBXCHk4dKBjwUOvX7E2I4tXsq0hwyogQ31zaraE1OPNCxWxk5avQEFtcMY/s72-c/MAS+MAS.jpg'/></a></li>
<li><a href='http://bloggertutoria.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiatZ4UumEtnfiUgZrzbydepDZVosG-EMM6O3GYORct_b-SLrGKcSK7VIzqiSDMKDWORfFPkZifPDOml0rFSy59c43scjAw4rq_5rAf7WxxhMHoiHpZR9ciNf48RnsUTAiviQ5pbmenB9w/s72-c/love+Selladrt.jpg'/></a></li>
<li><a href='http://bingkaiframes.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZV4wNtIcKv8BEsAIFzVtNE025EQBj3DF_O78HdnbsgAAAVXu6M4LAbi9T_NOyIPqbATnQnOuMPWg15FcYAtJ_mWtNZuD-EZC17PtJXPM0_2_56Id5qoLp6Kt50UYOzAJmpF9vM39nVI/s72-c/Cewek_Bandung_sh_Dq_KM88.jpg'/></a></li>
<li><a href='http://selladrt-tempelate.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7QfmPyVLobmuUZyJU7-l26ls4gFb8tSoOifmhG3sS8m2u6RZ98ZAt5SkL-CPyqdRDbYeau31nYElHTa92ECLs99XGUZgWV2KeOcvBfakFx74JEQtdcL7mbP5flxzFgYT3oTABiy83UE/s72-c/menu+serbaguna.jpg'/></a></li>
<li><a href='http://selladrt11.jw.lt/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-1hamCTTgNlH6bqnBO_mg8YC7BWpcoHXDt-scdsNMVJFsvPb2WwcMU7nyyJeID59hQwKQZg7KKPu22s04jG_eo6Kilwilx9iRaRVAdWamkeNX-mEsi-kfnCitkvqQ0TpWkPnRpvsvILU/s72-c/lebel3.jpg'/></a></li>
<li><a href='http://bloggertutoria.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIJoBJ3LQ5OjQF05gOUzJImBI4mTB8FaUbEr6E206tc5u33FaVWKeRWOvl2GP8KvbOGeW9ULgS7akN3VWorBXCHk4dKBjwUOvX7E2I4tXsq0hwyogQ31zaraE1OPNCxWxk5avQEFtcMY/s72-c/MAS+MAS.jpg'/></a></li>
</ul>
</div>
 

 
Jangan lupa Kode Div Nya di pastekan pas di bawah Code <body>


Sekian dulu dari kami semoga bermanfaat buat sobat yang membutuhkannya

{ 26 comentários... read them below or Comment }

  1. Anonim20 Mei 2013 pukul 08.43

    mantaapp nih mass ..
    template nya ganti uyy , jdi item skrang , lbih berjiwa mas :)

    BalasHapus
  2. Anonim20 Mei 2013 pukul 09.10

    keren mas ... bisa ngumpet2 gitu ...

    BalasHapus
    Balasan
    1. Stiker Jalingkut20 Mei 2013 pukul 17.45

      iyalah kan di bawah aq juga keren tuh
      Tapi sayang di jadikan Cewe aq gak mau hahahay

      Hapus
  3. nia dewiasih20 Mei 2013 pukul 15.16

    Kok bs gitu yaaa :Ohahaha

    BalasHapus
    Balasan
    1. Stiker Jalingkut20 Mei 2013 pukul 17.47

      bisa kan tadinya mau ngumpetin kamu tapi kamunya gak mau jadi yang aq umptin Menunya hehehehy

      Hapus
  4. Anonim20 Mei 2013 pukul 17.42

    mantap.... nih....
    dewanya CSS nih.....

    BalasHapus
  5. Djangkaru Bumi20 Mei 2013 pukul 17.59

    Code CSS nya semakin keren. Lain waktu ijin untuk ambil kodenya lagi.

    BalasHapus
  6. Anonim20 Mei 2013 pukul 18.20

    Keren bookmark ah siapa tau berguna.. lumayan animasinya kaya pake flash

    BalasHapus
  7. Boku no Blog20 Mei 2013 pukul 19.10

    Mantab Kang, lebih mantap Lɑ̤̥̈̊ƍΐ jika utak atiknya sambil ngopi :)

    BalasHapus
  8. miss yatie20 Mei 2013 pukul 19.30

    KY memang mahu buat tapi tak pernah bisa jadi

    BalasHapus
  9. Anonim20 Mei 2013 pukul 21.22

    Jangan suka nyembunyiin menu, kasian yang nyari lho...kopinya satu bang!?hehe

    BalasHapus
    Balasan
    1. Stiker Jalingkut20 Mei 2013 pukul 23.56

      ok ntar kami antar mas hehehe. biar bingung mas carinya hehehe

      Hapus
  10. ™LOMBOK@NET GISTING™20 Mei 2013 pukul 23.09

    met siang sob,, makasih infonya yaa, dan maaf jarang mampir,,

    BalasHapus
  11. Unknown20 Mei 2013 pukul 23.31

    Mantaap abiz,, terima kasih master blog

    BalasHapus
    Balasan
    1. Stiker Jalingkut21 Mei 2013 pukul 00.00

      iya sama2 bos. iya juga,s aq master kopi susu heheheh

      Hapus
  12. Bang Hendra21 Mei 2013 pukul 02.19

    Tutorial super.. Ntar mau coba yg pake link aja mas. Tengkiu.

    BalasHapus
  13. Stiker Jalingkut21 Mei 2013 pukul 03.48

    tenang sob pasti aq anterin kopi ketempat sobat

    BalasHapus
  14. Unknown26 Mei 2013 pukul 22.31

    mantaap ... abisss

    BalasHapus

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

Diberdayakan oleh Blogger.
►

- Copyright © TUTORIAL™ - Blogger Templates - Powered by Blogger - Designed by Sella -