Membuat Menu Pop up di Dreamwaver

Pada pembahasan kali ini kita akan membuat menu drop down dengan java scrip dan css style.
pastinya kita dapat menrubah sesuka hati kita hanya dengan mengedit css stylenya saja, oke langsung saja tanpa menunggu lama lagi hee

• Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:

         <ul>
    <li><a href="URL 1">MENU 1</a></li>
    <li><a href="URL 2">MENU 2</a></li>
    <li><a href="URL 3">MENU 3</a></li>
    </ul>         Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah   bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>  

• Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya.Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:
  
  1. <ul>
     <li><a href="URL 1">MENU 1</a>
     <ul>
     <li><a href="URL sub 1">Sub menu 1</a></li>
     <li><a href="URL sub 2">Sub menu 2</a></li>
     <li><a href="URL sub 3">Sub menu 3</a></li>
     </ul>
     </li>
     <li><a href="URL 2">MENU 2</a></li>
     <li><a href="URL 3">MENU 3</a></li>
     </ul>
     Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
     
  2. Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:
     
     
  • Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
    #menuku ul {
    list-style: none;
    }
    #menuku ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
    list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
    padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.
  • Untuk membuat menu-menu tersebut tampil secara horizontal:
    #menuku li {
    float: left;
    }
    #menuku li --> artinya hampir sama dengan #menukuk ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
    float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri
  • Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
    #menuku ul ul {
    visibility:hidden;
    width:149px;
    }
    #menuku ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
    visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
    width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.
  • Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
    #menuku ul li:hover ul,
    #menuku ul a:hover ul{
    visibility:visible;
    }
    CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
  • Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
    #menuku li a {
    background-color:#000000;
    height: 2em;
    width: 149px;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    }
    Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.
    background-color:#000000 -->warna backgroundnya adalah #000000
    height: 2em --> tinggi dari menu tersebut sebesar 2em
    width: 149px --> lebar menu sebesar 149px
    display: block --> menu tersebut akan tampil dalam bentuk block
    border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999.
    color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
    text-decoration: none --> link menu tidak akan mempunyai garis bawah
    text-align: center --> letak tulisan menu akan berada ditengah-tengah
  
  
  3. Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:
     <div id="menuku">
     <ul>
     <li><a href="URL 1">MENU 1</a>
     <ul>
     <li><a href="URL sub 1">Sub menu 1</a></li>
     <li><a href="URL sub 2">Sub menu 2</a></li>
     <li><a href="URL sub 3">Sub menu 3</a></li>
     </ul>
     </li>
     <li><a href="URL 2">MENU 2</a></li>
     <li><a href="URL 3">MENU 3</a></li>
     </ul>
     </div>