Rockbeard

/* ===============================
 * SLIDE MENU
** =============================== */

jQuery(document).ready(function(){
	let btnOpen = jQuery('#aside-open'),
		btnClose = jQuery('#aside-close'),
		eAside = jQuery('.rosa_aside'),
		eShadow = jQuery('.shadow-aside'),
		btns = btnOpen.add(btnClose).add(eShadow),

Rockbeard

/* ASIDE
   ===== */

.u-shadow-aside {
	opacity: 0;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;

Rockbeard

<button class="btn-aside-open" id="aside-open" type="button">
	<span class="aside-open_bar"></span>
	<span class="aside-open_bar"></span>
	<span class="aside-open_bar"></span>
</button>

<div class="u-shadow-aside"></div>
<aside class="u-aside">

	<button class="btn-aside-close" id="aside-close"></button>

Rockbeard

/* ===========================
 * BASE
** =========================== */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	color: #5f646a;

Rockbeard

jQuery(document).ready(function(){
	jQuery('#humburger-icon').click(function(){

		jQuery(this).toggleClass('open');
		jQuery('.header_nav').toggleClass('s-show');

	});
});

Rockbeard

.header_nav .nav_item {
	position: relative;
	margin-right: 15px;
	display: inline-block;
}

.header_nav .nav_item:last-child {
	margin-right: 0;
}

Rockbeard

<nav class="header_nav">
  <ul>
    <li class="nav_item">
      <span class="item_name">item</span>
      <ul class="item_dropdawn">
        <li class="dropdawn_item"><a href="#">item dropdawn</a></li>
      </ul>
    </li>
  </ul>
</nav>

Rockbeard

jQuery(window).on('load', function(){
	jQuery('#preloader').hide();
});

Rockbeard

.preloader {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 2;
}

Rockbeard

<div class="preloader" id="preloader">
	<span class="spinner"><img src="#" alt=""></span>
</div>