Pada Kesempatan Kali Ini Kami Mau Berbagi Tentang
Terbang Menu Drop Gaya Koran
Hari ini, saya ingin menunjukkan kepada Anda menu lain CSS3 murni navigasi di mana saya menerapkan beberapa efek bernyawa bagus. Saya baru saja diajarkan sub menu kami untuk terbang dari apa-apa, dan mengalahkan sebagai hati ketika Anda membawa mouse Anda ke elemen. Jika Anda sudah siap, mari kita mulai.
Tapi Jangan Lupa Lihat Demo nya Dulu Genk..
Sudah Liatkan Hasilnya Mantap Genk Heheheheh....?
Kita Mulai Yuk Genk Yang Mau Pasang Terbang CSS3 Navigation Menu
Cara Nya Mudah Genk Langkah2 Nya..
Langkah: 1 Cari Code </b:skin> Kalu Sudah Ketemu Copy Code Di Bawah Genk
Di Taroh Pas Di Atasnya Code </b:skin>
Menu Drop Gaya Koran By Selladrt
Kalu Sudah Langkah Pertama Kita Lanjutkan
Langkah: 2 <div id='wrapper'> Kalu Sudah Ketemu Sobat
Copy Code Di Bawah Lalu Di Paste Pas Di Atasnya Code <div id='wrapper'>
Kalu Langkah Kedua Sudah Simpan Template Lihat Hasilnya
Pasti Jreeeeeeeeeeeeeng D: heheh
Semoga Berguna Buat Yang Membutuhkannya
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("http://selladrt11.jw.lt/Drop Seksi/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://selladrt11.jw.lt/Drop Seksi/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Better style on light background */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
Kalu Sudah Langkah Pertama Kita Lanjutkan
Langkah: 2 <div id='wrapper'> Kalu Sudah Ketemu Sobat
Copy Code Di Bawah Lalu Di Paste Pas Di Atasnya Code <div id='wrapper'>
Kalu Langkah Kedua Sudah Simpan Template Lihat Hasilnya
Pasti Jreeeeeeeeeeeeeng D: heheh
Menu Drop Gaya Koran By Selladrt
Sekian Dulu Artikel Dari Kami Genk Tentang Menu Drop Gaya Koran Semoga Berguna Buat Yang Membutuhkannya
{ 23 comentários... read them below or Comment }
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 "
Wuih Hebat genk..
BalasHapusSuer indah dan menarik sekali demonya. Bisa di contek genk.
trmkasi genk spot dan knjungannya. silakan genk di contek heheh
BalasHapusTerimakasih kang mas genk tutorialnya, sukkaaa dehhh nanti kalau saya pengen ganti coba pakai ini hehehehe,,,, selamat siang genk :)
BalasHapusTrmkasi genk kunjungan siang nya jga spot nya silakan kalu berminat genk..
BalasHapusijin nyimak saja teman :)
BalasHapusYups bisa langsung di coba nih gan artikelx.mantab dah pokokx.
BalasHapushttp://arpan-komunitas.blogspot.com
Alindro Nugie@ slakan di simak genk
BalasHapusAlindro Nugie@ trmkasi genk knjungannya dan spot nya
BalasHapusArek Pancur@ silakan genk klu berminat di prktekan heheh...?
BalasHapusga ada contoh tampilannya kah (menu drop ala koran)?
BalasHapusAnnesya@ hehehehe kan ada Demo nya sobat tinggal lihat'j xixix. trmkasih genk tlah berknjung
BalasHapusHallo Genk...mantef banget nih tutornya izin mau disedotttttttt Genkkkkkkkk..hahahahyy
BalasHapusIcah Banjarmasin@ slamat mlm genk trmkasi dah brknjung dan mmberi spot
BalasHapuskalo dari hape sayangnya gak keliatan..
BalasHapuspasnem@ met mlm genk trmkasi knjungannya genk masa,s aq ja lwat hp kliatan genk.
BalasHapusPostingan yang bagus sahabatku, jangan lupa mampir untuk kesuksesan anda, ada libster Award untuk menjalin persahabatan kita dalam dunia Bloger, silahkan di comot saja, ditungggu dan terima kasih yah
BalasHapusselamat malm genk terimakasi banyak genk spot nya. Langsung ke TKP genk.
BalasHapuskeren..lagi nih...thx bang
BalasHapusluhur fatah@ siang shabat trmkasi spot dan knjungannya smga slalu di beri kmdahan dlam usaha apapun sobat
BalasHapusabis liat demonya keren juga sob :)
BalasHapustrmkasi spot dan kunjungannya sobat
BalasHapuswah keren neh bang, ijin coba ya
BalasHapussilakan sobat di cba
Hapus