Posted by : Stiker Jalingkut
| ASSALAMU'ALAIKUM APA KABAR SOBAT
|
| pada kesempatan kali ini kami mau berbagi sedikit Tutorial Cara Membuat Menu Nevbar Dengan Transition. Nah tapi kali ini kami mau ikut2tan kaya para Master Css. Kami mencoba ingin merubah Menu Nevbar Dengan Transition
Silakan lihat Demonya mas |
| AMBIL SAJA CSS DI BAWAH BOS
|
<style>
#main-content { background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, #00ff00 30%, #ff0000 70%);
background: -webkit-linear-gradient(30deg, #00ff00 30%, #ff0000 70%);
background: -o-linear-gradient(30deg, #00ff00 30%, #ff0000 70%);
background: -ms-linear-gradient(30deg, #00ff00 30%, #ff0000 70%);
background: linear-gradient(30deg, #00ff00 30%, #ff0000 70%);
padding-top: auto;
}
/* Lebar panjang menu */
.menu-item {
position: relative;
display: inline-block;
border-left:2px solid #00ff00;border-right:2px solid #0000ff;
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
padding: 10px;
background:#000000;
/* Untuk merubah gelap terangnya menu */
height: 10px;
opacity: 0.20;
text-decoration: none;
/* Orginal Menu Transition By www.bloggertutoria.com */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.menu-item:hover {background:dodgerblue;
background:-webkit-linear-gradient(#00ff00,dodgerblue);
opacity: 1;
/* Posisi By www.bloggertutoria.com */
/* Firefox */
-moz-transform: scale(2) rotate(15deg) translate(30px);
/* WebKit */
-webkit-transform: scale(1.2) rotate(15deg) translate(30px);
/* Opera */
-o-transform: scale(2) rotate(15deg) translate(30px);
/* Standard */
transform: scale(2) rotate(15deg) translate(30px);
z-index: 1000;
}
</style>
|
| LANGKAH PEMASANGAN NYA DI BAWAH SOB
|
| Nah buat sobat yang mau pasang sobat bisa Ambil Kode Div nya di bawa ini |
| AMBIL SAJA KODE DIV DI BAWAH BOS
|
<div role="main">
<section id="main-content">
<a href="/" class="menu-item">Menu item 1</a>
<a href="/" class="menu-item">Menu item 2</a>
<a href="/" class="menu-item">Menu item 3</a>
<a href="/" class="menu-item">Menu item 1</a>
<a href="/" class="menu-item">Menu item 2</a>
<a href="/" class="menu-item">Menu item 3</a>
<a href="/" class="menu-item">Menu item 3</a>
<a href="/" class="menu-item">Menu item 1</a>
<a href="/" class="menu-item">Menu item 2</a>
<a href="/" class="menu-item">Menu item 3</a>
</section>
</div>
|
Sekian dulu dari kami tentang Artikel Cara Membuat Menu Nevbar Dengan Transition semoga berguna buat sobat yang mau pasang
PERTAMINA HEHEHEH
BalasHapushaha..pertamaxnya dipegang admin
Hapusmas adminnya...gi ngidam pertamax...hehe :)
Hapuspertamax kang, saya nyimak saja, masih belum edit-edit template.mungkin nanti bisa saya terapkan, ngopi dulu kangmas.
BalasHapussilakan sob
HapusKeren nih Kang, dengan menu Nevbar transitionnya..
BalasHapusPagi2 langsung ngopi..
ayo kita ngopi bos biar semangat
Hapussemangat 45 :)
HapusKerrren sobat,ijin nyimak aja sob..
BalasHapussilakan sob di simak
Hapuswah keren mas...nanti dicoba ah. terima kasih sudah share :)
BalasHapussilakan di coba2 dulu mas
Hapusanimasinya keren sob.. hehe met pagi aja
BalasHapusmet pagi juga sob
Hapussekarang met malem :)
Hapuscantik, tambah di add gadget saja ya,
BalasHapussilakan di mana aja mbk ky
HapusNice share om
BalasHapusditunggu kunjungan dan komennya maksih
kopi kopi...xixi
ok bos di tunggu'y
Hapusberkunjung mw mnta kopinya kak
BalasHapushehehhe,,,,,
nyimak aja,,,msih blum fham
silakan di simak2 sob
HapusKeren mas .. ;D Hehehe maf nih mas baru dateng ...
BalasHapuswah jadi tambahkeren ya sob
BalasHapusmakin kreatif aja ni masbro.. *smile
BalasHapusmakin sukses nih blog
Hapustop markonah deh mas...keren habis tutorialnya
BalasHapussekalian dagh...kopinya di srufut dulu hehe :)
keren neh bang,,,,sip
BalasHapushadir disini, oh ya bang mau tannya kenapa ya di edit templete erbaru ini bnyk yg gak ada salah satunya
BalasHapusdata:post.body/> , trus gmn solusi jika kita mau edit templete membutuhkan data:post.body/> mksh sebelumny
Saya datang kembali mas pembalap... wah kayaknya perlu beli wadah buat stok kopi nihh..
BalasHapuskerne bang,mau tanya dong cara buat widget posting lama posting baru kaya diaatas gmn,bawaan teemplte ku gak ada
BalasHapus