Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Drop Down Menu Sederhana Di Website

    Diunggah oleh

    Verdi Ferdiansyah
    10 tayangan6 halaman
    design web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    design web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan6 halaman

    Membuat Drop Down Menu Sederhana Di Website

    Diunggah oleh

    Verdi Ferdiansyah
    design web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Membuat Drop Down Menu Sederhana di Website

    Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan
    bagaimana cara me mbuat drop down menu yang simple dan sederhana agar
    bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon
    web developer maupun web designer yang singgah di website ilmugrafis. Sedikit
    penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan
    mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat
    ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan
    terlihat lebih modern dan canggih, menambah keindahan website sampai
    menghe mat space/ruang di we bsitenya karena dengan drop down kita bisa
    memberikan sub menu tersembunyi pada menu di website kita.
    Ok, mari kita mencoba membuatnya:
    1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8
    karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver
    CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua
    dreamweaver
    (start >> all program >> Dreamweaver)
    2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >>
    Css

    tulis Kode CSS di bawah ini


    /* CSS untuk drop down menu dimulai */
    ul
    {
    list-style:none;
    padding:0px;
    margin:0px
    }
    ul li
    {
    display:inline;
    float:left;
    }
    ul li a
    {
    color:#ffffff;
    background:#990E00;
    margin-right:5px;
    font-weight:bold;
    font-size:12px;
    font-family:verdana;
    text-decoration:none;
    display:block;
    width:100px;
    height:25px;
    line-height:25px;
    text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border: 1px solid #560E00;
    }
    ul li a:hover
    {
    color:#cccccc;
    background:#560E00;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border: 1px solid #000000;

    }
    ul li.sublinks a
    {
    color:#000000;
    background:#f6f6f6;
    border-bottom:1px solid #cccccc;
    font-weight:normal;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    margin-top:2px;
    }
    ul li.sublinks a:hover
    {
    color:#000000;
    background:#FFEFC6;
    font-weight:normal;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    }
    ul li.sublinks
    {
    display:none;
    }
    /* CSS drop down menu sederhana end */
    wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda
    buat dengan dreamweaver,

    save dan beri nama "dropdown.css"


    3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika
    memilih format PHP butuh bantuan Sever untuk mengoprasikannya
    caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >>
    Ok
    sekarang panggil css yang kita buat, caranya:

    klik browse, lalu ambil "dropdown.css", OK


    Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html
    kita.

    itu artinya style (CSS) yang kita buat telah masuk ke halaman html
    4. Masukkan kode ini ke code html kita. pilih code
    <!-- Menu Pertama Dimulai -->
    <ul>
    <li><a href="#" class="dropdown">Menu One</a></li>
    <li class="sublinks">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    </li>
    </ul>
    <!-- Menu Pertama Selesai -->
    <!-- Menu Kedua Dimulai -->
    <ul>
    <li><a href="#" class="dropdown">Menu Two</a></li>
    <li class="sublinks">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>

    <a href="#">Link 3</a>


    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    </li>
    </ul>
    <!-- Menu Kedua Selesai -->
    <!-- dan seterusnya -->
    copy dan paste code di atas di bagian antara <body> .... </body> , bagi yang
    belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML
    4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang... lebih jelasnya klik
    Pengenalan JQuery Website

    tulis codenya, Letakkan di bawah tag Title


    setelah itu tambahkan code Javascript ini,
    letakkan di bawah tag JQuery
    <script type="text/javascript">
    $(function(){
    $('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();
    var submenu = $(this).parent().next();
    submenu.css({
    position:'absolute',
    top: $(this).offset().top + $(this).height() + 'px',
    left: $(this).offset().left + 'px',
    zIndex:1000
    });
    submenu.stop().slideDown(300);
    submenu.mouseleave(function(){
    $(this).slideUp(300);
    });

    });
    });
    </script>
    ini gambarnya

    Selesai, dan hasilnya kira - kira seperti ini

    Gambar: Drop down menu sederhana


    Drop down menu telah selesai dibuat, Anda bisa mengganti menu - menu sesuai
    keinginan anda dengan mengedit teks "Menu One" atau "Menu Two" dan Sub
    menu "Link 1" sampai dengan "Link 5" pada halaman coding HTML, silahkan
    dikembangkan sesuai keinginan.

    Anda mungkin juga menyukai