Beautiful Slide Out Navigation Horizontal

Beautiful Slide Out Navigation Horizontal Menu atau kalau diartikan kedalam bahasa indonesia artinya adalah Menu Navigasi Horizontal cantik dengan efek slide out. Kalau kemarin 4-jie udah pernah bahas tentang cara membuat navigasi horizontal sub menu ala oom, namun kali ini 4-jie buat sedikti berbeda dari biasanya. 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/AVvXsEh7dHQfdQjm370xEBZxTDBnfw2G2OVcFaQBKIgPy1OhjVYcfeu_x5Iv03xWHRLPm_9itl4Mgp4hyphenhyphen0xLwncqUzMlu1OJHAHKU4XM3c73UFUX9VyYgTqn6SkjtihXoRSGHTlS4EjrjekZuuc/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKnXIvjpwt5uuYf7XCB9D8oGbQ48hQEt_2s20C2EwSPf1PsJjZKvmIWBRnxAIieokqIEwOHaC4hJx17MGwEj2TTglPdfDZQ3sKqrakcXe8Ir1T-RPIhEEeO37832MBacC8DwwcRJfPk8/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHk0jx7oIY5Vrq7oFeZTIpjMiS_BvVcfdfQpoguKUL2nrPUyZtPayCvTefScOeAYkLnQezPxob7iVvtMZ8jqUeCipp8IKhRVPx5ZLbqUk24sH0rYhDKNH4gWsAqTrg0kTUuS6bYjKTSw/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnqYhlMSU0Zs7y7UN8u4p3jUyseoyetwfwOTutZRhsINAgZeh2KHWjaNMDHHYepknxKK6y9Fy255xi_rxvVv8UOxdZUVc5pFHh1RQs8Swmcee5YRPU16FRfupAeCDTuHvuxJndc2WW8FQ/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCDvlpYJ2zZdg8obq2_QnIiEt1IYu7rklNWm1eV4kqTu5bkIivw_aSHUTcyaqnKpIaCylq80MRfDQGIHfZG_IOqa-qFI07qi-1a_8uVFHudPsWA6i5ayFbvZl_6VDmMuNpTPybY2YgFg/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb4VQnwnU5Fc9y8voopUhWKDoSTDve8FY2lz68uTsc5qlSInGJb1_4VUPu7RpvQ6UdC3B_86wsDFwGfEqlk5ChOlW_gkJ9frVbKlVKPzVjgZjuNh3J1H09B62f0YwYlisyMZFM0M1MfIM/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg74JlIqZpvL1QP1669_wM0wUdQUoMQQO-fgEYshXnU10OW0-1MJdG6Hen9DB0iPDmR8k8OO2anWq19IDKlUMm-FokTVO6MMqZFd2SYIwUCYOPbxzmb1wl5w1Pn1N_869RZHwwOtmsywc/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 :)

Sumber : http://4-jie.blogspot.com/2011/09/beautiful-slide-out-navigation.html#ixzz1jWsbj2Xp
© COPYRIGHT 2011