Banyak cara membuat Navigation/Tab,kali ini kita akan membuat Cara Membuat Slide Navigation dengan JQuery pula.
Cara-cara Membuat Slide Navigation dengan JQuery.
Macam biasa mestilah membuka blog dengan ruang edit html.
Cari code berikut ]></b:skin>
Salin code css dibawah ini dan letak diatas ]></b:skin> tadi.
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left
}
ul#navixed {
position:fixed;
top:0;
right:10px;
list-style:none;
z-index:999999;
width:721px;
margin:0;
padding:0
}
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:0 0 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/AVvXsEiOZ4zfv6VOI0be2Dp5QPQo1wArQLUtws02Z1-fdPHb5yO-k2EtcKqh-LO9B3n1TNQ4hp712G160ZKxsgmgLQJlbb42tndU5UZA1HTwQeTmdoyPCfai_APVCOxsgC0_hWdI9kzsbfRqlKo/s1600/home.png)
}
ul#navixed .about a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaO83xRxdkmCOWbluyqyQafW-IEp5c1hhDsMMate5qbVzdgb5cjwMcZplkoe80LnVIAXch4QUaffdj52l_E-Ji5K2m374T0ZTsFIaswdzx82VgHu4x281XhVHQmYiZBNlkX6qXMbI3v7s/s1600/id_card.png)
}
ul#navixed .search a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_l4HzgTJYjdur0X837sn_B5LEA_O7dv2BDOPdqFwQCQx3qPkYl2QiB4VMrG0CgVb-xfYKzgxdhBBZ10C_VsA9UGFHEZh-Dq9qIqtA42hmR6DPp-qY7AwnfKFdsF0NlUyecvEDr5jnHs/s1600/search.png)
}
ul#navixed .podcasts a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Tlk_ODD8Cm5qnphfBDTEIIEYry1nYawvYYCgRTEDsKd_jQbPt5f9GrbAl_HwZEl3pHamX6H4LbW2xvfp6ko7tCO2N7g9maqBVx0rGrh1Leyo7U9XtNR3dnHA9tKrS49lkdaxghRw2N0/s1600/ipod.png)
}
ul#navixed .rssfeed a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingxxYyYUrPUjVIOjTR6wFGOEfsAuxIxYWg3y5SyL3WYW12TA8K5VRI4sAEpJrXsnMHMS5dWFnM5pr0y8ZLOruCbuMIRtLTncJyBhANpuHluCGIhlXRGe8RSJnfajaFUYZb4fPF3sgwao/s1600/rss.png)
}
ul#navixed .photos a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogQciYR7vFkxKdD9yYQeMwYlRWQ1JA0vX_EVF3MuSbXp24Ak0Evpq4_f3ta6ctYXunSG9osMtsa2jhEJgCZpBZBK3Pn5yIMjj3PFFV-qYfOiGOeil7K_UDer5hCEfWn0BYqTkdX0MbgU/s1600/camera.png)
}
ul#navixed .contact a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWguVNvXV9CfDxTb7IDf9zi3hqMWKtjyCaJaYqderCL6JArFGfuVYbOslT4nrr2G5jWzFvO3tGavglE2tqnwESQ-_kKNgW4dDxSzx7SwrKK2m1FTn3W2qZBnahDF727xHiMWdZi3V9C-U/s1600/mail.png)
}
Cari code </head> pula
Salin code dibawah ini dan letak diatas code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='https://sites.google.com/site/listblogtutorial/sitemap/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>
Cari lagi code <body>
Salin dan letak code dibawah ini diatas code <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>
Klik simpan template.
Buka kembali edit HTML untuk anda edit code no3 mengikut kesesuaian blog anda.
Selamat mencuba
0 comments:
Post a Comment