Senin, 07 Mei 2012

Cara Membuat Menu Navigasi Horizontal Drop Down Menu Tanpa Menambah CSS

09.35 By , 2 comments

Sebelumnya saya sudah menulis cara membuat cara membuat menu navigasi sederhana, dengan cara yang sangat mudah. Tapi kali ini saya akan menulis artikel tentang bagaimana membuat menu navigasi horizontal multilevel atau drop down menu tanpa menambah CSS. Cara ini sanatlah mudah tanpa menambah Script lagi di css dan hanya membuat Script di gadget HTML/Java Script.


Ok, langsung malai saja cara membuat menu navigasi horizontal multilevel atau drop down menu.
1. Yang pertama login dulu ke akun blogger kawan
2. Kemudian masuk ke Page Elements → Klik Add a Gadget 
3. Setelah keluar halaman baru atau pop up window muncul, pilih opsi HTML/Javascript
 4. Masukkan Kode HTML yg telah diedit tadi ke kotak HTML/JavaScript

    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='#'>Sub Halaman 1</a></li>
                    <li><a href='#'>Sub Halaman 2</a></li>
                    <li><a href='#'>Sub Halaman 3</a>
                   <ul>
                    <li><a href='#'>Sub Sub Halaman 1</a></li>
                    <li><a href='#'>Sub Sub Halaman 2</a></li>
                    <li><a href='#'>Sub Sub Halaman 3</a></li>
                  </ul>
                  </li>
                  </ul>             </li>
          </ul>
        </div>

Catatan :
1.    Ganti  # dengan link yang kawan inginkan
2.    Warna background menu dapat di ubah sesuai selera dengan cara cari kode background: #2E9AFE agar lebih mudah dengan cara tekan pada kayboard ctrl+f, lalu ganti #2E9AFE dengan kode warna yang lain missal diganti dengan #9ebf00 (warna hijau)

6. Simpan

2 komentar:

  1. Anonim30 Januari 2013 pukul 23.32

    mantap gan,klik disini ya klau ada perlu,,cuma sekedar berbagi info.
    Crack IDM Yang Tiada Matinya

    BalasHapus
  2. Anonim28 Juni 2013 pukul 04.05

    berhasil mas, infonya lengkap, simple, mudah, cepat dipahami bagi pemula kyk sy..mksh bnyk..

    BalasHapus