Cara Membuat Multy Level Menu

Beberapa hari lalu kawan-kawan blogger menanyakan cara mudah membuat menu drop down. Mungkin ini sama hal dengan menu drop down yang pernah dibuat oleh blogger lainnya. Saya hanya share widget yang sederhana namun tampilannya tidak kalah menarik dengan menu drop down lainnya. Cara pembuatannya juga cukup mudah alias gak bikin anda pusing. Sekarang mari kita bahas cara membuat menu drop down smoothjquery style. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Tambah gadget
Pilih HTML/JavaScript
Masukkan Kode berikut ke dalamnya

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-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/AVvXsEhaEffxSuKRDO6T_KmSnSAVdXbmGvugUzK99WCzeCdA20O0_trXBwF8FJIM-pApkh-HCX9wetsbnaWNtd0NpH0Q_xipprFAlfVCUpGDptvHzbZNXx3vmCS39T9aTYZ3MoTv08KPNNdUnNA/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:#666;text-decoration:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEffxSuKRDO6T_KmSnSAVdXbmGvugUzK99WCzeCdA20O0_trXBwF8FJIM-pApkh-HCX9wetsbnaWNtd0NpH0Q_xipprFAlfVCUpGDptvHzbZNXx3vmCS39T9aTYZ3MoTv08KPNNdUnNA/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="ALAMAT BLOG ANDA">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="LINK">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="LINK">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="LINK">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="LINK">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="LINK">Folder 2</a>
            <ul>
                <li>
                    <a href="LINK">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://blogonol.blogspot.com/" target="_blank" title="blogonol">Blogger Tutorial</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>

Ganti ALAMAT BLOG ANDA sesuai petunjuk
Ganti LINK dengan alamat ling anda
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share

Tweet