22 Membuat Simple Drop Down Menu dengan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

simple dropdown menu dengan CSS Alhamdulillah bisa kembali online dan berbagi tips dan trik blogging lagi kepada teman-teman setelah beberapa pekan fakum. Tentu kefakuman ini bukan karena banyaknya kesibukan offline yang menyita waktu tapi tidak lebih karena keterbatasan dan sedikit problem pada sarana yang selama ini setia membantu aktifitas online saya.

Melalui kesempatan ini pula saya memohon maaf kepada teman-teman blogger dan pengunjung setia blog ini atas segala hak yang tidak bisa saya penuhi selama masa offline, seperti saling kunjung atau blogwalking ke 'rumah maya' teman-teman.

Untuk postingan perdana setelah masa fakum kemarin, insyaAllah kali ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, kalau sebelumnya saya pernah posting tutorial cara membuat multi level drop down menu dengan JQuery maka postingan kali ini bagaimana membuat simple drop down menu dengan CSS.

Langsung pada tutorial

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

#menuHolder {position:relative; float:left; left:50%;}

#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}

#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}

#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}

#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}

#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}

#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}

#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}

3. Tambahkan kode HTML berikut dibawah atau diatas <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id="menuPositioner">
<div id="menuHolder">
<ul id="menu">
    <li><a href="index.html"><b>Home</b></a></li>
    <li><a href="single.html"><b>Single Level</b></a></li>
    <li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub1">
            <li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly1">
                    <li><a href="#url">Dropdown 1.1</a></li>
                    <li><a href="#url">Dropdown 1.2</a></li>
                    <li><a href="#url">Dropdown 1.3</a></li>
                    <li><a href="#url">Dropdown 1.4</a></li>
                    <li><a href="#url">Dropdown 1.5</a></li>
                    <li><a href="#url">Dropdown 1.6</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly2">
                    <li><a href="#url">Dropdown 2.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
                    <li><a href="#url">Dropdown 2.4</a></li>
                    <li><a href="#url">Dropdown 2.5</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Dropdown three</a></li>
            <li><a href="#url">Dropdown four</a></li>
            <li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly3">
                    <li><a href="#url">Dropdown 5.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub2">
            <li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
            <li><a href="#url">Dropline two</a></li>
            <li><a href="#url">Dropline three</a></li>
            <li><a href="#url">Dropline four</a></li>
            <li><a href="#url">Dropline five</a></li>
            <li><a href="#url">Dropline six</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub3">
            <li><a href="#url">Flyout one</a></li>
            <li><a href="#url">Flyout two</a></li>
            <li><a href="#url">Flyout three</a></li>
            <li><a href="#url">Flyout four</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li id="support"><a href="support.html"><b>Support</b></a></li>
    <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</div>

4. Simpan template. Hasil dari tutorial membuat simple drop down menu dengan CSS ini seperti screnshot diatas atau lihat live demo disini.

Mudah bukan? Semoga bermanfaat.

Source from CSSMenu.co.uk


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

22 komentar :

  1. Assalamu'alaikum,
    Mudah-mudahan kabar baik buat Ukhti. Sebelumnya saya khawatir kemana sahabat saya ini kok lama sekali gak OL apalagi setelah Chatboxnya dihapus, rasanya kalau saya bertanya terus melalui komentar, kurang pas deh.

    Ukhti ini sekali OL pasti membawa oleh-oleh special yang sangat bermanfaat (setidaknya bagi saya pribadi).

    Terima kasih TIP-2 unik dari Ukhti.
    Wassalam.

    BalasHapus
  2. moga kabar baik ya mba...
    terima kasih sekali tutorialnya.

    BalasHapus
  3. tutorial yg sangat bermanfaat.
    walau aku tetep bingung, hehe....

    BalasHapus
  4. assalamualikum mbak... aku mau nanya nih mbak.... kalau semisal kita mau bikin link kita bisa di katain "klik ini" dan sudah datang ke link yang dituju! itu caranya gimana mbak??

    BalasHapus
  5. wah ukhti kok gak nongol2 hehheheh aku dah lupa lho kdang chatnya kok dihapus sih??

    BalasHapus
  6. mmpir ukhti hehhhee mmpir aja absen gtu biar gak ilang merasa kehilangan degh hehehe

    BalasHapus
  7. aduh kode tag nya ga ada eyyy

    BalasHapus
  8. Moga khabar baik ya mba, saya dah lama menanti postingan lagi dari mba, makasih ilmunya.

    BalasHapus
  9. wah info menarik lagi ni, tapi sis klo bikin warnanya jadi hijau gmn caranya?

    BalasHapus
  10. @ Yuda, narti& sda: wslmun'alaik.Alhamdulillah kabar baik.

    @ Rizal: insyaAllah bs.

    @ Amu hinamori: caranya pada toolbar editor blogger saat sobat buat postingan, klik link, maka akan muncul jendela/kotak kecil edit link
    silahkan isi kotak disamping tulisan Text to display: dengan kata klik ini atau kata apa saja yg ingin ditampilkan dan pada bagian link to silahkan pilih ditujukan kelamat url atau email. Silahkan mencoba!

    @ Chomisah: terimakasih
    @ Luthi: tag/ kode ]]>< /b:skin> sy kira ada ps setiap template
    @ sepwawan: thanks
    @ Arem: klu mau jadi warna hijau, silahkan edit kode warna dan imagenya.

    Terimakasih apresiasix

    BalasHapus
  11. biar agak using liat2 kode2nya aku mau coba pasang ni drop donw..mohon ijin copy scripnya ya...oh ya link nya dah ada diblogrollku sob..ksh link balik jg ya

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. postingan yang super keren, ini yang aku tunggu... minta ijin untuk menggunakan... salam kenal ya mas...kalo ada waktu mampir.. ditunggu kedatangannya :)

    BalasHapus
  14. gimana cara yang lebih mutakhir???? so aku copas di tempat yang udah benar tapi pas di pratinjau malah keluar text :
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "href".
    Error 500

    BalasHapus
  15. makasi tutorialnya mbak,,
    untuk ganti warnanya kita harus upload gambar yha mbak?..

    BalasHapus
  16. Assalamualaikum mohon untuk memberikan solusi masalah sub menu blog yang saya kelola www.darusy-syafiiyah.com maklum ( newbie )
    jakallah atas bantuannya
    wassalamualaikum

    BalasHapus
    Balasan
    1. Wa'alaikumussalam warahmatullah. Ana lihat diblog antum dah ada menu navigasi horizontalnya, tinggal dibuat dropdown saja. Tdk usah pakai yang ini kalau belum tahu menyesuaikan CSS agar sesuai dengan desain blog antum. Wa antum fa jazaakumullahu khaeran.

      Hapus
    2. Assalamualaikum, 'afwan datang lagi dan nanya lagi, kalo saya lihat insfect Element nya pake ini <span saya tidak tau cara nambahin sub nya, caya cari kode span di HTML juga tidak nemu, o iya kira2 apa ya kode yang harus saya tambah dan di letakkan dimana? Syukron atas jawaban dan bantuannya JAZAKALLAH KHOIRON wassalamualaikum

      Hapus
  17. makasih ya gan atas tutorialnya :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!