Oke,kali ini saya ingin posting artikel tentang bagaimana membuat Menu Sliding Horizontal yang menggunakan J-Query. Yaa,yang saya maksud adalah seperti ini..
Kelebihan dari efek J-Query ini adalah fungsi Sliding dan Slide Out. Sliding berarti meluncur dalam artian kalau skrol mous kita putar, Menu akan tetap mengikuti / tetap kelihatan. Sedangkan Slide Out yaitu fungsinya timbul dan tenggelam kalau terkena kursor.
Sobat blogger berminat untuk membuatnya diblog sobat?? Ayoo kita result aja tutornya..
- Pilih Edit HTML pada tab Rancangan
- Cari kode ]]></b:skin>
- Taruh kode berikut diatas kode tersebut.
/*----------------
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/AVvXsEjOSwiZ61OSzmqRK0tyy76rFaA9TE5SSms3iv8PVoaSm7lxTi2KGR2eDzTdETdG4wPSYlNT89tNsni4oIyTvI58o4II0JeTKUs1yBy6dgqw0A6SnSfQDsVTk4Y2OiJbZsbAoKea0XdoOlU/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OI0XMKF-U8vrCwTM_ylIo_qY0VxhwuS1oQZVoWwLwt-Xqj1nzJyAMLuk9VuKo3uBYqtKwEKFCGuLcDQWTzf5ZXNjucBqeMMo3RZ_vYtomuxOt0Yomv3HoyJUcmxuDL8-BWRQisIj4kg/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCm9kNfu6LafwUyghQF8_3WGNlSG-FaQmTEo2HqjCuVKl5gARxNf7X6GCe3g7esnvsrznykZkoCpQJX583wI26jQpbmfsbFYvxbWdm7rq46qI-UN_2d7qocV3rb8qZo6sg5w1mgcigeI/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlRCHxmUTTy6ETMvb1DB7PiVGJlITpk_cc3qrLR37JqqoFEMQarOD2wyb-iQlrfgH-lQG8zoIs3L8z3CvXnPNuJuKP7F0qPgMcx-MdeEAOcwcwumJTQVYIyPGFe53KKd3lGsHMmpuGVwM/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRCEbHGIPee2e7DTCfHZZIL-st5d6P60UP1U0eKnsdEPtcuCItdLWAsfvpiCvjGjwkSZ8Kq3pmCJHy9zHencb7ohZeMRxOlCsuX3pzo6z4RSlWaCFNS1CMuaWi-ipd5A_A4OjIl8Y1gc/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYss3Kl894-gifQ8GcD5FZmZmSJI9dQWgj58-0IW8tfPJJRjAB2z4u2AMRlVyxzVkEraINE7Ui639p7I2Jxri179faUIosz3GP-SZZe3DaLZ5y4MpXe0hAt7vOsWmbGNac9d9T-1PVyU0/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxcLXRvfP5OZAN7dgFEQE0ftb8JK_92mI_xCReGjL7jli7KNN3X2ZJ7FB_9cfHVKVmD6oy7EKWO7ks0p5FvpFi33AR-V7JXUCxCFHQmPTa5259VzJw0MaM8a5ufPk-_dV7405fw152CA/s1600/mail.png);
}
- Lalu cari kode </head>
- Pastekan kode berikut ini tepat sebelum 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>
- Dan untuk langkah terakhir,cari kode <body> .
- Pastekan kode berikut diatasnya.
<ul id='navixed'>NB : Dari pengalaman saya, menaruh kode di bawah ini di atas <body> bagian header akan tertutup. Ini menimbulkan kita tidak bisa menambah widget lagi. Jadi misal sobat ingin menaruh di java HTML tidak apa-apa.
<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>
Dan menurut saran saya,sebelum sobat blogger menyimpannya,ada baiknya sobat preview dahulu.Kalau semua berjalan lancar,menu ini akan kelihatan seperti gambar diatas.
Ohhh iyaa,sobat bisa mengganti kode yang berwarna Biru sesuai dengan keinginan sobat blogger.
Dengan catatan :
Kode # diganti dengan URL tujuan sobat blogger.
Tulisan Home,About,dll dapat diganti sesuai selera.
Kode gambar pun bisa sobat blogger ganti sesuai keinginan sobat blogger.
Naaah,gimana sobat blogger?Berhasil kan..??
Semoga berhasil yaa..
Sekian dulu postingan saya kali ini,semoga bermanfaat untuk sobat blogger semua.
0 komentar:
Posting Komentar