Menú deslizante mínimo con transiciones de JavaScript y CSS3

Vista prévia

Descripción

Un menú lateral de JavaScript mínimo que utiliza transiciones CSS3 para deslizarse en un menú vertical al hacer clic en el icono de alternancia.

Funcionamiento

Incluir la fuente impresionante icono fuente para los iconos de menú.

<link rel="stylesheet" href="font-awesome.min.css">

Cree una barra de menú lateral para alternar el menú lateral.

<div class="ms_menu_bar__wrapper">

<ul class="ms_menu">


<li class="ms_menu__trigger">



<i class="fa fa-bars"></i>


</li>

</ul>
</div>

Cree una lista de elementos para el menú lateral.

<div class="ms_menu_body__wrapper hide-menu">

<ul>


<li class="ms_menu__item">



<i class="ms_menu__item-icon fa fa-circle-thin"></i>




Menu 1


</li>


<li class="ms_menu__item">



<i class="ms_menu__item-icon fa fa-circle-thin"></i>




Menu 2


</li>


<li class="ms_menu__item">



<i class="ms_menu__item-icon fa fa-circle-thin"></i>




Menu 3


</li>

</ul>
</div>

Estilos CSS básicos.

ul,
ol,
li {

list-style: none;

color: white;

margin: 0;

padding: 0;
}

.ms_menu_bar__wrapper {

height: 100%;

width: 60px;

background: #2B1F34;

padding: 15px 10px;

float: left;

position: relative;

z-index: 10;
}

.ms_menu__trigger {

font-size: 30px;

text-align: center;

cursor: pointer;

transition: color 0.6s;
}

.ms_menu__trigger:hover { color: #2F879B; }

.ms_menu__item-icon { margin-right: 10px; }

.ms_menu_body__wrapper {

float: left;

background: rgba(24, 88, 109, 0.8);

position: relative;

left: -1px;
}

.ms_menu__item {

border-bottom: 1px solid #37616A;

padding: 15px 40px 15px 15px;

font-size: 14px;

cursor: pointer;

transition: background 0.6s;
}

.ms_menu__item:hover { background: rgba(0,0,0,0.4); }

.hide-menu {

opacity: 0;

transition: all 0.06s;

position: relative;

z-index: 0;

left: -90px;
}

.show-menu {

transition: all 0.1s;

left: -1px;
}

Cargue la biblioteca JavaScript de menu. js en la parte inferior del documento.

<script src="js/menu.js"></script>

Inicializar el menú lateral.

var init = (function(window, undefined) {


menuTrigger();


return init;
})(window);