Skip to content

Instantly share code, notes, and snippets.

<div class="preloader" id="preloader">
<span class="spinner"><img src="#" alt=""></span>
</div>
.preloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 2;
}
jQuery(window).on('load', function(){
jQuery('#preloader').hide();
});
<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>
.header_nav .nav_item {
position: relative;
margin-right: 15px;
display: inline-block;
}
.header_nav .nav_item:last-child {
margin-right: 0;
}
jQuery(document).ready(function(){
jQuery('#humburger-icon').click(function(){
jQuery(this).toggleClass('open');
jQuery('.header_nav').toggleClass('s-show');
});
});
@Rockbeard
Rockbeard / base.css
Last active February 11, 2018 09:17
/* ===========================
* BASE
** =========================== */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
color: #5f646a;
<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>
/* ASIDE
===== */
.u-shadow-aside {
opacity: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
/* ===============================
* 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),