Dalam tutorial kali ini kita akan mencoba Update artikel tentang Navigation Menus, Seperti yang pernah saya utarakan pada tutorial terdahulu bahwa jika kita membahas tentang Navigation Menus maka Anda tidak perlu bertanya ada berapa atau total Navigation Menus yang Ada. Karna setiap waktu Navigation Menus ini dapat kita buat sendiri dengan keahlian kita. Di tutorial atau artikel kali ini kita membahas Navigation Menus yang saya beri nama Drop Down Menu Bar Mengagumkan Untuk Blogger. Mungkin judul ini kurang cocok bagi Anda, tapi ini hanyalah sebuah nama, apalah arti sebuah nama yang penting fungsinya. Untuk tempilan Drop Down Menu Bar Mengagumkan Untuk Blogger yang kita bahas kali ini adalah seperti ini:


ScreenShot

(gambar oleh dek rif)


Lihat Demo



Kode Yang Digunakan


HTML/JavaScript


<script src='https://code-otowebsite.googlecode.com/svn/trunk/awesome menu.js' type='text/javascript'></script>
<style>
#OWmenu *{
margin:0px; padding:0px; list-style-type:none; text-decoration:none}
div#OWmenu{position:relative}
#OWmenu ul.OWmenu{ white-space:nowrap}#OWmenu ul.OWmenu li{ display:inline-block; height:57px; position:relative}#OWmenu ul.OWmenu li div{ position:absolute; top:55px; left:0px}#OWmenu ul.OWmenu li div div{ position:absolute; top:-6px; left:176px}#OWmenu ul.OWmenu li div ul li{ display:block; float:none; width:auto; height:auto}#OWmenu ul.OWmenu li a{  padding-left:15px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-qVWe2hggpF9lFYw3iD851rW-nR7DH8g8A6iMGwehShdlgM_9ZoUXzVdZfuoXXpU2oawinUvXvXSjzrljG1WZEvaBpHnhOzZrcP7Y81ddhVGM0Fgay6V8YYYsopR4XFhxxxHe6i6z1x8/s1600/menu_level1_item.png");  background-repeat:no-repeat;  background-position:left -1000px;  display:inline-block;  margin:6px 2px}#OWmenu ul.OWmenu li a span{  padding-right:15px;  padding-left:0px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-qVWe2hggpF9lFYw3iD851rW-nR7DH8g8A6iMGwehShdlgM_9ZoUXzVdZfuoXXpU2oawinUvXvXSjzrljG1WZEvaBpHnhOzZrcP7Y81ddhVGM0Fgay6V8YYYsopR4XFhxxxHe6i6z1x8/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#OWmenu ul.OWmenu li:hover a{ background-position:left -90px}#OWmenu ul.OWmenu li:hover a span{ background-position:right -135px}#OWmenu ul.OWmenu li.active a{ background-position:left 0px}#OWmenu ul.OWmenu li.active a span{ background-position:right -45px}#OWmenu ul.OWmenu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#OWmenu ul.OWmenu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#OWmenu ul.OWmenu li div{  width:194px;  padding-top:6px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGEOkgay42Ssl00tg3x3SRDytzY0ojFVvRd-l4l3wNzvpmpMmfrurtOp9f6JvjuLo0SQqN7DVyYtRNXi-SprQxUoHgfalvQ_QJUP3dlMdMJQeBh8kgodIot2rm5-r0P9e1GUYV5MV4CRl/s1600/submenu-top.png");  background-repeat:no-repeat;  background-position:0px top}#OWmenu ul.OWmenu li div ul{  padding:9px;  padding-top:0;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIinJt9oNWULXL8pdDLr1Qr3VkPv2xPlb_GFPxZtB8YcSZpH-1SycnbfnvnasrvQVcBBICcVkVi4t_OYLTwBi7dnTU_3ROob5xxUaumjgtcNxe6r7N6IBPQbXsmTDRHmMDZbPmw6eM67D-/s1600/submenu-bottom.png"); background-repeat:no-repeat; background-position:0px bottom}#OWmenu ul.OWmenu ul li:hover{  background-repeat:repeat-x;  background-position:0% 100%;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehds1MrZZHk_DIUla5Fmq8bzEC7M5ddpC1mRsUYOoNn8_0F84IxQEOqhih3kRaw83S6sJcxBrMxRs5gQvfsmu4mK_FxzZGVV5EMjZjd_M23Lo9dLpPpBoa4-mac1U0c15POkYUUtLD_sn/s1600/menu_level2_item_hover.png)}#OWmenu ul.OWmenu ul li:hover>a{  background-repeat:repeat-x;  background-position:0% 0%;  background-color:transparent;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehds1MrZZHk_DIUla5Fmq8bzEC7M5ddpC1mRsUYOoNn8_0F84IxQEOqhih3kRaw83S6sJcxBrMxRs5gQvfsmu4mK_FxzZGVV5EMjZjd_M23Lo9dLpPpBoa4-mac1U0c15POkYUUtLD_sn/s1600/menu_level2_item_hover.png)}
#OWmenu{  height:57px;  padding-left:14px;  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3TZkYYKIk2Z9rJVDPU1yU1EZXLKMMCHefu2uzhca9A1tWhUA2-cnC5k1t7MDabZv4kdHGsq4hrceTsPivRJU7h9IuapsJHSw9CHNUT3x1c1xrha0e-mwdGYmDmA0TRERR80r_YHC2z38/s1600/page_header_b.png) repeat-x;
-webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
#OWmenu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#OWmenu li:hover>a>span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#OWmenu ul.OWmenu li a span{ font-family:Arial; font-size:18px; font-weight:400}#OWmenu ul.OWmenu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#OWmenu ul.OWmenu li div ul{ padding-bottom:8px}#OWmenu ul.OWmenu li div ul li:first-child{ border-top-width:0px}#OWmenu li>div{visibility:hidden}#OWmenu li:hover>div{visibility:visible}/* */#OWmenu ul.OWmenu ul li:hover{ background-color:#393c45}#OWmenu ul.OWmenu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#OWmenu ul.OWmenu li{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li a{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li a span{ *zoom:1; *display:inline}#OWmenu ul.OWmenu li div ul li a{ *display:inline}#OWmenu ul.OWmenu ul li:hover{ *background-image:none}#OWmenu ul.OWmenu ul li:hover>a{ *background-image:none}/* IE6 */#OWmenu ul.OWmenu li a{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEital45-OCWPtdf39qckraPm1UxpcDVIvohZbCSzv_TKhx5NLwu1obFVC3tv8zXcXgO192dWytdN7gahWclJJ4CZtylrxrTlpSySGY9rFSKTk_X-Vyy7C1UtzFzfqbTJH8SvyvX2LFHR4od/s1600/menu_level1_item.gif")}#OWmenu ul.OWmenu li a span{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEital45-OCWPtdf39qckraPm1UxpcDVIvohZbCSzv_TKhx5NLwu1obFVC3tv8zXcXgO192dWytdN7gahWclJJ4CZtylrxrTlpSySGY9rFSKTk_X-Vyy7C1UtzFzfqbTJH8SvyvX2LFHR4od/s1600/menu_level1_item.gif")}#OWmenu ul.OWmenu li div{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs0n6nzEHo4-IYfkcSpp9GjWuZKhUTc7KA0VcnwZ0_qFk3fyqZMSkTXy6foKZVkhVHGSXlu6GAn5es-n13kDij1yaFIH-xrZeLYTnyL2noUovDG4ebAeQ5nw9dUtTnwyiwupMT1SZ5_-42/s1600/submenu-top.gif");z-index:10}#OWmenu ul.OWmenu li div ul{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QqsjK3C6CmCer_BA2Jne-doFpNDhwysqdLDVfGo2fii64BkrqVaaRyBzB8tEn-Npq3c-oR9zfYpHnUe5P-xOfYsyPzsOq6YvVqnO3yjlrcqwKmS0YOWZiqt-XRu4cuWJTgfABF4VZC9-/s1600/submenu-bottom.gif")}#OWmenu ul.OWmenu li a:hover{ _background-position:left -90px}#OWmenu ul.OWmenu li a:hover span{ _background-position:right -135px}#OWmenu div{_display:none}#OWmenu div li:hover div{_display:block}#OWmenu div li:hover li:hover div{_display:block}#OWmenu div li:hover li:hover li:hover div{_display:block}/* */
</style>

