Tutorial Jquery Dropdown Menu Navigation

Tuesday, November 12, 2013

DM
Assalamualaikum dan Selamat Pagi
Maaf,Repost balik tutorial ni.Tutorial sebelum ni tak menjadi.Ada kesalahan kod yang tak dapat dibaiki,jadinya Adam delete post tu.Sorry ya ? Tutorial ni better for denim.Selain denim template,Adam tak berapa pasti,mungkin boleh kot,kalau korang pandai godek kod :)  btw, please DONT REPOST penat nak buat tuto ni oke ! So,Let's Go !


Tutorial Jquery Dropdown Menu Navigation
  • Dashboard > Template > Edit HTML
  • CTRL+F Search =   </head>
  • Klik sini untuk copy code {SINI} Korang copy code kat situ dan paste atas kod </head> 
  • Cara nak copy ;
KLIK GAMBAR UNTUK TUMBESARAN

  • Kemudian, CTRL+F Search = ]]></b:skin>
  • Copy code di bawah dan paste di atas code ]]></b:skin>


/* Navigation #AF
----------------------------------------------- */
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:980px;
height:auto;
color: black;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
border-bottom: 2px solid pink;
border-top: 2px solid pink;
background: #eee;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:normal normal 12px Calibri;
text-align:center;
color: black;
margin:0 auto;
}
.menu a {
float:left;
color:#000;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#eee;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid pink;
border-right:1px solid pink;
border-left:1px solid pink;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid pink;
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#000;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#000;
}


  • Belum siap lagi,lepas tu,CTRL+F search =  <div id='crosscol-wrapper' style='text-align:center'>
  • Copy code di bawah dan paste di atas code  <div id='crosscol-wrapper' style='text-align:center'>

<!-- Start - Navigation Menu -->
<div class='nav'>
<ul class='menu' id='menu'>
<li><a href='http://link.blogspot.com/'>home</a></li>
<li><a class='drop-ctg' href='#'>About &#9661;</a>
<ul>
<li><a href='http://link'>Profile</a></li>
</ul>
</li>
<li><a class='drop-ctg' href='#'>Contact &#9661;</a>
<ul>
<li><a href='https://'>Facebook</a></li>
<li><a href='https://'>Twitter</a></li>
<li><a href='http://'>Ask.Fm</a></li>
<li><a href='https://'>TITLE</a></li></ul></li>
<li><a href='http://'>NAV #2</a></li>
<li><a href='http://'>NAV #3</a></li>
<li><a class='drop-ctg' href='#'>NAV #4 &#9661;</a>
<ul>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li></ul>
</li>
<li><a class='drop-ctg' href='#'>NAV #5 &#9661;</a>
<ul>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
</ul></li>
<li><a class='drop-ctg' href='#'>NAV #6 &#9661;</a>
<ul>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li></ul></li>
<li><a class='drop-ctg' href='#'>NAV #7 &#9661;</a>
<ul>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
<li><a href='http://'>TITLE</a></li>
</ul>
</li>
</ul>
</div>
<!-- End - Navigation Menu -->
<script type='text/javascript'>
var dropdown=new dropd.dropdown.init(&quot;dropdown&quot;, {id:&#39;menu&#39;, active:&#39;menuhover&#39;});
</script>


  • Edit/Ubahsuai mengikut style sendiri
  • DONT REPOST
  • Tak paham ? komen di bawah oke?


You Might Also Like

1 Like This Entry: