♥ ASSALAMUALAIKUM ♥
Lucky day today is Saturday,not as much office work to do..This day tutorial requested by Adik Khansyaa @ IP .
How to do it ;
/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#ffffff url(Your Link Image) 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/AVvXsEhVsDYCsX-Pp4BUJYnVAvDlt_MX9p2flzZ6uqv2kWOJcnxNFQJK7l006QE8gKiiuZ4IGbkR-m6C9TU8HLQY9D0XjdU0ilDmEa5KTcgAAHHPWDmchyphenhyphenmaOVZRy_u-c5sYnNHiFzh_PUmv0Mc/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45tvVFI9PxPXc9j9jNej1V6vpuBMgSJbeulTy2uHbt6DRtq1Rd4ivDlmv838pClNt0vfjjEJbJIbt_UFtvmpABek03H7X-j0-h6-Iyr4YvhvTFNJ_kQIlY04EvsiIpalwCFOKTm5bSQY/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5AnnuqrlBvGKhzLL9G_wj9SQS90UprupILFI4jobSgX01l2Fs_mBvDXkkzt2u14b-FW7SQUI-0sBsZ7T4PL88jWD4ARXPocEJeVgaKlZEKu-yNXDvLp7uEjWH9xCUUZ0wOxzDkp7cQc/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFbK1RPKpJg0Sbd5B0gW7GhxsWP4BbbuSWyYZ98gjB-GfQEVKRt2epqeTd7Hw2pX9ZNPKyaiHPezJz1QZfprCxs0IJw__2PM4BBFOQl6KqHKJcb3rZSD6nEuF8EBx6YrM9cRHbL50IuE/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1OauVJ4m4XI4Z0qQdbKFUZEQlyh0tj1KAvyjhTlMC_oo8BzbFEhciuMSY4XGRW_XhkGO0BbLbkU58jmEKRub8GHmKzjh2Pxl42A29yXGQcZv0Z68UefFDvu__suwGHExQWTCV7jQqQ/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGB8gpvba6-zfgEAcTdBlFF5Kbgn4q2-ZKDlwNvykurasxXGWohn15Ob4I1DYX2lrjer_f4lTamWUksg4nDyIGNE0ef1Kdv3MbC1reRWW_ytth4bDREWWiFO3TREXH6KC7bzsRFgYXV4/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEdrr1N1YOeQE8EyQjH8oT2jto_coVnrpiEchjlSPJixi6IhkDMuourB9jb7MMqHg-cAbvMPzCvCUHT8RdUxkFnVtVU_6qykikavpFl3PWn6iETks74GDCyTlgvbdqQiSUWSMZrDyoGcY/s1600/mail.png);
}
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#ffffff url(Your Link Image) 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/AVvXsEhVsDYCsX-Pp4BUJYnVAvDlt_MX9p2flzZ6uqv2kWOJcnxNFQJK7l006QE8gKiiuZ4IGbkR-m6C9TU8HLQY9D0XjdU0ilDmEa5KTcgAAHHPWDmchyphenhyphenmaOVZRy_u-c5sYnNHiFzh_PUmv0Mc/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45tvVFI9PxPXc9j9jNej1V6vpuBMgSJbeulTy2uHbt6DRtq1Rd4ivDlmv838pClNt0vfjjEJbJIbt_UFtvmpABek03H7X-j0-h6-Iyr4YvhvTFNJ_kQIlY04EvsiIpalwCFOKTm5bSQY/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5AnnuqrlBvGKhzLL9G_wj9SQS90UprupILFI4jobSgX01l2Fs_mBvDXkkzt2u14b-FW7SQUI-0sBsZ7T4PL88jWD4ARXPocEJeVgaKlZEKu-yNXDvLp7uEjWH9xCUUZ0wOxzDkp7cQc/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFbK1RPKpJg0Sbd5B0gW7GhxsWP4BbbuSWyYZ98gjB-GfQEVKRt2epqeTd7Hw2pX9ZNPKyaiHPezJz1QZfprCxs0IJw__2PM4BBFOQl6KqHKJcb3rZSD6nEuF8EBx6YrM9cRHbL50IuE/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1OauVJ4m4XI4Z0qQdbKFUZEQlyh0tj1KAvyjhTlMC_oo8BzbFEhciuMSY4XGRW_XhkGO0BbLbkU58jmEKRub8GHmKzjh2Pxl42A29yXGQcZv0Z68UefFDvu__suwGHExQWTCV7jQqQ/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGB8gpvba6-zfgEAcTdBlFF5Kbgn4q2-ZKDlwNvykurasxXGWohn15Ob4I1DYX2lrjer_f4lTamWUksg4nDyIGNE0ef1Kdv3MbC1reRWW_ytth4bDREWWiFO3TREXH6KC7bzsRFgYXV4/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEdrr1N1YOeQE8EyQjH8oT2jto_coVnrpiEchjlSPJixi6IhkDMuourB9jb7MMqHg-cAbvMPzCvCUHT8RdUxkFnVtVU_6qykikavpFl3PWn6iETks74GDCyTlgvbdqQiSUWSMZrDyoGcY/s1600/mail.png);
}
✿ #ffffff - you can change the colour whatever you want..Click Here
✿✿ (Your Link Image) - you have to put a link of your image in case you want a background when your mouse hover on the box
✿✿✿ #000 - you change according to your desired section.
✿✿✿✿ 1px solid #BDDCEF - Change the border size,Border Type And Border Color
✿✿✿✿✿ 11px - Change The font size
✿✿✿✿✿✿ #FFF - Change The Font size colur
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://pinkdiva.googlecode.com/files/beautifulnavigation.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>
<script src='http://pinkdiva.googlecode.com/files/beautifulnavigation.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>
<ul id='navixed'>
<li class='home'><a href='Your Own Link'><span>Home</span></a></li>
<li class='about'><a href='Your Own Link'><span>About</span></a></li>
<li class='search'><a href='Your Own Link'><span>Search</span></a></li>
<li class='photos'><a href='Your Own Link'><span>Photos</span></a></li>
<li class='rssfeed'><a href='Your Own Link'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='Your Own Link'><span>Podcasts</span></a></li>
<li class='contact'><a href='Your Own Link'><span>Contact</span></a></li>
</ul>
<li class='home'><a href='Your Own Link'><span>Home</span></a></li>
<li class='about'><a href='Your Own Link'><span>About</span></a></li>
<li class='search'><a href='Your Own Link'><span>Search</span></a></li>
<li class='photos'><a href='Your Own Link'><span>Photos</span></a></li>
<li class='rssfeed'><a href='Your Own Link'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='Your Own Link'><span>Podcasts</span></a></li>
<li class='contact'><a href='Your Own Link'><span>Contact</span></a></li>
</ul>
Note : Change the Url Link Of Your Own link.
Done ... preview if there’s no error then save the template.
Note : You can change the picture / icon as you like..Find it Here and Here
ala hai....susah lah buka web awk ini..buka ape..lambat loading.....sorry ye....lagi satu...susuah nak baca entri awk....bintang-bintang ini hehehe....kacau sikit....Sorry ye..kerna tegur.....
ReplyDelete@cayob
ReplyDeletehahaha !!!.. I know my page is slow loading for Those users, i dont know what's wrong.but its ok .. I get it, as long as I'm happy with the blog I have now.
One more thing about my background have been troubled you to read my entries,I think you're just the one whos got problems with this...
Anyway, thank you for your comments and spent your time here..:)
akak. problem dia kan, nanti tak keluar box mcm akak tum just keluar words je, mcm about, search, then bila tekan, takde effect. HEHE. dah try search google, tapi tak jumpa tutorial lain ~
ReplyDeletehmm about just keluar words jew,image takde kan?..means ayat yg adik letak kat Step 3 : ul#navixed .home a{
ReplyDeletebackground-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);..contoh yg kod ni.. ( .home ) ayat home tue kena sama cara tulisanya dgn ayat home di Step 5 class='home'>
if huruf besar,all pun kena huruf besar gak and vice versa..
then about bila tekan takde effect,means adik belum letak link yang betul pada Step 5.
Tidak faham,adik tanya akak balik..:)
dah dapat kot ^^ tapi nak buat balik. yg # tu lupa nak letak url. hoho. thanx akak ^^
ReplyDeleteIts ok dear..pape tak faham just inform akak tau..:)
ReplyDeleteGoodluck!!