Tutorial Drop Down Menu-Version 1

Misaki PureBlood | Friday, November 14, 2014 | | |

O.k tolong ignore kecomelan gambar dekat atas.. Ahahaha.. hari ni, sekali lagi nak post tutorial. 

Kali ni, tutorial drop down menu | menu navigation | navigation bar | nav bar, or anything else yang korang panggil. Tapi ni version drop down menu yang boleh bergerak bawah dan atas.

Setiap kali kita scroll down, navigation akan bergerak sekali.


1. Go to dashboard > Layout > Add gadget > HTML/Javascript

2. Copy this code and paste in HTML/Javascript (Put this code under header)
<style>
/* Menu Horizontal Dropdown ----------------------------------------------- */
#menuwrapper{
width:100%;
position:absolute;
position:fixed;
z-index:13333333333;
top:0px;
left:0px;
background:#fff;
box-shadow:0 0 6px #000;
text-align:center;
padding:5px;}
height:30px;
background:#000000;
margin:0 auto;
}
.clearit{
clear:both;
height:0;
line-height:0.0;
font-size:0}
 #menubar{
width:100%}
 #menubar,#menubar ul{
list-style:none;
font-family:Arial, serif;
}
 #menubar a{  display:block;
text-decoration:none;
font:13px calibri;  color:#666;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
margin-left:52px;
padding-top:9px;
padding-left:18px;
padding-right:18px;
text-align:center;}
#menubar a.trigger{
text-align:center;
background-image:url(http://i.imgur.com/peRXtgL.gif);
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;
padding-right:18px;
}
#menubar li{
float:left;
position:static;
width:auto}
#menubar li ul,#menubar ul li{
width:170px}
#menubar ul li a{
text-align:left;
color:#666;
font-size:11px;
font-weight:400;
font-family:Arial;
border:none;
padding:5px 10px}
#menubar li ul{
z-index:100;
position:absolute;
position:fixed;
overflow:hidden;
display:none;
background:#eee;
padding-bottom:5px;
border:1px dashed #fff;}
 #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{
background:#ddd;
color:#778899;}
 #menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{
color:#3c3c3c;
background-color:transparent;
text-decoration:none}
#menubar li ul li.hr{
border-bottom:1px solid #fff;
border-top:1px solid #fff;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0}
#menubar ul a:hover{
background-color:#ccc!important;
color:#666!important;
text-decoration:none}
 </style>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='YOUR BLOG URL'><img border='0' src='http://i.imgur.com/f8pbAeb.png' style='padding:0px;'/> HOME</a></li>
<li><a class='trigger'>ABOUT ME</a>
<ul>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
</ul>
</li>
<li><a class='trigger'>KPOP</a>
<ul>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>  </ul>
</li>
<li><a class='trigger'>VOCALOID</a>
<ul>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
</ul>
</li>
<li><a class='trigger'>REVIEW</a>
<ul>
  <li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
</ul>
</li>
<li><a class='trigger'>CONTACT</a>
<ul>
 <li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
</ul>
</li>
<li><a class='trigger'>OTHER</a>
<ul>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
<li><a href='PUT YOUR LINK'>TITLE</a></li>
  </ul>
  </li>
<li><a href='https://www.blogger.com/home'>DASHBOARD</a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID='YOUR BLOG ID'>FOLLOW</a></li>
  </ul>
  </div>
You can change everything else according to your taste :) 
z-index:13333333333; = REMOVED this, if you don't want the navigation to scroll down as you scroll your blog.

Credit to: WANASEOBY & AtinTory


2 comments:

  1. cm na gigit je telinga.dia tuh..heuheu

    ReplyDelete
    Replies
    1. ahahaha.. jangan-jangan.. nanti hilang kecomelan dia XDD

      Delete