<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css"/>
<nav class="menu-opener">
    <div class="menu-opener-inner"></div>
</nav> 


<nav class="menu">
    <ul class="menu-inner">
        <li class="logo">
            <a href="#"><i class="h">S</i></a>
        </li>
        <li>
            <a href="https://css.forum-top.ru/userlist.php"><i class="fa fa-user"></i></a>
        </li>
        <li>
            <a href="#"><i class="fa fa-bell"></i></a>
        </li>
        <li>
            <a href="#"><i class="fa fa-pencil"></i></a>
        </li>
        <li>
            <a href="#"><i class="fa fa-rocket"></i></a>
        </li>
    </ul>
</nav>





<style>


body {
    background: url("http://i.imgur.com/pVfxw0n.jpg");
    background-size: cover;
    color: #fff;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
    -webkit-transition: 250ms all;
    transition: 250ms all;
}

.menu-opener {
    background: #f2f2f2;
    cursor: pointer;
    height: 64px;
    position: absolute;
    bottom: 2%;
    left: 1%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 64px;
}

.menu-opener-inner {
    background: #333;;
    height: .5rem;
    margin-left: .75rem;
    margin-top: 1.75rem;
    width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
    background: #333;
    content: '';
    display: block;
    height: .5rem;
    width: 2.5rem;
}

.menu {
    background: #f2f2f2;
    color: transparent;
    width: 64px;
    position: absolute;
    bottom: 2%;
    left: 1%;
    height: 0rem;
    z-index: -1;
    overflow: hidden;
}

ul.menu-inner{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu-inner li {
    display: block;
    text-align: center;
}

i.h {
    color: #fff;
    font: 700 48.28px Tahoma;
    line-height: 71px;
    text-shadow: 0px 0px #819da6 , 1px 1px #819da6 , 2px 2px #819da6 , 3px 3px #819da6 , 4px 4px #819da6 , 5px 5px #819da6 , 6px 6px #819da6 , 7px 7px #819da6 , 8px 8px #819da6 , 9px 9px #819da6 , 10px 10px #819da6 , 11px 11px #819da6 , 12px 12px #819da6 , 13px 13px #819da6 , 14px 14px #819da6 , 15px 15px #819da6 , 16px 16px #819da6 , 17px 17px #819da6 , 18px 18px #819da6 , 19px 19px #819da6 , 20px 20px #819da6 , 21px 21px #819da6 , 22px 22px #819da6 , 23px 23px #819da6 , 24px 24px #819da6 , 25px 25px #819da6 , 26px 26px #819da6 , 27px 27px #819da6 , 28px 28px #819da6;
}

.menu-inner a {
    display: table-cell;
    height: 71px;
    width: 71px;
    color: #727272;
    text-align: center;
    text-decoration: none;
}

.menu-inner a:hover {
    color: #333;
    background: #bababa;
}

.logo {
    background-color: #a0c2ce;
    text-align: center;
    overflow: hidden;
}

.logo a:hover {
    background-color: #a0c2ce;
}

.menu-inner a > .fa {
    font-size: 28px;
    line-height: 71px;
}

.menu.active {
    height: -webkit-calc(100% - 2rem);
    height: calc(100% - 2rem);
}

.menu-opener-inner::before {
    -webkit-transform: translateY(-0.75rem);
    -ms-transform: translateY(-0.75rem);
    transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
    -webkit-transform: translateY(0.25rem);
    -ms-transform: translateY(0.25rem);
    transform: translateY(0.25rem);
}
.menu-opener-inner.active {
    background: transparent;
}
.menu-opener-inner.active::before {
    -webkit-transform: translateY(0rem) rotate(-45deg);
    -ms-transform: translateY(0rem) rotate(-45deg);
    transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
    -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
    -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
    transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

</style>

<script>
$(".menu-opener").click(function(){
    $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>