Pull Down Sajian Dengan Css
Pull Down Menu dengan Css yaitu salah satu cara untuk menghemat tab sajian yang tampil pada blog. Hal itu alasannya yaitu pada setiap menu, kita sanggup menambah beberapa sub sajian yang tampilan tab sajian tidak memanjang ke samping tapi kebawah sesuai dengan sub sajian yang kita tambahkan.Sebagai contoh, coba anda arahkan mouse pada demo Pull Down Menu dibawah ini :
Dari tumpuan diatas, kini anda telah lebih memahami apa itu Pull Down Menu dengan Css.
Jika anda berminat untuk menampilkan Pull Down Menu dengan Css pada blog anda, ikuti langkah-langkahnya dibawah ini :
- Masuk ke Dasbor blog anda
- Pilih Tata Letak
- Klik Tambah Gadget dimana anda ingin meletakan Pul Down Menu
- Pilih HTML/JavaScript.
- Copy Script dibawah ini lalu paste pada kolom yang tersedia
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFF00;background: #0000A0;width:100%; border:solid 1px #FFFFFF;clear:both;} /*Color navigation kafe normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFF00;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #FFFFFF; border-left:solid 1px #FFFFFF;}
.pd_menu_01 ul li a {color: #FFFF00;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFF00;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#FF0080; text-decoration:none; color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#000000; color:#FFFF00;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#000040; text-decoration:none;color:#FF0080;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#FF0080; text-decoration:none;color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#000000; color:#FFFF00;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#000000; color:#FFFF00;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#000040; text-decoration:none;color:#FF0080;} /*Color subcells hovering mode*/
</style> - Script diatas merupakan untuk mengatur tampilan keseluruhan dan belum menampilkan Menu Pull Down.
- Kode warna yang ada pada script diatas sanggup anda ganti sesuai keinginan.
- Untuk menampilkan Pull Down Menu, copy script dibawah ini dan paste sempurna dibawah instruksi diatas tadi.
<div class="pd_menu_01 ">
<ul><li><a href="URL/ALAMAT YANG DITUJU">BERANDA</a>
</li></ul>
<ul><li><a href="#">FREE DOWNLOAD</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >FREE MP3</a></li>
<li><a href="URL/ALAMAT TUJUAN" >FREE SOFTWARE</a></li>
</ul>
</li></ul>
<ul><li><a href="#">JEJARING SOSIAL</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >MY FACE BOOK</a></li>
<li><a href="URL/ALAMAT TUJUAN" >TWEETER</a></li>
</ul>
</li></ul>
<ul><li><a href="#">TIPS AND TRIK</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >BLOGGER</a></li>
<li><a href="URL/ALAMAT TUJUAN" >WORDPRESS</a></li>
<li><a href="URL/ALAMAT TUJUAN" >KESEHATAN</a></li>
</ul>
</li></ul>
<ul><li><a href="#">TV ONLINE</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >RCTI</a></li>
<li><a href="URL/ALAMAT TUJUAN" >GLOBAL TV</a></li>
<li><a href="URL/ALAMAT TUJUAN" >MNC TV</a></li>
<li><a href="URL/ALAMAT TUJUAN" >METRO TV</a></li>
</ul>
</li></ul>
</div> - Kode kedua diatas merupakan instruksi untuk menampilkan Pull Down Menu.
- Ganti goresan pena yang berwarna kuning dengan nama tampilan dan URL/alamat yang dituju.
- Setelah simpulan pengeditan, klik tombol simpan
- Lihat blog anda...