Tutorial Jquery Dropdown Menu Navigation
03:47 - 1 comments

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?


LEAVE YOUR COMMENT HERE, I WOULD APPRECIATE THAT TQ
No spamming.
No harsh words.
Sign in to comment.
Mind your language.
I will reply your comment within 24h.
Mind to click my nuffnang, I will click yours back.

1 comment: