Cara Membuat Menu Vertikal Multi Dropdown Terbaru 2015

Trik Blogger

Selamat datang

Kali ini saya akan share trik CSS Multi Drop Down Menu Vertikal untuk para Blogger.

Bisa digunakan untuk web atau blog.

Vertical CSS Muti Drop Down Menu for Blogger

CSS EFFECT..

Pertama-tama masukan kode CSS Blogger Template .. Login ke akun Blogger >>

Masuk "EDIT HTML" Button
Sekarang car kode ]]></b:skin> dengan menggunakan CTRL + F
Paste kode dibawah ini tepat diatas ]]></b:skin>

#TWnav {width:504px; height:510px; position:relative; background:url(red_frog.jpg) no-repeat 0px 160px;}
#TWnav h1 {font-size:40px; color:#d30;}
#TWnav #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}

#TWmenu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#TWmenu ul {list-style-type:none; padding:0; margin:0;}
#TWmenu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}

#TWmenu li.sub {background:#d30;}

#TWmenu li, #TWmenu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}

#TWmenu ul,
#TWmenu li:hover ul ul,
#TWmenu li:hover ul li:hover ul ul {display:none;}

#TWmenu li:hover {color:#ff0; z-index:500;}

#TWmenu li:hover ul {display:block; height:150px;}
#TWmenu li:hover ul li:hover ul,
#TWmenu li:hover ul li:hover ul li:hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px; height:auto;}

#TWmenu li:hover ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#TWmenu li:hover ul li:hover {background:#98a;}

#TWmenu li:hover ul li:hover ul li {background:#c60;}
#TWmenu li:hover ul li:hover ul li.hover ul li {background:#780; z-index:500;}

#TWmenu li:hover ul li:hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#TWmenu li:hover ul li:hover ul li:hover {z-index:500; background:#fa4;}
#TWmenu li:hover ul li:hover ul li:hover a {color:#000;}

#TWmenu li:hover ul li:hover ul li:hover ul li:hover {background:#aa0;}
#TWmenu li:hover ul li:hover ul li.hover ul li:hover a {color:#fff;}

#TWnav img {display:block; float:right;}

#TWnav p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}

Kode Menu

Sekarang untuk memasukan kode, anda harus masuk ke HTML WIDGET java script

Login to Blogger
"Add a Gadget" button click any of them
Lalu pilih " HTML/JavaScript" Button.
" HTML/JavaScript" Button , masukkan kode di bawah ini kedalam form kosongnya yaa.

<div id="TWnav">
<ul id="TWmenu">
<li class="sub">Types
<ul>
<li><a href="">European</a></li>
<li><a href="">European</a></li>

<li><a href="">European</a></li>
<li class="fly"><a href="">American</a>
<ul>
<li><a href="">South American</a></li>
<li class="fly"><a href="">North American</a>
<ul>
<li><a href="">Grey tree frog</a></li>
<li><a href="">Green tree frog</a></li>
<li><a href="">Spring peeper</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Japanese</a></li>
<li><a href="">Chinese</a></li>
</ul>
</li>
<li class="sub">Classifications
<ul>
<li class="fly"><a href="http://egytricks.com/">Pelodryadinae</a>
<ul>
<li><a href="http://egytricks.com/">Cyclorana</a></li>
<li><a href="http://egytricks.com/">Litoria</a></li>
<li><a href="http://egytricks.com/">Nyctimystes</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com">Phyllomedusinae</a>
<ul>
<li><a href="http://egytricks.com/">Agalychnis</a></li>
<li><a href="http://egytricks.com/">Cruziohyla</a></li>
<li><a href="http://egytricks.com/">Hylomantis</a></li>
<li><a href="http://egytricks.com/">Pachymedusa</a></li>
<li><a href="http://egytricks.com/">Phasmahyla</a></li>
<li><a href="http://egytricks.com/">Phrynomedusa</a></li>
<li><a href="http://egytricks.com/">Phyllomedusa</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Hemiphractinae</a>
<ul>
<li><a href="http://egytricks.com/">Cryptobatrachus</a></li>
<li><a href="http://egytricks.com/">Flectonotus</a></li>
<li><a href="http://egytricks.com/">Gastrotheca</a></li>
<li><a href="http://egytricks.com/">Hemiphractus</a></li>
<li><a href="http://egytricks.com/">Stefania</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Hylinae</a>
<ul>
<li><a href="http://egytricks.com/">Acris</a></li>
<li><a href="http://egytricks.com/">Anotheca</a></li>
<li><a href="http://egytricks.com/">Bokermannohyla</a></li>
<li><a href="http://egytricks.com/">Corythomantis</a></li>
<li><a href="http://egytricks.com/">Ecnomiohyla</a></li>
<li><a href="http://egytricks.com/">Hyloscirtus</a></li>
<li><a href="http://egytricks.com/">Megastomatohyla</a></li>
<li><a href="http://egytricks.com/">Osteocephalus</a></li>
<li><a href="http://egytricks.com/">Pseudacris</a></li>
<li><a href="http://egytricks.com/">Sphaenorhynchus</a></li>
<li><a href="http://egytricks.com/">Trachycephalus</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Rhacophorinae</a>
<ul>
<li><a href="http://egytricks.com/">Boophis</a></li>
<li><a href="http://egytricks.com/">Callixalus</a></li>
<li><a href="http://egytricks.com/">Chiromantis</a></li>
<li><a href="http://egytricks.com/">Cryptothylax</a></li>
<li><a href="http://egytricks.com/">Mantidactylus</a></li>
<li><a href="http://egytricks.com/">Rhacophorus</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Buergeriinae</a>
<ul>
<li><a href="http://egytricks.com/">Buergeria</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub">References
<ul>
<li><a href="http://egytricks.com">Wikipedia</a></li>
<li><a href="http://egytricks.com">Encyclopedia</a></li>
</ul>
</li>
<li class="sub">Links
<ul>
<li><a href="http://egytricks.com/">Complete treefrog</a></li>
<li><a href="http://egytricks.com/">Old World treefrogs</a></li>
<li><a href="http://egytricks.com/">Amphibian Species</a></li>
</ul>
</li>
</ul>
</div>

Nah, sekian artikel cara mudah membuat menu vertikal keren terbaru. Semoga bermanfaat yaa.

Sampai jumpa di artikel selanjutnya yaa.