Here's a live demo of cute vertical menu using CSS3 transitions.
And here's the code.
.ashmenu a{
font-family:arial ;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:tan;
color: #fff;
width: 240px;
border-right:10px solid #fff;
border-left:10px solid sienna;
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.ashmenu a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 pink;
color: #fff;
border-right:10px solid lightcoral;
border-left:10px solid ;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
<div class="ashmenu">
<a href="http://ashprincesskawaii.blogspot.com/2014/03/cute-favicon.html">cute favicons</a>
<a href="http://ashprincesskawaii.blogspot.com/2014/04/cute-cursors-3.html">tiny cursors</a>
<a href="http://ashprincesskawaii.blogspot.com/2014/04/cute-cursors-2.html">kawaii cursors</a>
<a href="http://ashprincesskawaii.blogspot.com/search/label/anime%20cursors">anime cursors</a>
<a href="http://ashprincesskawaii.blogspot.com/search/label/cute%20clocks">cute clocks</a>
</div>
Change link menu as you wish. Enjoy!
test
BalasHapus
BalasHapusNice tutorialnya perlu dicoba dan terapkan
bagaimana cara menggunakannya? kurang mengerti
BalasHapuscopy ko css dan htmlnya dan paste di layout > html/javascript blog kmu,kemudian ganti url html sesuai keinginan.. :-t
Hapuskok error ya kak?
BalasHapuserr gmna... :-t coba div classnya dibedain misal css .giftamenu nn htmlnya div class="giftamenu"
Hapusdidnt work on my blog
BalasHapus