Tuesday, August 6, 2013

Tutorial : Navigate Dropdown Menu #2

girl | via Tumblr

こんにちは, 안녕하세요 , Assalamualaikum.

Nampaknye ramai yang req Atin tentang navigate yang atin pakai ni. Tapi sebelum atin nak bagi code atin punye navigate codenye same cuma atinpunye navigate yang sekarang ni mmg mcm lain sbb template simple . Kalo design n classic aini code asal atin . Boleh la cube ye tengok preview Ohh ini yang ke-2 kala nk cara pertama boleh try yg  SINI punye k.


  • Template Designer : paste dalam Add Gadget > HTML
  • Blogskin/Classic : paste bawah code </style>

<style>
/* Menu Horizontal Dropdown ----------------------------------------------- */
 #menuwrapper{
width:960px;
height:30px;
background:#D2B48C;
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:20px;
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;
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:#D2B48C;
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='http://www.blogger.com/home'><img border='0' src='http://i.imgur.com/f8pbAeb.png' style='padding:0px;'/> Home</a></li>
<li><a class='trigger'>Owner</a>
<ul>
<li><a href='PUT YOUR LINK' >Profile</a></li>
  <li><a href='PUT YOUR LINK' >Biases</a></li>
</ul>
</li>

<li><a class='trigger'>Exchange</a>
<ul>
<li><a href='PUT YOUR LINK'>Affiliate</a></li>
  </ul>
</li>
<li><a class='trigger'>Tutobies</a>
<ul>
<li><a href='PUT YOUR LINK'>Tutorial</a></li>
<li><a href='PUT YOUR LINK'>Freebies</a></li>
</ul>
</li>
<li><a class='trigger'>Random</a>
<ul>
  <li><a href='PUT YOUR LINK'>Info-Tips</a></li>
<li><a href='PUT YOUR LINK'>Blogskin</a></li>
</ul>
</li>
<li><a class='trigger'>Admin</a>
<ul>
  <li><a href='PUT YOUR LINK'>kiwi6</a></li>
<li><a href='PUT YOUR LINK'>we♥it</a></li>
</ul>
</li>
<li><a class='trigger'>Contact</a>
<ul>
<li><a href='PUT YOUR LINK'>Facebook</a></li>
  <li><a href='PUT YOUR LINK'>Fanpage</a></li>
  </ul>
  </li>
  <li><a href='PUT YOUR LINK'>Blogskin</a></li>
<li><a href='PUT YOUR LINK'>Ask.fm</a></li>
  </ul>
  </div>

Oren : width
hijau : warna background
biru : tajuk utama
ungu : tajuk kecil
merah : link webside

4 comments:

Ruqaiyah Amanina said...

tp cmne ye nak rapat dengan header tu? jwb dkt cbox sy ye :)

Junkyo Hikari said...

hyep atin.. XD
nak tanya something nih..
saya try guna dropdown nih and okie.. tapi kan tahu tak macam mana nak transparentkan dia punya kotak putih tu? XD dah ubah banyak benda tak jadi TT^TT

Junkyo Hikari said...

okie its already done XDD

Mutiara Nurul Izzati said...

Thanks for the tutorial! ^^