jQuery Multi Level Drop Down Menu - V2

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.

Lihat Demo

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

---

Cara Memasang jQuery Multi Level Drop Down Menu - V2

---

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRj-PZY1UhA730FY_H7ohqpeud36a3FO0_Rh8g06XgWCrdvwJRYujxISbeQUJG_l8IUAk2VtKxY0Olwhm8lwsOENUprpSmrujGB2T6YWKaLUAZhsXO0c1QVOsnoj5f4UN5N6NEnl3czxM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRj-PZY1UhA730FY_H7ohqpeud36a3FO0_Rh8g06XgWCrdvwJRYujxISbeQUJG_l8IUAk2VtKxY0Olwhm8lwsOENUprpSmrujGB2T6YWKaLUAZhsXO0c1QVOsnoj5f4UN5N6NEnl3czxM/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!