Beranda » Trik » Cara memasang kotak pencarian pada menu navigasi

Cara memasang kotak pencarian pada menu navigasi

Cara memasang kotak pencarian pada menu navigasi

Terkadang kita tertarik pada sebuah tampilan menu navigasi drop down yang cantik, namun kemudian muncul kekecewaan bagi para sobat yang ingin dalam menu navigasi yang cantik tersebut seharusnya di sertai dengan kotak pencarian agar lebih cantik sehingga semuanya menjadi praktis dalam satu paket dan tidak perlu untuk menambah pekerjaan lagi untuk membuat element baru kotak pencarian. karena itu, sekarang saya akan memberikan cara dan trik bagaimana memasang kotak pencarian didalam menu navigasi drop down anda. silahkah simak caranya dibawah ini:

Misalnya kita telah memiliki kode HTML untuk menu navigasi drop down seperti dibawah ini:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
</div>

Menu diatas tidak memiliki element kotak pencarian, untuk meletakkan kotak pencarian di dalamnya kita akan membuat sebuah element baru, lihat dibawah ini:

<div id='search-form'>
... form pencarian ...
</div>

Jangan lupa untuk memasang formulir kotak pencarian, berikut kodenya:

<form action='/search' id='header-search' method='get' style='display:inline;'>
      <div id='search'>
              <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
       </div>
</form>

Kode kotak pencarian di atas sudah saya beri id dan class, silahkan anda buat sendiri sesuai keinginan. jika element dan kotak pencarian keduanya di satukan, maka akan jadi demikian:

<div id='search-form'>
   <form action='/search' id='header-search' method='get' style='display:inline;'>
      <div id='search'>
              <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
       </div>
    </form>
</div>

Setelah element kotak pencarian selesai dan telah diberi form pencarian, saatnya menempatkannya dalam element menu navigasi. kembali lagi ke menu navigasi, perhatikan antara tag element pembungkus dan class menu, element kotak pencarian akan kita tempatkan diatas tag penutup pembungkus element menu, lihat kode di bawah ini:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
     ... Letakkan kode element kotak pencarian disini....
</div>

Maka hasil dari semua pekerjaan diatas adalah sebagai berikut:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
     <div id='search-form'>
           <form action='/search' id='header-search' method='get' style='display:inline;'>
               <div id='search'>
               <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
              </div>
           </form>
      </div>
</div>

Sekarang anda sudah bisa mencoba untuk menerapkan dalam menu blogger anda, semoga berguna dan bermanfaat...

Catatan: menu drop down dengan kotak pencarian di atas hanya sebuah contoh, karena tidak saya sertai dengan style dan lainnya. jika anda ingin menggunakannya dalam blog, silahkan berkreasi dengan id/class dan css keinginan anda.

Cara memasang kotak pencarian pada menu navigasi

Belum ada tanggapan untuk "Cara memasang kotak pencarian pada menu navigasi"

Post a Comment