Cara Membuat Menu drop down 2013

Posted by : Stiker Jalingkut

Assalamu'alaikum. Apakabar sobat semuah pada kesempatan kali ini kami mau berbagi tentang Tutorial sudah banyak si Tutorial Cara Membuat Menu drop down yang di modivikasi dari para master2 Css. nah tapi kali ini kami Modivikasi yang belom pernah ada heheheh juga kami namakan Cara Membuat Menu drop down 2013 dan ada dua yang kami tambahkan sedikit Css Transition dan Css Animation jadi di setiap Menu drop down 2013 mempunya Efek tersendiri sehingga terlihat Eveknya D: heheh sobat bisa lihat langsung DOMO di kanan kiri di Blog Jadul kami ini.

Buat sobat yang mau pasang silakan Copy Kode Css Buat penepatan di sebelah KIRI


<style>ulsel.menu{
 list-style:none;
 position:fixed;
 height:270px;
 width:auto;
 left:100px;/*Ukuran style post Kiri*/
 left:222px;/*Ukuran style post Kiri*/
}
ulsel.menu li{
 display:block;
}
ulsel.menu li a{
 background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);border: 2px solid #000;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);/* style Orginal Modivikasi By www.bloggertutoria.com*/-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
 display:block;
 padding:10px;
 width:30px;
 height:30px;
 line-height:30px;
 outline:none;
 border:2px solid #00ff00;-webkit-border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:20px;
 font-size:50px;text-align:center;
}
ulsel.menu li a:hover{
 background:#fff;transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
}
ulsel.menu li a img{
 border:none;
}</style>

Buat sobat yang mau pasang untuk Sebelah KANAN silakan Copy Kode Css di bawah ini


<style>uldrt.menu{
 list-style:none;
 position:fixed;
 height:270px;
 width:auto;
 right:auto;/*Ukuran style post Kanan*/
 right:222px;/*Ukuran style post Kanan*/
}
uldrt.menu li{
 display:block;
}
uldrt.menu li a{
 background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);/* style Orginal Modivikasi By www.bloggertutoria.com*/border: 2px solid #000;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);   -moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
 display:block;
 padding:10px;
 width:30px;
 height:30px;
 line-height:30px;
 outline:none;
 border:2px solid #00ff00;-webkit-border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:20px;
 font-size:50px;text-align:center;
}
uldrt.menu li a:hover{
 background:#fff;-webkit-animation: cssAnimation 1s 16 ease;
-moz-animation: cssAnimation 1s 16 ease;
-o-animation: cssAnimation 1s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(0.966) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(0.966) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(0.966) skew(1deg) translate(0px); }
}
}
uldrt.menu li a img{
 border:none;
}</style>

Silakan Copy kode Div Nav nya di bawah untuk Posisi KIRI


<uldrt class='menu' id='menu'>
  <li><a href='#'><h1>S</h1></a></li>
<li><a href='#'><h1>E</h1></a></li>
<li><a href='#'><h1>L</h1></a></li>
<li><a href='#'><h1>L</h1></a></li>
<li><a href='#' id='effect-n'><h1>A</h1></a></li>
<li><a href='#'><h1>D</h1></a></li>
<li><a href='#' id='effect-n'><h1>R</h1></a></li>
<li><a href='#'><h1>T</h1></a></li>
</uldrt>

Silakan Copy kode Div Nav nya di bawah untuk Posisi Kanan


<ulsel class='menu' id='menu'>
  <li><a href='#'><h1>S</h1></a></li>
<li><a href='#'><h1>E</h1></a></li>
<li><a href='#'><h1>L</h1></a></li>
<li><a href='#'><h1>L</h1></a></li>
<li><a href='#' id='effect-n'><h1>A</h1></a></li>
<li><a href='#'><h1>D</h1></a></li>
<li><a href='#' id='effect-n'><h1>R</h1></a></li>
<li><a href='#'><h1>T</h1></a></li>
</ulsel>

