Pada tutorial sebelumnya saya pernah membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) dimana letak dari menu navigasi tersebut berada di sebelah kiri dari element halaman blog/web.Tapi pada tutorial kali ini kita akan menempatkan Menu navigasi tersebut di atas dari
element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .
element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .
Berikut langkah - langkah project latihan kita kali ini.
Kode CSS :
Dengan adanya serangkaian kode css,sebuah blog/web akan tampil dan terbentuk sosoknya termasuk menu navigasi yang akan kita terapkan disini.Tanpa adanya rangkaian kode css tersebut bisa saya simpulkan bagaimana semerawutnya tampilan halaman website/blog anda walaupun sebenarnya kode kode tersebut bisa anda terapkan langsung pada bagian body dari elemen html.
Okey...untuk langkah pertama silahkan anda meletakan kode css dibawah ini dibagian atas dari tag </b:skin> page HTML.
/*slide out navigation start*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
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#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png);
}
ul#navigation .about a {
background-image: url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png);
}
ul#navigation .search a {
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png);
}
ul#navigation .podcasts a {
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png);
}
ul#navigation .rssfeed a {
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png);
}
ul#navigation .photos a {
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png);
}
ul#navigation .contact a {
background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png);
}Kode HTML
Nah...langkah selanjutnya,kita sisipkan kode html yang ada dibawah ini dibagian bawah dari tag <body> page HTML anda.
<ul id='navigation'> <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>
Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
pada item <li> kita dapat melihat beberapa menu yakni :
- Home
- About
- Search
- Photos
- Rss Feed
- Podcast
- Contact
<li class='home'><a href='http://pujangga-adhitya.co.cc/'><span>Home</span></a></li>Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog.Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.
Javascript
Dengan adanya serangkaian kode javascript, gaya dan efek yang diterapkan pada halaman web akan terasa indah dan inovatif.Letakan perintah javascript dibawah ini dibagian bawah dari kode html yang sudah kita masukan sebelumnya.
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
Dan yang terakhir, letakan plugin jQuery javascript library dibawah ini dibagian bawah dari tag <head> page HMTL anda.
<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
Selesai..silahkan anda priview dulu dari hasil latihan ini,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Tetap semangat dan terus GoBlog...!
0 komentar:
Posting Komentar