Fancy Apple-Style Icon Slide Out Navigation adalah suatu navigasi yang bergaya apple.. agak beda sih.. navigasi ini letaknya di atas bentuknya biasa sih tapi saat disentuh mouse baru kelihatan ajibnya navigasi ini..hehehe navigasi ini saya temukan sudah terdampar di suatu website, ya udah saya pungut aja..oke langsung saja kita lihat demo dan cara pembuatannya
Langsung ke proses pembuatannya
- Loggin blogger.com >>Rancangan >> Edit Html
- cari kode ]]> dan pastekan kode berikut diatasnya
.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rUBBSanjucrR15ypVH2_ZGuPNsn5i8Dw7VITCcP9at67yijc6U2JxqzSP1m6L0ei9HV7ExsMmp2BJ-BW3ycadIf7kYrHqI-8HWMIU6nTAXq-Rhkzj9JLkCzc_KLEEqxp9CvldZCW4WuO/s1600/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8y_aoIxTFxiqSQzZ1__KTqUJ9K7IL0M2O_bgaw56s00sVwe6-VDbnkg_iuX-FO4XZk5LRb4Bx4fZpUjEZ-MKdB1jedBKIRHJxfh0IBo93lfVHmRFGyB-Lg_HKP-vp-AUungfYjGUffme/s1600/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzwibB1lLMoDKJhiyHulBAmv9MWBwTZ0HfrlIf1Zx8S7dF4y7H5pfS93UkxfZkvILwwqTa2wlk_1mnwkBtyowso8cONr0n9tGKIvjmiCxwTvCjUabiThkr06Y32ylX5PiPBqp6mNRx15jx/s1600/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh676e0fCN84tS0mBhPq2ZAPVoTpb7XoVALkvdt6eY4bib59m9FYtGiYB4p_hjYNtYWZK8ngYGTSBuPR2YtAfMpxibXMdmWu3yBRnAixp-5K-USa2GPd4bXiSLgMN6Jgn9pN8dCpDzwL5V/s1600/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4jBi7KZX_vHu1uWzQe6YLzOGdtPIGM3Im2e2l9oJ1ww06BPWDJFHJurT5dlxID1bl3G39xbkTGO-bNl7ghcWos5mPwUADdCkeqjVPbTEBFuCeC3uSwpkSvMjS7Rw4B2v-APDbcZVr0Cx/s1600/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaXmeLtWMj7GBAlROQiL9QQgAlZLM0lV3KzjNyAQrLamZHzZsgpe0DoA5fcONvDuhTU_RrOzRs354MiYP5hrKTFeZ34LL0vS_yytsbpEiBuUftpbWO2fNhzcNxKXUygGnR72in-GnWWIp/s1600/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeptc-d80GbE6GWb7c5grOx-nRui6wlNOPw15zzExzfM7vMOLkH669bOxIZEID70PU8ckWyoAYeGcBnXaD0ZZvHLy6ISK82p_p_ZXQFNwbGKqlYUjFUJb_Tl6pZD5577dvmNYEWopsLv1S/s1600/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ggK0F5kih0clQECifece-19-ADLUCnjYLH_xCFemrTO5WiBnNMHNzZkwS-BGsvAH0hZWETY5guEaEwpxaQl3cU50-F75IQSteIxwDW1fXoEFXcx-Wvf-4TDn2xmXeTNU1jPOPb-8zqhS/s1600/print.png);
left:813px;
}
- oke lanjut cari kode dan pastekan kode berikut diatasnya
warning: jika blog anda sudah memiliki kode berwarna merah, jangan anda tambahkan.. cukup satu
- lanjut cari kode
- dan pastekan kode berikut di bawahnya
- oke.. simpan.. semoga bermanfaat