Membuat Horizontal Menu dengan CSS

Posted @ 01.55 by Sri Lestari

sumber : http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi

Setelah lama tidak menulis artikel baru, kali ini saya akan mengajari tentang membuat horizontal menu dengan CSS. Ya saya pernah menulis tentang cara membuat horizontal menu sebelumnya, tapi kali ini kita akan menggunakan images sehingga menu kita akan menarik. Disini kita akan mempelajari trik CSS tentang Images Sprites dan Images Replacement serta sebagai bonus akan saya tambahkan animasi dengan memanfaatkan framework JQuery.

Sebelum kita memulainya ada baiknya anda melihat contoh Horizontal Menu yang akan kita buat. Bagaimana? sudah melihatnya? tertarik? baca terus artikel ini. Menu tersebut dibuat dengan menggunakan CSS dan teknik Image Replacement dan Image Sprites. Plus Framework JQuery untuk membuat animasinya. Oke saya tahu anda sudah tidak sabar, kalau begitu langsung saja kita mulai pembuatannya.

Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.

Membuat HTML yang Standard untuk Menu

Pada artikel sebelumnya saya sudah mengajari bagaimana membuat menu yang baik, kita akan menggunakan konsep yang sama, karena memang teknik tersebutlah yang dianjurkan untuk membuat menu. Jadi kita menggunakan tag HTML

    dan
  • . Oke anda pasti sudah tahu mengenai tag HTML ini, langsung saja kita buat kode HTMLnya terlebih dahulu: 

     html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    

     http-equiv="Content-Type" content="text/html; charset=utf-8" />	

    </span>Contoh Horizontal Menu<span class="sh_keyword">

    

    

    Contoh Horizontal Menu

    Silahkan lihat hasilnya disini. Sudah terlihat kan bentuk menunya, ya masih biasa karena kita belum menstyle nya dengan CSS. Oke jika anda perhatikan untuk tiap menu (

  • ) memiliki id yang berbeda-beda. Kenapa? karena setiap menu panjang imagenya berbeda, maka CSS nya juga berbeda-beda untuk tiap menunya. Sebelum kita mulai membuat CSS nya silahkan anda save gambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.
    Menu Home Menu Artikel Menu About
    Sekarang mari kita mulai buat CSS nya.

    Image Replacement

    Image Replacement merupakan sebuah teknik dimana kita mereplace text yang ada dengan image menggunakan CSS. Teknik ini berguna apabila kita menginginkan teks dengan font yang aneh ataupun text dengan efek-efek yang tidak mungkin bisa dilakukan dengan CSS.

    Jika anda perhatikan pada setiap menu, ada tag didalamnya. Nah tag ini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tag ini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik. 

    body {

    font-family:arial, serif;

    }

    #container {

    border:1px solid #ffbc58;

    padding:10px;

    background:#ffe9c8;

    }

    Anda tentu sudah tahu fungsi CSS diatas, kita hanya memberikan font jenis arial untuk dan memberi border serta background untuk #container. Sehingga hasilnya sekarang menjadi seperti ini. Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya. Tambahkan CSS berikut ini. 

    ul {

    list-style:none;

    margin:0;

    padding:0;

    }

    #topmenu {

    height:30px;

    }

    #topmenu li {

    float:left;

    position:relative;

    }

    Pada CSS tersebut kita menghilangkan padding dan margin serta bullet (list-style:none;) pada tag

      . Kemudian untuk #topmenu (sebenarnya sama aja, #topmenu itu sama dengan
        , tapi saya lebih senang memisahnya) kita berikan tinggi 30px height:30px;. Jangan lupa untuk
      • nya kita beri float:left; agar menu nya kesamping. Serta position:relative; yang akan berguna untuk animasinya yang akan saya jelaskan belakangan. Sehingga hasilnya akan berubah seperti ini.

        Jika anda lihat maka menunya telah menyamping dan dempet-dempet. Sekarang mari kita ubah menjadi images dengan teknik Image Replacement. Kita akan mengubah menu home nya terlebih dahulu, dan jika anda lihat pada kode HTML nya, pada bagian home id nya menu_1. Tambahkan CSS berikut ini: 

        #menu_1{

        width:70px;

        height:30px;

        float:left;

        font-size:1.2em;

        position:relative;

        }

        #menu_1 span{

        background:url(menu_1.jpg) no-repeat;

        position:absolute;

        width:100%;

        height:100%;

        cursor:pointer;

        }

        Ilustrasi menuHasilnya menjadi seperti ini. Jika anda lihat kita menentukan width dan height untuk menu_1. Jika anda lihat gambar menu_1.jpg diatas mungkin anda bertanya-tanya, width nya memang benar 70px tapi height nya kan 60px? kenapa di CSS nya height nya 30px? Ya karena yang ingin kita tampilkan adalah 30px bagian atas. 30px bagian bawah kita tampilkan waktu hover.

        Pada #menu_1 span kita beri background yang berisi images dari menu_1.jpg dan jangan lupa position:absolute; agar kita menutupi text nya. Karena kita beri position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi dan lebar kita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkan cursor:pointer agar di browser IE mousenya berubah. Begitulah kira-kira trik Image Replacement. Mudah kan, lakukanlah hal yang sama untuk menu sisanya, tentu saja width nya berbeda. Tambahkan kode CSS berikut ini untuk menu lainnya. 

        #menu_2{

        width:91px;

        height:30px;

        float:left;

        font-size:1.2em;

        position:relative;

        }

        #menu_2 span{

        background:url(menu_2.jpg) no-repeat;

        position:absolute;

        width:100%;

        height:100%;

        cursor:pointer;

        }

        #menu_3{

        width:103px;

        height:30px;

        float:left;

        font-size:1.2em;

        position:relative;

        }

        #menu_3 span{

        background:url(menu_3.jpg) no-repeat;

        position:absolute;

        width:100%;

        height:100%;

        cursor:pointer;

        }

        Image Sprites

        Sekarang kita buat efek hovernya dimana kita di hover menggeser images kita 30px kebawah agar yang tampil adalah images yang lain. Teknik seperti ini kalau orang bule nyebutnya Images Sprites. Jika anda perhatikan pada gambar tombol diatas maka pada setiap gambar dibawahnya ada efek hover nya. Nah untuk memindahkan backgroundnya kita gunakan background-position. Tambahkan kode CSS ini. 

        #topmenu a:hover span {

        background-position:0 -30px;

        }

        Mudah kan? dan hasilnya seperti ini. Tapi jika anda coba buka di IE 6, ketika kita melakukan hover maka efeknya berjalan tetapi jika kita sudah tidak dihover gambarnya tetap, tidak berubah. Terus bagaimana? Jangan pernah anda salahkan browsernya, yang salah tentu yang membuat kodenya, yaitu kita. Tapi tenang saja akan kita perbaiki. Itu hanya masalah status pada dimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tenang saja tidak usah panik tambahkan CSS berikut ini: 

        a,a:link,a:visited,a:hover {

        color:#ff9800;

        text-decoration:none;

        }

        a:focus,a:hover {

        text-decoration:underline;

        }

        Sehingga hasilnya menjadi seperti ini. Sip sudah jalankan, gimana gampang kan? Silahkan anda coba disemua browser, disemua media (HP, PDA, Screen Reader dll) atau anda matikan images nya dan matikan CSS nya. Hasilnya pasti tetap bisa terbaca karena kita menggunakan konsep Web Standards. Kurang puas? ayo kita tambahkan animasi dengan JQuery

        Animasi dengan JQuery

        Jquery merupakan Framework Javascript yang berisi library-library yang menarik. Salah satunya adalah animasi. Kenapa saya pilih Jquery? karena JQuery cukup cepat diload dan lebih kompatibel disemua browser. Framework lainnya yaitu Mootools juga cukup baik, dia cepat di IE tetapi sangat lambat di Firefox dan memakan resource komputer cukup banyak. Demikian juga dengan Prototype. Kalau yang ingin lebih cepat, gunakan Dojo, tapi kali ini saya menggunakan JQuery

        Saya menemukan teknik animasi ini pada website Webdesignerwall, pada website tersebut ia menggunakan tag untuk membuat animasinya. Disini saya mencoba mengubanya menggunakan tag

        agar kita bisa lebih menghias text didalamnya dan tentu saja merubah CSS nya. Oke sebelum mulai, silahkan anda simpan gambar bubble speech dibawah ini, jika anda tidak suka dengan gambarnya silahkan cari gambar yang lain, karena gambar ini saya buat sendiri dengan terburu-buru jadi mungkin kurang menarik.
        Bubble Speech
        Jika sudah silahkan anda download framework jquery, langsung saja kewebsitenya dan download filenya (cuma 1 file). Setelah download kita perlu meloadnya dalam HTML. Sekarang ubah kode HTML anda menjadi seperti ini: 

         html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

         xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

        

         http-equiv="Content-Type" content="text/html; charset=utf-8" />

        </span>Contoh Horizontal Menu<span class="sh_keyword">

        

        

        

        Contoh Horizontal Menu

        Jika anda lihat pada bagian atas kita meload jquery.js yang merupakan framework Jquery dan kita menambahkan kode: 

        $(document).ready(function(){

        $("#topmenu a").hover(function() {

        $(this).next("div").animate({opacity: "show", top: "-60"}, "slow");

        }, function() {

        $(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");

        });

        });

        Fungsi tersebut berarti kita menginisialisasikan efek hover pada #topmenu a didalam CSS. Dimana apabila kita menemukan tag

        setelah #topmenu a maka kita animasikan dengan mengurangi jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka setiap menu sekarang ada tag
        yang berisi informasi mengenai menu tersebut. Nah dengan bantuan CSS maka kita akan hilangkan menu tersebut. Masukkan kode CSS berikut ini: 

        #topmenu li div {

        font-size:11px;

        background:url(bubble.gif) no-repeat;

        width: 80px;

        height: 33px;

        position: absolute;

        text-align: center;

        z-index: 2;

        display: none;

        text-align:center;

        padding:10px 5px;

        top:-40px;

        left:0;

        }

        Yang perlu diperhatikan pada CSS ini adalah, kita menghilangkannya dengan display: none; dan memberinya position:absolute; dan z-index: 2; agar posisinya diatas yang lainnya. Karena posisi nya absolute maka container dibawahnya diberi position:relative; (pada #topmenu li). Jika anda ingin mengubah posisi munculnya animasi, anda dapat mengubah nilai top pada CSS dan nilai top pada javascript nya.


0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)