Account Menu
:hover Menu (concept)
<!--
<!-- autor: Marco Barría https://twitter.com/marco_bf--><div class="avatar">
<div class="menu">
<div></div><a href="#"><span class="typicons-user"></span></a>
<div></div><a href="#"><span class="typicons-cog"></span></a>
<div></div><a href="#"><span class="typicons-mail"></span></a>
</div><img src="http://s.cdpn.io/953/yo.jpg" alt="" />
</div>@import url(http://weloveiconfonts.com/api/?family=typicons);
@import url(http://weloveiconfonts.com/api/?family=typicons);
/* typicons */[class*="typicons-"]:before {
font-family: 'Typicons', sans-serif;
}
html, body { height:100%;
font-smoothing: antialiased;
}
a{text-decoration: none;
}
body{background: rgb(65, 65, 65);
overflow: hidden;
}
.avatar{position: relative;
margin: 50px auto;
width: 128px;
height: 128px;
}
.avatar img{
border-radius: 0px 5px 5px 5px;
box-shadow: 0px 1px 1px #000;
overflow: hidden;
opacity: 1;
transition: opacity 0.45s;
}
.menu{background: rgb(254, 148, 0);
border-radius: 2px 0 0 2px;
box-shadow: 0px 1px 1px #000;
padding: 4px 0;
position: absolute;
top: 0;
left: -30px;
width: 30px;
}
.menu div{
background: rgba(55, 55, 55, 1);
border-radius: 2px;
margin: 1px 5px;
width: 20px;
height: 4px;
transition: height 0.45s;
}
.menu:hover > div{
height: 1px;
}
.menu:hover + img{
opacity:0.4;
}
.menu > a{
color: rgba(35, 35, 35, 0.5);
display: block;
text-align: center;
font-size: 0em;
padding: 0;
transition: padding 0.1s;
}
.menu:hover > a{
font-size: 1em;
padding: 5px 0 0 0;
}
.menu > a:hover{
color: rgba(35, 35, 35, 1);
transition: color 0.1s;
}