Multilevel Drop Down Menu : Skeleton

Posted by : Rhyf Ahmad Sunday, March 11, 2012

Drop Down menu merupakan sebuah menu di mana di dalamnya terdapat beberapa sub menu. Sub menu tersebut akan muncul ketika mouse berada di menu utama. Di sini, saya akan sediakan untuk sobat Blogger sebuah Multilevel Drop Down Menu dengan bantuan sedikit kode Java Script dan juga CSS. Sobat Blogger juga dapat merubah susunan, warna, dan juga background dari menu ini. Selamat berkreasi.
Tidak seperti Horizontal menu lainnya (di tutorial blog sebelah), sobat harus menempatkan beberapa kode HTML di dalam Edit HTML perancangan template, namun kali ini sobat Blogger cukup menambahkan sebuah gadget untuk memunculkan menu ini. Berikut langkah-langkahnya.
1. Salin kode HTML di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="rhyfahmad" />

<style type="text/css">
Masukkan kode CSS di area ini
</style>

<script type="text/javascript">
Masukkan kode Javascript di area ini
</script>

</head>

<body>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us &#187;</a>
    <ul>
        <li><a href="#nogo">Who we are</a></li>
        <li><a href="#nogo">What we do</a></li>
        <li><a href="#nogo">Where to find us</a></li>
    </ul>
</li>
<li><a href="#nogo">Products &#187;</a>
    <ul>
    <li><a href="#nogo">Tripods &#187;</a>
        <ul>
            <li><a href="#nogo">Monopods</a></li>
            <li><a href="#nogo">Tripods</a></li>
            <li><a href="#nogo">Adjutable head</a></li>
            <li><a href="#nogo">Fixed</a></li>
            <li><a href="#nogo">Flash mount</a></li>
            <li><a href="#nogo">Floating head</a></li>

        </ul>
    </li>
    <li><a href="#nogo">Films &#187;</a>
        <ul>
            <li><a href="#nogo">35mm</a></li>
            <li><a href="#nogo">Color Print</a></li>
            <li><a href="#nogo">Black and White</a></li>
            <li><a href="#nogo">Roll</a></li>
            <li><a href="#nogo">Color Slide</a></li>
        </ul>
    </li>
    <li><a href="#nogo">Cameras &#187;</a>
            <ul>
            <li><a href="#nogo">Compact &#187;</a>
                <ul>
                <li><a href="#nogo">Canon</a></li>
                <li><a href="#nogo">Nikon</a></li>
                <li><a href="#nogo">Minolta</a></li>
                <li><a href="#nogo">Pentax</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Digital &#187;</a>
                    <ul>
                    <li><a href="#nogo">Canon</a></li>
                    <li><a href="#nogo">Nikon &#187;</a>
                            <ul>
                            <li><a href="#nogo">Lenses &#187;</a>
                                <ul>
                                    <li><a href="#nogo">Standard</a></li>
                                    <li><a href="#nogo">Telephoto</a></li>
                                    <li><a href="#nogo">Wide Angle</a></li>
                                    <li><a href="#nogo">Fish Eye</a></li>
                                    <li><a href="#nogo">Mirror</a></li>
                                    <li><a href="#nogo">Macro</a></li>
                                </ul>
                            </li>
                            <li><a href="#nogo">Speedlight</a></li>
                            <li><a href="#nogo">Coolpix &#187;</a>
                                    <ul>
                                    <li><a href="#nogo">Coolpix S10</a></li>
                                    <li><a href="#nogo">Coolpix L2</a></li>
                                    <li><a href="#nogo">Coolpix S500</a></li>
                                    <li><a href="#nogo">Coolpix P5000</a></li>
                                    <li><a href="#nogo">Coolpix 4600</a></li>
                                    <li><a href="#nogo">Coolpix S6 Silver</a></li>
                                    </ul>
                            </li>
                            <li><a href="#nogo">D200</a></li>
                            <li><a href="#nogo">D80</a></li>
                            </ul>
                    </li>
                    <li><a href="#nogo">Minolta</a></li>
                    <li><a href="#nogo">Pentax</a></li>
                    </ul>
            </li>
            <li><a href="#nogo">SLR &#187;</a>
                <ul>
                <li><a href="#nogo">Canon</a></li>
                <li><a href="#nogo">Nikon</a></li>
                <li><a href="#nogo">Minolta</a></li>
                <li><a href="#nogo">Pentax</a></li>
                <li><a href="#nogo">Panasonic</a></li>
                </ul>
            </li>
            </ul>
        </li>
    <li><a href="#nogo">Flash</a></li>
    <li><a href="#nogo">Video</a></li>
    </ul>
    </li>
<li><a href="#nogo">FAQs &#187;</a>
    <ul>
        <li><a href="#nogo">Cameras</a></li>
        <li><a href="#nogo">Film types</a></li>
        <li><a href="#nogo">Digital Photography</a></li>
    </ul>
</li>
<li><a href="#nogo">Privacy &#187;</a>
    <ul>
        <li><a href="#nogo">Privacy Policy</a></li>
        <li><a href="#nogo">Privacy Statement</a></li>
    </ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<p>&copy; 2012 rhyfahmad</p>
</body>
</html>

2. Tambahkan kode Javascript di bawah ini di antara kode <script type="text/javascript"> dan </script>

stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);



3. Tambahkan kode CSS di bawah ini di antara kode <style type="text/css"> dan </style>

 #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}

#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b75;}


/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#b75;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}


Sobat Blogger bisa merubah link-link yang ada di dalam HTML kode yang pertama dengan link yang sobat kehendaki. Sekian dulu yah sob, semoga berhasil. O yah, jangan lupa tempatkan semua kode di atas ke dalam satu file.
Artikel dalam blog ini tidak dapat dicopy, jadi silahkan sobat Blogger mendownload seluruh script yang ada di sini dengan mengeklik link di bawah ini.
Download Script Skeleton (3 kB)

{ 4 comments... read them below or Comment }

  1. miaw mpus17 April 2012 at 13:28

    gan dah aku download,terus waktu dibuka di notepad kok scriptnya beda sama script yang agan post diata. Mohon infonya maklum newbie

    ReplyDelete
  2. miaw mpus17 April 2012 at 13:30

    blognya dah difollow jgn lupa follback yah,, http://gado-gado-ajjah.blogspot.com/ Thx ^^,

    ReplyDelete
  3. Rhyf Ahmad18 April 2012 at 00:36

    Iya gan, emang berbeda, kalo yang di atas itu merupakan script aslinya, sedangkan yang agan download itu sudah saya modifikasi berdasarkan link-link yang ada dalam blog saya...
    desainnya juga sudah saya sesuaikan, jadi agan tinggal merubah link-linknya saja...

    ReplyDelete
  4. AYAHE MELA31 May 2012 at 22:07

    Tutorial tentang cara membuat multilevel dropdown menu yang sangat membantu dan beranfaat, Sob.

    Oh ya, salam kenal dan salam berbagi.

    ReplyDelete

You can leave a comment to request any article(s), software(s), ebook(s) or report the dead link.
Then I will reply as soon as I can :)

Welcome to My Blog

- Copyright © Madriva -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -

/* script Youtube Responsive */