Demo :
Template N2y Suka-SukaCara membuatnya
Dari Dashboard > Design > Edit HTML
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
#nav {
background:#000;
color:#fff;
float:left;
width:97%;
font-size:14px;
margin:0 auto;
padding:0px 15px;
overflow:hidden;
}
#nav ul {
list-style:none;
float:left;
margin:0;
padding:0;
}
#nav li {
list-style: none;
margin-left:0px;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #fff;
display: block;
margin: 0;
padding: 10px 16px;
}
#nav li a:hover, #nav li a:active, #nav li a:focus {
background:#fff;
color:#000;
margin: 0;
padding: 10px 18px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#fff;
width: 150px;
color:#000;
font-weight:normal;
float: none;
margin: 0;
padding: 8px 10px;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
color:#fff;
padding: 8px 10px;
-moz-border-radius:0;
-webkit-border-radius:0;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
function mainmenu(){
$(" #nav ul ").css({display: "inline"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
Kode JQuery Library yang berwarna merah jika sudah ada tidak perlu lagi !.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='Link'>Title</a></li>
<li><a href='#'>Title+Bawah</a>
<ul>
<li><a href='Link Bawah'>Title Bawah</a></li>
<li><a href='Link Bawah'>Title Bawah</a></li>
<li><a href='Link Bawah'>Title Bawah</a></li>
</ul>
</li>
<li><a href='#'>Title+Bawah</a>
<ul>
<li><a href='#'>Title Bawah+Samping</a>
<ul>
<li><a href='Link Samping'>Title Samping</a></li>
<li><a href='Link Samping'>Title Samping</a></li>
<li><a href='Link Samping'>Title Samping</a></li>
<li/>
</ul></li>
<li><a href='Link Bawah'>Title Bawah</a></li>
<li><a href='Link Bawah'>Title Bawah</a></li>
</ul>
</li>
</ul>
</div>
Semoga Bermanfaat...
Alhamdulillah
0 comments:
Posting Komentar