Beautiful Slide Out Navigation Horizontal Menu

Senin, September 09, 2013

Menu atau kalau diartikan kedalam bahasa indonesia artinya adalah Menu Navigasi Horizontal cantik dengan efek slide out. Kalau kemarin Mand4rt udah pernah bahas tentang Membuat Tombol Download Keren, namun kali ini Mand4rt akan share tentang Beautiful Slide Out Navigation Horizontal Menu . Pastinya lebih keren, lebih waw, dan lebih lebih deh.

Beautiful Slide Out Navigation Horizontal Menu

Buat yang udah tidak sabar untuk membuat navigasi horizontal ini, silahkan ikuti panduan nya :

1. Masuk ke dashboard blogger
2. Pilih Rancangan --> Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;

}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCa4xYXIpf50P-dQeAhsrvQmNzsIw_BeI_eAkVwN-Drn-lHdkWBnKsCwvTg9TSWbdEIFItAzaljdiVqyIEaBZ1VbK5f2OKZABTHFCyTbNC0fa-gHiZ_MyWEihirOmH0R1VFdMygoXrORQ/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjziJl25gPpj-PYANmdcwnpLiDEgZ85fKhmSNudGChLK4Cs_OXONwYjKj6JSkxMWetqzMwcbcsRI-HRslICOuxEAOIHPSGC263A-fRckWT7u1E9pLT9mXD7qlCkpM5P11mke1y4Nu-0koU/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwzW-kpxyVYhYNLeANk6Up_WxPyQLElG7m1V4d4MenoP5AjAukEUotlj5gA7HshKV3By1YiptTGxp9CWIJij90v9sQuAqWqIxb2WbyukKR2ecH0u-X22ASVwgH0emwZCNzeIalSaZ8jA/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9KnIta2FNcyzNbzS-_8SExM87wrIJPdMflJY8BnakpS4xKpZDNpXySUx4jIpUFc1nsxuXZHwVS1AFJox8OJyCUtTkJf2MR3X9YJKVbNdxUUGcTMImuHnIgIWYvURADwMFsqVxSWdNWc/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRC-Y3q6sAEovedst_viegWVhn_j9VUaSOF8JhxNXPjM96saa8zVMXlYOjN-IUen9RSmRsLXJ-5pgZWASNraSmqCY3ULJE0kpHI9XnJZ7ApnT2kl2pbtCxp7CygWwy-H0vUgw7HdP_hD4/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZIUCMcuiFS51cCjkTlbVvuolk2XaaIGGrOqXii735APIP6T6H-iU4O-o2ldkAuvMtUKLssm4VnM3U8Oq5TONdwg09X0vSCPVh5oEb0EaYVyzIYOBRHyodnhj6q38JtbtcIJ2h3AdaLY/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRgdy4Gq3eXveT8Y6VToRiYWEq1xISbksN0pQ6CZ_rYu4jcSyw70AkFzDb7r-KJpqReQcpWZ0iB5OpO5McaK5XhW7ELbg6FNRfCK-QvQ1aC2OTsASDX6mglCiFp6wiXAAl4nQ4sxDt-BI/s1600/mail.png);
}

4. Jika sudah, cari lagi kode </head>, kemudian script berikut ini diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$(&#39;#navixed a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});

$(&#39;#navixed &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
});
</script>

5. Untuk menampilkan menu navigasi horizontalnya, simpan kode CSS berikut sebelum <body>

<ul id='navixed'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

6. Selesai, jangan lupa simpan

Itulah tutorial membuat Beautiful Slide Out Navigation Horizontal Menu, silahkan dicoba and keep smile :)

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.