Hidden Menu By MBS

by ASHISH ROX

HTML

<ul class="hiddenmbs-menu left">
<li class="home"><a href="#">Home</a></li>
<li class="portfolio"><a href="#">portfolio</a></li>
<li class="blog"><a href="#">blog</a></li>
<li class="about"><a href="#">about us</a></li>
<li class="contact"><a href="#">contact us</a></li>
</ul>

CSS

.hiddenmbs-menu {
    background: #000;
    bottom: 0;
    list-style: none outside none !important;
    margin: 0 !important;
    padding: 20px 0 0 !important;
    position: fixed;
    top: 0;
 transition: all 0.2s linear 0s;
 -moz-transition: all 0.2s linear 0s;
 -webkit-transition: all 0.2s linear 0s;
 -o-transition: all 0.2s linear 0s;
    width: 76px;
 opacity:0;
}
.hiddenmbs-menu.left {left: -60px;}
.hiddenmbs-menu.left:hover {left: 0;}
.hiddenmbs-menu.right {right: -60px;}
.hiddenmbs-menu.right:hover {right: 0;}

.hiddenmbs-menu:hover {
 right:0;
 opacity:1;
}
.hiddenmbs-menu > li {
    background-position: 50% 10px;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 84px;
    position: relative;
    text-align: center;
}
.hiddenmbs-menu li > a {
    color: #FFFFFF;
    display: block;
    font-family: "Segoe UI",arial,helvetica;
    font-size: 11px;
    line-height: 1.2 !important;
    padding: 61px 0 10px;
    text-decoration: none;
}

.hiddenmbs-menu > li.home {
 background-image:url("http://2.bp.blogspot.com/-Xnlf-2RM_gY/Us4sCcWvP4I/AAAAAAAABQc/3B3IaffqM_k/s1600/home-icon.png");
}
.hiddenmbs-menu > li.portfolio{
 background-image:url("http://3.bp.blogspot.com/-pWr-TFpoOCM/Us4sEhEZxfI/AAAAAAAABQk/Kle0fjFzo24/s1600/portfolio-icon.png");
}
.hiddenmbs-menu > li.blog{
 background-image:url("http://2.bp.blogspot.com/-MHSSl030uTw/Us4sAv7Yy3I/AAAAAAAABQM/lGkgbinjVOI/s1600/blog-icon.png");
}
.hiddenmbs-menu > li.about{
 background-image:url("http://2.bp.blogspot.com/-X64phj53vaU/Us4r_hyYxyI/AAAAAAAABQE/xqyMNKgBLkk/s1600/about-icon.png");
}
.hiddenmbs-menu > li.contact{
 background-image:url("http://4.bp.blogspot.com/-dwbUEH3fkO8/Us4sBqJDYKI/AAAAAAAABQU/MKrDnXeCeys/s1600/contact-icon.png");
}

.hiddenmbs-menu > li:hover {
    background-color: #232323;
}