Perhatian di bagian Div Nav Sobat bisa ganti Text Atau Gambar
Sesuka sobat Ukuran gambar 26 X 26...

Sekian dulu dari kami tntang Postingan Kali ini Cara Membuat Menu drop down 2013
semoga bermanfaat buat sobat yang membutuhkannya Amin...?

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

Kang Muroi25 Juni 2013 pukul 20.32
wah menu baru nih mas, keren juga yah, saya bungkus dulu mas
BalasHapus
Balasan
Decyber LAB25 Juni 2013 pukul 20.34
ijin nyobain tutornya mas,,
BalasHapus
Balasan
Anonim25 Juni 2013 pukul 20.42
Mantap kang menu drop downnya
BalasHapus
Balasan
dunia maya25 Juni 2013 pukul 21.40
saya nyimak aja mas,,,,
newbie masih ngeblog pake hape
BalasHapus
Balasan
Rohis Facebook25 Juni 2013 pukul 22.02
demonya yg mana ya??
BalasHapus
Balasan
Masnady25 Juni 2013 pukul 22.22
wah si raja css mulai beraksi kembali nih hehehehe save dulu ah.. terimakasih sobat.. ngopi dulu yuk..?
BalasHapus
Balasan
abang ichal26 Juni 2013 pukul 00.36
menunya jadi rame
BalasHapus
Balasan
Unknown26 Juni 2013 pukul 00.45
wah keren mas bos template nya :D hhehehehe ...
BalasHapus
Balasan
Rizal Uye26 Juni 2013 pukul 07.58
keren mas
BalasHapus
Balasan
Jery Yanuarlan26 Juni 2013 pukul 08.56
selamat malam mas...mau nganterin kopi hehehe

wah baru nih ya mas, tak bungkus dulu ya...
BalasHapus
Balasan
Hariyanto Wijoyo26 Juni 2013 pukul 10.11
wow...css lagi...mendingan duduk manis saja sambil nyeruput kopi nonton gangnam style ala indonesia :-)
BalasHapus
Balasan
Anonim26 Juni 2013 pukul 10.58
kayaknya ini kunjungan pertama saya disini bang :)
langsung kepincut klepek-klepek liat menunya bang *hehehe
keren dan menarik pastinya, transisi plus animasi
BalasHapus
Balasan
Anonim26 Juni 2013 pukul 11.28
Keren mas ... :D Thanks sudah berbagi ...
BalasHapus
Balasan
Unknown26 Juni 2013 pukul 16.38
Keren nih mas, mas ini emang hebat banget :D
BalasHapus
Balasan
Unknown26 Juni 2013 pukul 17.33
Kerren mas, ijin lihat-lihat aja....
BalasHapus
Balasan
Staff Administrator26 Juni 2013 pukul 19.02
keren maS Genk...
kapan2 boleh request *Menu drop down yang*versi buat puasa n lebaran ya mas...hehe :D
BalasHapus
Balasan
mahbub ikhsan26 Juni 2013 pukul 20.40
numpang ngopi aja deh...sob....kunjungan rutin ni yeeee
BalasHapus
Balasan
Anonim27 Juni 2013 pukul 20.12
keren tutorialnya..
komen balik yaa thanks
BalasHapus
Balasan
rahmat28 Juni 2013 pukul 00.38
Waduh ini unik sekali menu drop downnya. Berwarna-warni. Tapi susahnya nggabungin warna menu dengan template kadang malah gak cucok.
BalasHapus
Balasan
Unknown29 Juni 2013 pukul 07.14
Wih, lama saya gak main kesini. Blog-nya makin kerenn, hehe.
Saya suka main-in tulisan "SELLADRT" disebelah kanan itu, Unik banget sobt, hehe
BalasHapus
Balasan

Tambahkan komentar

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 "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

Cara Membuat Menu drop down 2013

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

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut