Beautiful Slide Out Navigation Horizontal Menu

Beautiful Slide Out Navigation Horizontal Menu atau kalau diartikan kedalam bahasa indonesia artinya adalah Menu Navigasi Horizontal cantik dengan efek slide out perhatikan gambar berikut:

Beautiful Slide Out Navigation Horizontal Menu

Buat yang udah minat dan tidak sabar untuk membuat navigasi horizontal ini, silahkan pelototin panduannya sebagai berikut:

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/AVvXsEitXQUqMBXe42x1X4sGbA17WE6nUfWiuwBaLsC-6RLa3rUTD2vqjlzIqCgx9FWyT0ZXcG5zBvfBkbSMQRoBJj-JKKGHdIuNS4w2achsPFr6AvIyIU7JWMd-ei94QaTgvaJc2j_O1J1UEL8/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J-Xq-g28dbFvb8t1eOmKwtOn18lFBSM_xs2kiEb_rjH2Ez7MA-8bd1iWEjWkbFGK02bTm4wdHpDOd5CKQ2O813eKu1mS0NxeGRWikWLOr7K9iB3W5gyICswKkhVwNVfImPZ50dyezKg/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SeS4pk-V6e8M0bWMwxgNMhCZ4EvtMfwqx0Z2mIoIDcqmZZOMn1F7xjLC51I-BBBoWDxAHLnxvjLF8ab9QsjUTAiIOIXrkTnr9fL_WGcXwhMifObipNo02XiaQOEYYrXMoWqwSiMqHOY/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH0dCZ6axS96mkCccLonQxUaK6eHH-9ncUg4ZvoP1U-HQFnumXP8DA4jUwv_QKqqKAeZt1T7him8zDJBwWnvmqVgzuC_MN2ZMICQoqN5TfXszLeluZJGTS4SImlN76QDYhCqQmo-w1ls/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6COh47S7_pnoNuAG0tpklXb4nxoszWzeYG-SHxk_Deoa7XRiD5rB4Wn3vxplf3OqwFzSo8QODfTu9jH3UTlWPl-FGtm86-cs1L_Bpr4zXWBYdlJU5vf4JNxtkhuOlPWid6qgBo0OjbTQ/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9l8oczFb1kXAjX1663NNmf2wc9W5weRYN7MJ0NjgMXN5MDZM7_YfDoas2EUIFnTl89R6d1JZYLIu4Cdi9pG3eYnv5qCDOWscklwvAQOVdDI8xiFXWDYGB9CXnDVPIPRMFdaS-KDdYesg/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhP-d1Zdk-PGT5zLSyfYMJKvh3poxx092oiM9PWPtpqWKLZi31tp9dXTGtcgP1j0ML1WZjQdqJMKv_LlKch1RGUAGiBkmgYtGob_20Yo8Xdv4IoLpvj-9LqiItt8xjAKDiYx_AcnXuj4/s1600/mail.png);
}

4. Jika sudah, cari lagi kode </head>, kemudian  copas 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 gan..! Jangan  lupa kode di atas  <li class='home'><a href='isi dengan alamat URL yang akan ditujukan'><span>Home</span></a></li>

Ok agan" sekalian semoga saja ini bisa membantu.Good Luck...







sumber:  http://4-jie.blogspot.com/2011/09/beautiful-slide-out-navigation.html