Inilah Cara Membuat Menu Multi Dropdown Di Blog atau Website | Memperbaiki

Admin   14.54   tutorial blog   Comment  

Hallo teman, pada artikel saya kali ini akan sedikit berbagi kepada kalian sobat blogger, Teknik membuat Menu Multi Dropdown Blog yang bisa jadi untuk sebagian pengguna blogger telah tidak asing lagi dengan teknik semacam ini, tetapi tidak ada salahnya juga apabila saya share kembali kepada kalian yang belum mengetahui teknik membuatnya.

Oke sobat apabila tertarik untuk memakainya, kalian dapat mencontoh langkah ataupun trik gampang dibawah ini, serta untuk yang telah mengetahui metode membuatnya dapat menyimak saja.

Cara membuat Menu Multi Dropdown
Yang pertama kali silahkan kalian buka blogger > Pilih Tema > Edit Html > lalu kalian letakan code css dibawah ini tepat sebelum </style> atau juga bisa sebelum </b:skin>

/* Menu Multi Dropdown AG */ ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#000;width:100%} ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#000} ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0} ul#mainmenu li:hover>ul {visibility:visible;opacity:1;} ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;} ul#mainmenu li:hover {z-index:1;} ul#mainmenu ul ul {position:absolute;left:100%;top:0;} ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;} * html ul#mainmenu li a {display:inline-block;} ul#mainmenu>li {margin:0;} ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;} ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;} ul#mainmenu ul li {float:none;margin:7px 0 0;} ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000;} ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;} ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;} ul#mainmenu ul span {background-image:none; padding-right:5px;} ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000;} ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff;} ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#000;color:#FFFFFF;}

Setelah itu kalian buat menunya seperti dibawah ini bisa kalian gunakan codenya dan sebelum menyimpan kembali template yang kalian edit silahkan kalian edit terlebih dahulu code htmlnya sesuai yang kalian inginkan.

<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->

Apbila kalian sudah selesai tinggal disave atau simpan kembali template yang sudah kalian edit. kemudian teman teman bisa melihat langsung hasilnya di blog kalian, apabila ada yang kurang sesuai kalian bisa sesuaikan kodenya sendiri.

Mungkin demikian untuk tulisan kali ini, sekian dulu selamat mencoba dan semoga berhasil.