JQuery Multi Level Drop Down Menu - V2.
Sebelumnya blog Oto Website pernah membahas jQuery Multi Level Drop Down Menu - V1.
Di dalam Versi 2 ini ada perbedaan dari Versi sebelumnya, kalo tidak gak mungkin kali ini namanya jQuery Multi Level Drop Down Menu - V2. perbedaanya adalah Versi 2 ini lebih cantik atau keren untuk perbedaanya Anda bisa melihat dari demo kedua versi yang telah saya sediakan.
Untuk demo jQuery Multi Level Drop Down Menu - V2 anda bisa melihatnya lansung dengan menekan tombol berikut.


Sama seperti Versi pertama versi sekarang juga cara pemasangannya sangat mudah, oke kita lansung aja!






1. Login ke akun blogger Anda.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget  ➨ Pilih elemen HTML/Java Script.

3. Peletakkan Gadget atau elemen HTML/Java Script di bagian atas postingan seperti pada gambar berikut.


4. Selanjutnya copy kode Java Script berikut dan letakkan di dalam elemen HTML/Java Script tadi.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/ow-smooth-menu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1",
 orientation: 'h',
 classname: 'ddsmoothmenu',

 contentsource: "markup"
})
</script>

<style>
.ddsmoothmenu {
    width: 100%;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
}
</style>

<div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
        <li>
            <a href="http://www.otowebsite.blogspot.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.otowebsite.com/">Create This</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>

5. Simpan.

Sekarang Anda bisa lihat sendiri hasilnya.

NB : Dari kode di atas ada kode yang harus Anda rubah di antaranya:
Tanda pagar (#) dengan url link tujuan.
Sub Item 1.1 dan seterusnya ganti dengan nama menu atau nama link/url tujuan.

Sekian untuk kali ini, mudah-mudahan postingan kali ini bisa bermanfaat.

Bagaimana apakah Andat berhasil menerapkannya di blog Anda? Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

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