Menu Navigasi Slide Out

 Print halaman ini

Dikutip dari: Yeye

Menu Navigasi Hirizontal Dengan CSS / HTML itu sudah Biasa..

tapi Menu Slide Out akan Yeye Kasih Info Ke Sahabat Yeye..

Berikut Cara-Caranya

Seperti biasa Login ke Blogger Sahabat yeye

Masuk ke Tata Letak --> Edit HTML

Kemudian centang "Expand Template Widget"

Selanjutnya cari kode ]]></b:skin>

Jika sudah ketemu Masukkan (Copy Paste) kode CSS di bawah ini, tepat di atas kode ]]></b:skin> tadi.

ul#menusisi {

position: fixed;

margin: 0px;

padding: 0px;

top: 50px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#menusisi li {

width: 100px;

}

ul#menusisi li a {

display: block;

margin-left: -50px;

width: 100px;

height: 55px;

background-color:#141414;

background-repeat:no-repeat;

background-position:48px center;

border:1px solid #cfcfcf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 0.8;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

}

ul#menusisi .beranda a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);

}

ul#menusisi .tentang a{

background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);

}

ul#menusisi .cari a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);

}

ul#menusisi .komentar a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);

}

ul#menusisi .rssfeed a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);

}

ul#menusisi .alat a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);

}

ul#menusisi .kontak a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);

}

Langkah selanjutnya cari kode seperti ini </head>

Setelah ketemu Masukkan kode JQuery di bawah ini tepat di atas kode </head> tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

Penting

PERHATIAN!!

Jika di template sobat sudah pernah dipasang kode yang berwarna merah di atas, sebaiknya kode tersebut tidak usah dipasang

Kemudian langkahk yang terakhir Sahabat yeye cari kode seperti ini </body>

Setelah ketemu kemudian Masukkan (Copy Paste) kode di bawah ini tepat di atas kode </body> tadi.

<ul id='menusisi'>
<li class='beranda'><a href='LINKSAHABAT YEYE' title='Beranda'></a></li>
<li class='tentang'><a href='LINKSAHABAT YEYE' title='Tentang'></a></li>
<li class='cari'><a href='LINKSAHABAT YEYE' title='Cari'></a></li>
<li class='alat'><a href='LINKSAHABAT YEYE' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKSAHABAT YEYE' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKSAHABAT YEYE' title='Komentar'></a></li>
<li class='kontak'><a href='LINKSAHABAT YEYE' title='Kontak'></a></li>
</ul>

Simpan template Sahabat Yeye dan lihat hasilnya. Selamat mencoba semoga berhasil dan dapat bermanfaat.

KETERANGAN!!

• Ubahlah LINKSAHABAT YEYE dengan keinginan link Sahabat Yeye
• Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan Sahabat Yeye.