Cari Artikel Blog Ini

Total Tayangan Halaman

PULL DOWN MENU DENGAN CSS

Pull Down Menu dengan Css adalah salah satu cara untuk menghemat tab menu yang tampil pada blog. Hal itu karena pada setiap menu, kita dapat menambah beberapa sub menu yang tampilan tab menu tidak memanjang ke samping tapi kebawah sesuai dengan sub menu yang kita tambahkan.
Sebagai contoh, coba anda arahkan mouse pada demo Pull Down Menu dibawah ini :






Dari contoh diatas, sekarang 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 :
  1. Masuk ke Dasbor blog anda
  2. Pilih Tata Letak
  3. Klik Tambah Gadget dimana anda ingin meletakan Pul Down Menu
  4. Pilih HTML/JavaScript.
  5. Copy Script dibawah ini kemudian 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 bar 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>
  6. Script diatas merupakan untuk mengatur tampilan keseluruhan dan belum menampilkan Menu Pull Down.
  7. Kode warna yang ada pada script diatas dapat anda ganti sesuai keinginan. 
  8. Untuk menampilkan Pull Down Menu, copy script dibawah ini dan paste tepat dibawah kode 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>
  9. Kode kedua diatas merupakan kode untuk menampilkan Pull Down Menu.
  10. Ganti tulisan yang berwarna kuning dengan nama tampilan dan URL/alamat yang dituju.
  11. Setelah selesai pengeditan, klik tombol simpan
  12. Lihat blog anda...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
0 Comments

0 komentar :

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!