Cara Membuat Menu Slide Out Navigation horizontal yang menggantung dengan efek css

Kali ini, saya akan share artikel untuk modifikasi blog anda agar lebih tampak indah dan tentunya dengan menu navigasi ini akan jauh lebih mudah untuk di gunakan oleh pengunjung/visitors, menu ini saya beri nama Cara Membuat Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css atau dalam bahasa kerennya Beautiful Slide Out Navigation Horizontal atau kalau diartikan kedalam bahasa indonesia artinya adalah Menu Navigasi Horizontal cantik dengan efek slide out. Pastinya lebih keren, lebih waw gitu, dan lebih lebih deh.,

tutorial ini saya buat untuk memenuhi request dari teman2 yang ingin mempercantik blognya, tentunya menu ini ringan dan tidak terlalu menjadi beban loading di blog anda, berikut screen shoot dari Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css :

Buat yang udah tidak sabar untuk membuat menu navigasi horizontal (Menu Slide Out Navigation) ini, silahkan ikuti cara nya dibawah ini :

siapan :
- secangkir kopi dulu, sambil nyantai.... apalagi yang internetnya lemot, sambil nonton tv juga tidak apa-apa.. wkwkwkwk :))

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

/*----------------
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/AVvXsEgelwm7ZxwjxfOX8APNJTh8gHFNq9fRLAwV3n5if33EH41aK8RdFAzHywn11kwqJvGF1Xy2mxxKEHc7-hpZh-1UC5UYM8E7BoLRNIDNyPbM5t-93UDSZrAqgLQdqCpkyIzSBOqHl_8Owpk/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqaTTOjKk1Fohxm3UiOjdLuxPMIEg2UuKFDIkjdegunfNvMLj_w9X6ycXNdoOwLec6iZJizmdYV_-vaYqHiGd1qaROwEhVyGn90l99_7LF7YoBO2hFzWoZ3zCAUTLAdUcmuoAoet9a-ZA/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWtzKxnR-EBnQZ6L2P8j_PeJj6TaQ6izeSVu-80tqvaEJMQVCusR3erKdd122CRRpgHYRMxHqb5Ui0o3ZLgrwhXGZJ6UfHu6vOCp2ROZEwcTwTjP_f4wZz7PTRzu__CusVlZZPlI16zg/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_1CrNqvn-eH2YcknXCJdVsOQRbivImtKihkuKRo8C3N1u1Bl4W3Z31d6750EHwEPsnHwI_hEXlKJOieK1Ay084WWz6HIOTO5uBuAI5tSzP_teHorxzg6q4QYdYAjHc3jG8amurxbXDdE/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNi8wgXNSS8xtqpqXHG4oVX9GFOeTpZn0Btd-rj5Zp26k26A_lvreilQR9lMgm4owkc09_6dRdInJ7x0CHVwbvu03xp0AOVwzHPAp_QsIvGNgIcXoWgHzizMC8UYPGUtGhdSZ9854Jq3o/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzswvUOerRJBD_LG8gZLlvH4EZEgS0UyqUDTrk8iuYzT1D4_nWqEIKlU3zgOXSjNxYikB62C9nBxjE0ynER7PMaYuAkan4_AetZ5K4cajyxDZhXPe4CFEsH5POnsJH2260T18HBJJiwd4/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwDa5mEE-YE_kOz_9HpXr8kKHmSKZnNscxaXTsfpiylXXMeSChYkzZdC4Dc7wJspE2-A4VdtVziS0u4JcxnTrQ4D5SJwnaEuerQAooufB55-aPXtcAtudfPZo2834adtZXbQ2Gfadc-U/s1600/mail.png);
}

Penjelasan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelwm7ZxwjxfOX8APNJTh8gHFNq9fRLAwV3n5if33EH41aK8RdFAzHywn11kwqJvGF1Xy2mxxKEHc7-hpZh-1UC5UYM8E7BoLRNIDNyPbM5t-93UDSZrAqgLQdqCpkyIzSBOqHl_8Owpk/s1600/home.png dst. adalah icon yang digunakan dalam menu tersebut, bisa di modifikasi sesuka kamu,
float:left; adalah posisi peletaklan menu, jika ingin meletakannya di sebelah kanan, ganti menjadi Float:right;
left:10px; adalah posisi menu dari sebelah kiri atau sebelah kanan yang bisa kamu tentukan sendiri besarnya,
yang lainnya silahkan di analisis sendiri, saya sudah capek nulisnya...:)) hehe, komen aja dibawah kalau ingin tahu yang lainnya..

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

<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;
$('#navixed a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navixed > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Catatan :

khusus kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> merupakan kode/ script jquery, apabila dalam blog anda sudah terdapat kode tersebut, maka tidak perlu sobat memasangnya lagi,

5. Untuk menampilkan menu navigasi horizontalnya, sisipkan kode CSS berikut sebelum kode <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>

Contoh pengisian :

<ul id='navigation'>
<li><a href='http://www.pakarilmu.web.id/'>Home</a></li>
<li><a href='https://plus.google.com/102200384624384422138?prsrc=2'>About Me</a></li>
<li><a href='http://www.facebook.com/pages/pakarilmuwebid/203709326335182?ref=hl'>Facebook</a></li>
<li><a href='http://www.pakarilmu.web.id/p/blog-page.html'>Site Map</a></li>
<li><a href='http://www.pakarilmu.web.id/search/label/Download'>Download</a></li>
<li><a href='http://www.pakarilmu.web.id/feeds/posts/default'>Rss</a></li>
</ul>

6. Selesai, selahkan di simpan dan lihat hasilnya dari Menu Slide Out Navigation horizontal yang menggantung dengan efek css yang telah anda buat

Itulah tutorial carav membuat Beautiful Slide Out Navigation Horizontal Menu, Cara Membuat Menu Slide Out Navigation horizontal yang menggantung dengan efek css, silahkan dicoba :) semoga bermanfaat, apabila ada kesulitan, bisa komentar di bawah...