Css3 animations v2

by Plippie Plop

HTML

<div id="menu">

    <div class="menu-contents">
        
  <div class="menu-items">
      
      <a href="javascript:void(0);" data-url="pages/home.html" class="menu-link" data-target="page"><i class="icon-home"></i>Campagne pagina</a>
       <a href="javascript:void(0);" data-url="pages/home.html" class="menu-link" data-target="page"><i class="icon-home"></i>A very cool menu</a>
      <a href="javascript:void(0);" data-url="pages/home.html" class="menu-link" data-target="page"><i class="icon-home"></i>A very cool menu with long text</a>
      <a href="javascript:void(0);" data-url="pages/home.html" class="menu-link" data-target="page"><i class="icon-home"></i>A very cool menu also with a long part of tekst</a>
      
  </div> 
    
 
    
</div>

CSS

/* reset */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;    
}


/* STYLE */

#menu{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:280px;
     background:#efefef;
}

#menu .menu-content {
position: relative;
height: 100%;
width: 100%;

-webkit-overflow-scroll: touch!important;
}

.menu-link {text-align: left;padding-right:20px;}
.menu-link {
position: relative;
color: rgb(51, 51, 51);
text-decoration: none;
display: block;
font-weight: normal;
height: 40px;
line-height: 40px;
background: rgba(249, 249, 249, 1);
border-bottom: 1px solid rgb(137, 137, 137);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.menu-link i {
font-size: 24px;
width: 40px;
line-height: 40px;
text-align: center;
}

#menu .menu-link:after {
right: 0px;
content: "\f054";
}
.menu-link:after {
display: block;
font-family: 'fontAwesome';
position: absolute;
top: 0;
color: rgb(34, 34, 34);
width: 16px;
height: 40px;
line-height: 40px;
padding-top: 2px;
}

.menu-link:active, 
.menu-link:focus, 
.menu-link:hover {
background: rgb(56, 180, 232);
text-decoration: none;
color: white;
}


/* Animations */

.menu-link{
    position:relative;
}

.anim-bar{
display:block;
position:absolute;
    z-index:0;
 border:0px solid red;
    width:100%;
    height:40px;
    
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 85%, rgba(0,0,0,0.23) 92%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(85%,rgba(0,0,0,0)), color-stop(92%,rgba(0,0,0,0.23)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.23) 92%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.23) 92%,rgba(0,0,0,0) 100%);
background:...

JavaScript

//dirty  ajax load simulation on hover:
$('.menu-link').hover( function() {
      $(this).prepend('<span class="anim-bar"></span>') ;    
} ,function() {
    $(this).find('.anim-bar').remove();
});