Tuesday, May 22, 2012
Menu navigasi merupakan salah satu hal yang penting dalam sebuah halaman web atau blog. Dengan adanya menu navigasi, pengunjung akan lebih mudah dalam mengeksplorasi konten yang terdapat di dalam web atau blog kita. Salah satu menu navigasi yang ada adalah menu navigasi mendatar atau lebih kerennya disebut Horizontal Navigation Menu. Pada postingan ini, sobat Blogger bakal dikasih kode yang bisa digunakan atau ditempatkan ke dalam web atau blognya (by request). Kodenya juga sederhana, jika ingin menambahkan kode yang lain, tambahin sendiri aja yah.. hehe..
Tanpa pikir panjang, di bawah ini adalah kode yang bisa sobat gunakan.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#bt4unavmenu{
height:46px; /* Tinggi menu */
display:block;
overflow:hidden;
padding:5px 5px 5px 5px;
margin-bottom:6px;
border:2px solid #0f0;
-moz-border-radius:07px;
-khtml-border-radius:07px;
-moz-border-radius:15px;
-khtml-border-radius:15px;
box-shadow:0px 0px 15px #000;
-webkit-box-shadow:0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
background:#000 url() left top repeat-x;
width: 915px; /* Lebar menu */
margin: 0 0 0 0;
}
#bt4unavmenu .current-cat a{
background:#fff url() top left repeat-x;
color:#000;
-moz-border-radius:15px;
-khtml-border-radius:15px;
border:1px solid #111
}
#bt4unav a,#subMenusContainer a{
text-decoration:none;
display:block
}
#bt4unav a{
margin:0;
float:left;
background:none;
padding:15px 15px 15px 15px;
color:#fff;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
border:1px solid #0f0;
border-style:groove;
}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{
background:#0f0 url() top left repeat-x;
color:#000;
-moz-border-radius:15px;
-khtml-border-radius:15px;
border:1px solid #333
}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{
padding:0;
margin:0;
list-style:none;
line-height:1em
}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{
background:none;
left:0
}
#bt4unav li{
cursor:pointer;
float:left;
margin:0 2px 0 0;
padding:0 2px 0 4px;
height:44px;
display:inline;
background:url() left center no-repeat
}
#bt4unav li:first-child{
background:none;
padding:0 2px 0 0
}
#bt4unav{
width:940px;
margin:0 auto;
clear:both;
overflow:hidden;
font-size:12px;
display:block
}
#bt4unav .children{
display:none
}
</style>
</head>
<body>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'>
<a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a target="_blank" href="Link 1">Download Tutorial</a></li>
<li><a target="_blank" href="Link 2">Follow Me</a></li>
<li><a target="_blank" href="Link 3">Add Me</a></li>
<li><a target="_blank" href="Link 4">Contact us</a></li>
<li><a target="_blank" href="Link 5">About us</a></li>
<li><a target="_blank" href="Link 6">Back Link</a></li>
</ul>
</ul>
</div>
</body>
</html>
Kode di atas sudah saya edit dengan menggunakan Adobe Dreamweaver, jika sekiranya kurang cocok dengan warnanya, silahkan disesuaikan dengan keinginan sobat. Selain itu, silahkan sesuaikan linknya dengan link yang sobat miliki.
Konten blog ini tidak bisa dicopy, oleh karena itu, silahkan download kodenya melalui link di bawah ini :
Baca juga :
{ 1 comments... read them below or add one }
You can leave a comment to request any article(s), software(s), ebook(s) or report the dead link.
Then I will reply as soon as I can :)
kalo misal pada page Download Tutorial ada sub page lg gmn?
ReplyDelete