Menu Sidebar Hover

Menu Sidebar Hover

Neste tutorial vamos fazer um menu sidebar com efeito de slide com css e html.

Vamos Adicionar o Html:

<nav class="menu-sidebar">

        <ul>
            <li>
                <a href="#">
                    <i class="icon icon-home icon-text"></i>
                    <span class="menu-texto">
                        Página Inícial
                    </span>
                </a>
              
            </li>

            <li class="has-subnav">
                <a href="#">
                    <i class="icon icon-file-text icon-text"></i>
                    <span class="menu-texto">Posts</span>
                </a>
                
            </li>
            
            <li class="has-subnav">
                <a href="#">
                   <i class="icon icon-camera icon-text"></i>
                    <span class="menu-texto">Galeria de Fotos</span>
                </a>
                
            </li>

            <li class="has-subnav">
                <a href="#">
                   <i class="icon icon-play-circle icon-text"></i>
                    <span class="menu-texto">Vídeos</span>
                </a>
               
            </li>
            
            
            <li>
               <a href="#">
                   <i class="icon icon-comments icon-text"></i>
                    <span class="menu-texto">Comentários</span>
                </a>
            </li>

            <li>
               <a href="#">
                    <i class="icon icon-gear icon-text"></i>
                    <span class="menu-texto">Configurações</span>
                </a>
            </li>
        
            <li>
                <a href="#">
                   <i class="icon icon-envelope icon-text"></i>
                    <span class="menu-texto"> Contato </span>
                </a>
            </li>
        
        </ul>

        <ul class="logout">
            
            <li>
               <a href="#">
                    <i class="icon icon-plug icon-text"></i>
                    <span class="menu-texto"> Sair</span>
                </a>
            </li>

        </ul>

</nav>

Vamos Adicionar o Css:

.icon-text { font-size: 2em; }

.icon {

	position: relative;
	display: table-cell;
	width: 70px;
	height: 36px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;

}


.menu-sidebar:hover,nav.menu-sidebar.expanded {
  
  width:250px;
  overflow:visible;

}

.menu-sidebar {

	width:65px;
	height:100%;
	top:0;
	left:0;
	bottom:0;
	background:#00629d;;
	position:absolute;
	overflow:hidden;
	-webkit-transition:width .04s linear;
	transition:width .04s linear;
	-webkit-transform:translateZ(0) scale(1,1);
	z-index:1000;

}

.menu-sidebar>ul { margin:8px 0; }

.menu-sidebar li {

  position:relative;
  display:block;
  width:250px;

}


.menu-sidebar li>a {

	position:relative;
	display:table;
	border-collapse:collapse;
	border-spacing:0;
	color:#ffffff;
	font-family: arial;
	font-size:1em;
	text-decoration:none;
	-webkit-transform:translateZ(0) scale(1,1);
	-webkit-transition:all .1s linear;
	transition:all .1s linear;
  
}

.menu-sidebar .nav-icon {

	position:relative;
	display:table-cell;
	width:60px;
	height:36px;
	text-align:center;
	vertical-align:middle;
	font-size:1em;

}

.menu-sidebar .menu-texto {
   
   position:relative;
   display:table-cell;
   vertical-align:middle;
   width:190px;
   font-family: 'open_sansregular';

}

.menu-sidebar>ul.logout {
  
  position:absolute;
  left:0;
  bottom:0;

}

.no-touch .scrollable.hover {
    overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
  
  overflow-y:auto;
  overflow:visible; 

}

a:hover,a:focus { text-decoration:none; }

nav {

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;

}

nav ul,nav li {

   outline:0;
   margin:0;
   padding:0;

}
.menu-sidebar li:hover>a,nav.menu-sidebar li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {

    color:#fff;
    background-color:#242424;

}

Veja o Resultado !

Baixar Código Veja Funcionando