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(http://4.bp.blogspot.com/-ZWHmqKVWw-4/T5adP49ZqUI/AAAAAAAAA4E/QA-Z-pCsoME/s1600/home.png);
}
ul#navigation .about a {
background-image: url(http://2.bp.blogspot.com/-7xv_kHaMWDk/T5adQpDSE0I/AAAAAAAAA4M/OhNkgLEnbvw/s1600/idcard.png);
}
ul#navigation .search a {
background-image: url(http://4.bp.blogspot.com/-yMVKk5O3uWk/T5adUYsvmXI/AAAAAAAAA4s/fUoCnxHVkIk/s1600/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://2.bp.blogspot.com/-xel5YPcktJg/T5adRKXclnI/AAAAAAAAA4Y/I_o3QZZn1wA/s1600/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(http://1.bp.blogspot.com/-MndXeDPjRL8/T5adTrza4vI/AAAAAAAAA4k/UCDeLmrgnZE/s1600/rss.png);
}
ul#navigation .photos a {
background-image: url(http://3.bp.blogspot.com/-LnoSTyruZKM/T5adPPq4FqI/AAAAAAAAA4A/HFNnyG80CBU/s1600/camera.png);
}
ul#navigation .contact a {
background-image: url(http://3.bp.blogspot.com/-3Y6wAMo7Exc/T5adSUyD5bI/AAAAAAAAA4g/TVK9INPVWM0/s1600/mail.png);
}

Loading...
Loading...