<div id="OWmenu">
    <ul class="OWmenu">
        <li><a href="#" class="parent"><span>LINK 1</span></a>
        </li>
        <li><a href="#" class="parent"><span>LINK 2</span></a>
            <div><ul>
            <li><a href="#" class="parent"><span>ITEM 1</span></a>
                    <div><ul>
                      <li><a href="#"><span>ITEM 1.1</span></a>
                       <div><ul>
                        <li><a href="#"><span>ITEM 1.1.1</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.2</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.4</span></a></li>
                       </ul></div>
                       </li>
 <li><a href="#"><span>ITEM 1.2</span></a></li>                                        <li><a href="#"><span>ITEM 1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.4</span></a></li>
                        <li><a href="#"><span>ITEM 1.5</span></a></li>
                        <li><a href="#"><span>ITEM 1.6</span></a></li>
                                        <li><a href="#"><span>ITEM 1.7</span></a></li>
                        <li><a href="#"><span>ITEM 1.8</span></a></li>
                        <li><a href="#"><span>ITEM 1.9</span></a></li>
                   </ul></div>
                </li>
                <li><a href="#" class="parent"><span>ITEM 2</span></a>
                </li>
 <li><a href="#" class="parent"><span>ITEM 3</span></a>
                </li>
 <li><a href="#" class="parent"><span>ITEM 4</span></a>
                </li>
             </ul></div>
        </li>          
    <li><a href="#" class="parent"><span>LINK 3</span></a></li>
<li><a href="#" class="parent"><span>LINK 4</span></a></li>
    <li><a href="#"><span>LINK 5</span>
        <li class="last"><a href="#"><span>LINK 6</span></a></li>

<li class="last"><a href="#"><span>LINK 7</span></a></li></a></li>

<li class="last"><a href="http://www.otowebsite.blogspot.com/"><span>Oto Website</span></a></li>
</ul>
</div>

Posting Komentar Blogger Disqus

  1. cara paste code diatas di simpan setalah code apa gan? thnk

    BalasHapus
  2. @Demonic HackKode di atas pemasangan tanpa edit html.
    pemasangannya cukup tambahkan gadget html saja lalu paste kode di atas.

    BalasHapus
  3. Mantap semua tips dan triknya.Izin copas ya bos...

    BalasHapus
  4. ijin copas gan
    jangan lupa kunjungi blogs saya http://penjara-batin.blogspot.com/ :-d :-d :-d

    BalasHapus
  5. wahn mantap nih :). terimakasih gan

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL 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>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top