» » Membuat Menu JQuery DropDown

Membuat Menu JQuery DropDown

Bookmark and Share
Tertarik ingin membuatnya dan memasangnya diblog kalian, 















silakan ikuti langkah langkahnya sebagai berikut
* Masuk ke blogger dan langsung menuju Edit HTML
* Copy dan pastekan kode jQuery dan CSS dibawah ini diatas kode  <head>  atau sesudah kode  <head> kalau ingin lebih rapi letakan kode tersebut diatas kode  <head&gt;



<link href='https://sites.google.com/site/jayablogdemo/megadrop-black/dcmegamenu.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayablogdemo/megadrop-black/jquery.hoverIntent.minified.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayablogdemo/megadrop-black/jquery.dcmegamenu.1.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function($){
    $(&#39;#mega-menu-1&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-2&#39;).dcMegaMenu({
        rowItems: &#39;1&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-3&#39;).dcMegaMenu({
        rowItems: &#39;2&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-4&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-5&#39;).dcMegaMenu({
        rowItems: &#39;4&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-6&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;slow&#39;,
        effect: &#39;slide&#39;
    });
    $(&#39;#mega-menu-7&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;slide&#39;
    });
    $(&#39;#mega-menu-8&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
    $(&#39;#mega-menu-9&#39;).dcMegaMenu({
        rowItems: &#39;3&#39;,
        speed: &#39;fast&#39;,
        effect: &#39;fade&#39;
    });
});
</script>
<link href='https://sites.google.com/site/jayablogdemo/megadrop-black/black.css' rel='stylesheet' type='text/css'/>

* Simpan template dan langsung menuju Elemen Laman
* Selanjutnya tambahkan gadget HTML/JavaScript yaitu dengan cara tambah Gadget lalu copy dan pastekan kode menu dibawah ini di kotak kolom HTML/JavaScript lalu klik simpan



<div class="black">  
<ul id="mega-menu-2" class="mega-menu">
    <li><a href="#">Beranda</a></li>

    <li><a href="#">Produk</a>
        <ul>
            <li><a href="#">Games</a>
                <ul>
                    <li><a href="#">Game 1</a></li>
                    <li><a href="#">Game 2</a></li>

                    <li><a href="#">Game 3</a></li>
                </ul>
            </li>
            <li><a href="#">Software</a>
                <ul>
                    <li><a href="#">Software 1</a></li>
                    <li><a href="#">Software 2</a></li>

                    <li><a href="#">Software 3</a></li>
                    <li><a href="#">Software 4</a></li>
                    <li><a href="#">Software 5</a></li>
                    <li><a href="#">Software 6</a></li>
                </ul>
            </li>
            <li><a href="#">Musik</a>

                <ul>
                    <li><a href="#">Musik 1</a></li>
                    <li><a href="#">Musik 2</a></li>
                    <li><a href="#">Musik 3</a></li>
                    <li><a href="#">Musik 4</a></li>
                </ul>
            </li>

            <li><a href="#">Template</a>
                <ul>
                    <li><a href="#">Template 1</a></li>
                    <li><a href="#">Template 2</a></li>
                </ul>
            </li>
            <li><a href="#">Trik Blog</a>

              <ul>
                <li><a href="#">Trik Blog 1</a></li>
                    <li><a href="#">Trik Blog 2</a></li>
                    <li><a href="#">Trik Blog 3</a></li>
                    <li><a href="#">Trik Blog 4</a></li>
              </ul>
            </li>

        </ul>
    </li>
    <li><a href="#">Daftar Isi</a>
        <ul>
            <li><a href="#">jQuery Trik</a>
    <ul>
        <li><a href="#">jQuery Trik 1</a></li>

        <li><a href="#">jQuery Trik 2</a></li>
        <li><a href="#">jQuery Trik 3</a></li>
    </ul>
    </li>
    <li><a href="#">CSS Trik</a>
    <ul>
        <li><a href="#">CSS Trik 1</a></li>

        <li><a href="#">CSS Trik 2</a></li>
        <li><a href="#">CSS Trik 3</a></li>
        <li><a href="#">CSS Trik 4</a></li>
    </ul>
</li>
    <li><a href="#">PHP Trik</a>
    <ul>

        <li><a href="#">PHP Trik 1</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="#">Tips Blog</a>
    <ul>
        <li><a href="#">Tips Blog</a></li>
        <li><a href="#">Tips Blog</a></li>

        <li><a href="#">Tips Blog</a></li>
        <li><a href="#">Tips Blog</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
    <li><a href="#">About Page 1</a></li>

    <li><a href="#">About Page 2</a></li>

</ul>
</li>
</ul></div>


* Dan langkah terakhir ganti symbol # dengan alamat url kalian masing masing.

di 08.20 - Label: -

{ 0 komentar... Views All / Send Comment! }


Posting Komentar