11.5.12

Slide Menu dengan Efek Transition untuk Blogger (Only CSS)

Artikel memasang menu indah bergaya fixed (diam) diberi sentuhan efek CSS3 transition! Berawal ide dengan jQuery plugin dalam penggunaan Add Beautiful/Nice vertical fixed Slide Out navigation menu using jQuery and CSS To Blogger. Bertanya sendiri, mengapa harus pakai script kalau bisa dilakukan hanya dengan variabel CSS...xixixi.

Markup HTML

<ul id="navigation">
<li class="home"><a href="" title=""></a></li>
<li class="about"><a href="" title=""></a></li>
<li class="search"><a href="" title=""></a></li>
<li class="photos"><a href="" title=""></a></li>
<li class="rssfeed"><a href="" title=""></a></li>
<li class="podcasts"><a href="" title=""></a></li>
<li class="contact"><a href="" title=""></a></li>
</ul>
Kode CSS
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
ul#navigation li a:hover {
    width: 100px;
    height: 70px;    
    margin: 0px;
    opacity: 1;
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QuGCvRVwWP33DLqtcqdYauusRIkVlBynzh6k8SxlAAxwdqM2Ov2AO8xoTOJNaU2qqvT1O0VFSNZuLLSUI2HMofNvmJuGg8n685MhgXt3a7x8rGaQjdA2oUd52nNfRJzMSHtrAxFaVfc/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMY_ZU6b0OqPExVyojgMiuSugqLasg7YpE7selW7zp1aFSRV-Bm6Tkbd41g_dyY1ujQ-D9Nx7PMwxYXCLqEvxqu4KlbyEyqJxXxHkd6sEhN3e5w1KKTqYKl6hXoXdLOqiNyVp3rkQ27I/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDp10vGYPAdYKAc_3YnTmPryeozsDEaRJf0LfQMfnlJnx1ZbFCRjtbcZNAJ1zBfWHV6-pTkDHoIH5sxOc0BNlKOF3pStNmj9DgGeBTBC0jhAmz8zkH6aTL47nP8_0nvPm5IEfFSoU08T4/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtrqcYBsR7ueTfBTqLNvbL3ilWbmq202V7cE416G7O1AiZI5ydgdmGo5aa5_vwZIwx7wXooyJuTxNSa-v5W_wadPGcew0pMG9aw28VimUIbkx2oxMWt2UdoEEBlS-SyGWcwCu6nmYKs8/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44fQQlJiCnsJqUiiofsm1bg9QLh-hhsZFMoltadIKj1swndqaKxr_68eL8w178WXyi1Rn7V1IBAilX2wNvI8ecrco8LR17Sh2OjRMYnaaVFFlnqOQPfXPbJqVBjTxEt8Opd8manpKTg0/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBCXZHpzSGAr-zpicqV_Tp8vTcBZIpv8FMdaz76BG-SJMTUVXx_G7DGuDaBtBt4bscS89x5F5cw9jWvYrWCgze3clmhXNrSsdIUB8_PzHQwY5Olt27FD_ObKBY07o5KVo_yqhhAAAMUE/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4O-bHXoBYNrb2fsfL0iMMZ4uf7Z5XJCFX4sdUG0nSyzzUejI6Xj3o7C2CQlsCiLDS4JMEK23fJv8CUICoSLV87uDxrWvPjJTr7IaPgiWQHRyJdUJ3SfW97iWffDBu5GcDGeRARedxGU/s1600/mail.png);
}
at