<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,600,700">
<div id="container">
<header>
<div class="wrapper cf">
<nav id="main-nav">
<ul class="first-nav">
<li class="search">
<div class="form-container">
<form class="search-form" action="https://www.google.com/search" target="_blank" method="get">
<input type="text" name="q" placeholder="Search..." autocomplete="off">
</form>
</div>
</li>
<li class="cryptocurrency">
<a href="https://www.google.com/search?q=Crypto" target="_blank">Cryptocurrency</a>
<ul>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Ethereum</a></li>
<li class="add"><a href="#" data-nav-close="false" data-add="['Litecoin','Dogecoin','Bitcoin Cash','ZCash']">Add Coin</a></li>
</ul>
</li>
</ul>
<ul class="second-nav">
<li class="devices">
<span>Devices</span>
<ul>
<li class="mobile">
<a href="#">Mobile Phones</a>
<ul>
<li><a href="#">Super Smart Phone</a></li>
<li><a href="#">Thin Magic Mobile</a></li>
<li><a href="#">Performance Crusher</a></li>
<li><a href="#">Futuristic Experience</a></li>
</ul>
</li>
<li class="television">
<a href="#">Televisions</a>
<div class="subnav-container">
<ul>
<li><a href="#">Flat Superscreen</a></li>
<li><a href="#">Gigantic LED</a></li>
<li><a href="#">Power Eater</a></li>
<li><a href="#">3D Experience</a></li>
<li><a href="#">Classic Comfort</a></li>
</ul>
</div>
</li>
<li class="camera">
<a href="#">Cameras</a>
<ul>
<li><a href="#">Smart Shot</a></li>
<li><a href="#">Power Shooter</a></li>
<li><a href="#">Easy Photo Maker</a></li>
<li><a href="#">Super Pixel</a></li>
</ul>
</li>
</ul>
</li>
<li class="magazines active">
<a href="#">Magazines</a>
<ul>
<li><a href="#">National Geographic</a></li>
<li><a href="#">Scientific American</a></li>
<li><a href="#">The Spectator</a></li>
<li><a href="#">The Rambler</a></li>
<li><a href="#">Physics World</a></li>
<li><a href="#">Popular Science</a></li>
<li><a href="#">Popular Mechanics</a></li>
<li><a href="#">Sky & Telescope</a></li>
<li><a href="#">Discover</a></li>
<li><a href="#">New Scientist</a></li>
<li><a href="#">Psychology Today</a></li>
<li><a href="#">Wired</a></li>
</ul>
</li>
<li class="store">
<a href="#">Store</a>
<ul>
<li>
<a href="#">Clothes</a>
<ul>
<li>
<a href="#">Women's Clothing</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sale</a></li>
</ul>
</li>
<li>
<a href="#">Men's Clothing</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sale</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li class="collections"><a href="#">Collections</a></li>
<li class="credits"><a href="#">Credits</a></li>
<li class="add"><a href="#" data-nav-close="false" data-add="['Charts', 'Logs', 'Tests', 'Profile']">Add Item</a></li>
</ul>
<ul class="bottom-nav">
<li class="github">
<a href="https://github.com/somewebmedia" target="_blank">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</li>
<li class="email">
<a href="mailto:hi@somewebmedia.com" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</li>
<li class="ko-fi">
<a href="https://ko-fi.com/somewebguy" target="_blank">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
</a>
</li>
</ul>
</nav>
<h1>HC Off-canvas Nav</h1>
<h2>jQuery plugin for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements.</h2>
<a class="toggle">
<span></span>
Toggle Navigation
</a>
</div>
</header>
<main>
<div class="wrapper">
<div class="content">
<h4>Chose position</h4>
<div class="actions position">
<div><a href="#" data-demo="{position:'left'}" class="button active">Left</a></div>
<div><a href="#" data-demo="{position:'right'}" class="button">Right</a></div>
<div><a href="#" data-demo="{position:'top'}" class="button">Top</a></div>
<div><a href="#" data-demo="{position:'bottom'}" class="button">Bottom</a></div>
</div>
<h4>Levels open</h4>
<div class="actions levels">
<div><a href="#" data-demo="{levelOpen:'overlap', levelSpacing:40}" class="button active">Overlap levels</a></div>
<div><a href="#" data-demo="{levelOpen:'expand', levelSpacing:25}" class="button">Expand levels</a></div>
<div><a href="#" data-demo="{levelOpen:false, levelSpacing:25}" class="button">Unfolded levels</a></div>
</div>
<h4>Additional options</h4>
<div class="actions checkboxes">
<div><label><input type="checkbox" data-demo="{closeOnClick:true}" checked><span></span>Close on click</label></div>
<div><label><input type="checkbox" data-demo="{disableBody:true}" checked><span></span>Disable body</label></div>
<div><label><input type="checkbox" data-demo="{pushContent:'#container'}" checked><span></span>Push content</label></div>
<div><label><input type="checkbox" data-demo="{navTitle: 'All Categories', levelTitles:true}" checked><span></span>Main nav and level titles</label></div>
<div><label><input type="checkbox" data-demo="{insertClose:true, insertBack:true}" checked><span></span>Close and back buttons</label></div>
</div>
</div>
</div>
</main>
<footer>
<div class="wrapper">
<a href="#" target="_blank" class="swm" title="Some Web Media">
<svg xmlns="http://www.w3.org/2000/svg" height="17" viewBox="0 0 430.24 46">
<path class="l-1" d="M0,46H44L92,0H48Z"/>
<path class="l-2" d="M237.24,46h-44l-26-24.92L141.24,46h-44l-24-23,22-21.08,24,23L145.24,0h44l26,24.92L241.24,0h44Z"/>
<path class="l-3" d="M386.24,46l-26-24.92L334.24,46h-44l-24-23,22-21.08,24,23L338.24,0h44l48,46h-44Z"/>
</svg>
</a>
</div>
</footer>
</div>
html.hc-nav-yscroll {
overflow-y: scroll
}
body.hc-nav-open {
overflow: visible;
position: fixed;
width: 100%;
min-height: 100%
}
.hc-offcanvas-nav {
visibility: hidden;
display: none;
position: fixed;
top: 0;
height: 100%;
z-index: 9999
}
.hc-offcanvas-nav.is-ios * {
cursor: pointer !important
}
.hc-offcanvas-nav .nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 280px;
height: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.hc-offcanvas-nav .nav-wrapper {
width: 100%;
height: 100%;
max-height: 100vh;
-ms-scroll-chaining: none;
overscroll-behavior: none;
box-sizing: border-box
}
.hc-offcanvas-nav .nav-content {
height: 100%;
max-height: 100vh
}
.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
overflow: scroll;
overflow-x: visible;
overflow-y: auto;
box-sizing: border-box
}
.hc-offcanvas-nav ul {
list-style: none;
margin: 0;
padding: 0
}
.hc-offcanvas-nav li {
position: relative;
display: block
}
.hc-offcanvas-nav li.level-open>.nav-wrapper {
visibility: visible
}
.hc-offcanvas-nav input[type="checkbox"] {
display: none
}
.hc-offcanvas-nav label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
cursor: pointer
}
.hc-offcanvas-nav a {
position: relative;
display: block;
box-sizing: border-box;
cursor: pointer
}
.hc-offcanvas-nav a,
.hc-offcanvas-nav a:hover {
text-decoration: none
}
.hc-offcanvas-nav .nav-item {
position: relative;
display: block;
box-sizing: border-box
}
.hc-offcanvas-nav.disable-body::after,
.hc-offcanvas-nav .nav-wrapper::after {
content: '';
position: fixed;
z-index: 9990;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-ms-scroll-chaining: none;
overscroll-behavior: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s ease .4s, opacity .4s ease
}
.hc-offcanvas-nav.disable-body.nav-open::after,
.hc-offcanvas-nav .sub-level-open::after {
visibility: visible;
opacity: 1;
transition-delay: .05s
}
.hc-offcanvas-nav:not(.nav-open)::after {
pointer-events: none
}
.hc-offcanvas-nav.nav-levels-expand .nav-content {
overflow: scroll;
overflow-x: visible;
overflow-y: auto;
box-sizing: border-box
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper::after {
display: none
}
.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper {
min-width: 0;
max-height: 0;
overflow: hidden;
transition: height 0s ease .4s
}
.hc-offcanvas-nav.nav-levels-expand .level-open>.nav-wrapper {
max-height: none
}
.hc-offcanvas-nav.nav-levels-overlap .nav-content {
overflow: scroll;
overflow-x: visible;
overflow-y: auto;
box-sizing: border-box
}
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper {
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
visibility: hidden;
transition: visibility 0s ease .4s, -webkit-transform .4s ease;
transition: visibility 0s ease .4s, transform .4s ease;
transition: visibility 0s ease .4s, transform .4s ease, -webkit-transform .4s ease
}
.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent {
position: static
}
.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.hc-offcanvas-nav.nav-position-left {
left: 0
}
.hc-offcanvas-nav.nav-position-left .nav-container {
left: 0;
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0)
}
.hc-offcanvas-nav.nav-position-left.nav-levels-overlap li .nav-wrapper {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
.hc-offcanvas-nav.nav-position-right {
right: 0
}
.hc-offcanvas-nav.nav-position-right .nav-container {
right: 0;
-webkit-transform: translate3d(280px, 0, 0);
transform: translate3d(280px, 0, 0)
}
.hc-offcanvas-nav.nav-position-right.nav-levels-overlap li .nav-wrapper {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
.hc-offcanvas-nav.nav-position-top {
top: 0
}
.hc-offcanvas-nav.nav-position-top .nav-container {
top: 0;
width: 100%;
height: auto;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
.hc-offcanvas-nav.nav-position-top.nav-levels-overlap li .nav-wrapper {
left: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
.hc-offcanvas-nav.nav-position-bottom {
top: auto;
bottom: 0
}
.hc-offcanvas-nav.nav-position-bottom .nav-container {
top: auto;
bottom: 0;
width: 100%;
height: auto;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.hc-offcanvas-nav.nav-position-bottom.nav-levels-overlap li .nav-wrapper {
left: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.hc-offcanvas-nav.nav-open[class*='hc-nav-'] div.nav-container {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.hc-nav-trigger {
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 30px;
min-height: 24px
}
.hc-nav-trigger span {
width: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
.hc-nav-trigger span,
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
display: block;
position: absolute;
left: 0;
height: 4px;
background: #34495E;
transition: all .2s ease
}
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
content: '';
width: 100%
}
.hc-nav-trigger span::before {
top: -10px
}
.hc-nav-trigger span::after {
bottom: -10px
}
.hc-nav-trigger.toggle-open span {
background: rgba(0, 0, 0, 0);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.hc-nav-trigger.toggle-open span::before {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
.hc-nav-trigger.toggle-open span::after {
-webkit-transform: rotate(-90deg) translate3d(10px, 0, 0);
transform: rotate(-90deg) translate3d(10px, 0, 0)
}
.hc-offcanvas-nav::after,
.hc-offcanvas-nav .nav-wrapper::after {
background: rgba(0, 0, 0, 0.3)
}
.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
background: #336ca6
}
.hc-offcanvas-nav h2 {
font-size: 19px;
font-weight: normal;
text-align: left;
padding: 20px 17px;
color: #1b3958
}
.hc-offcanvas-nav a,
.hc-offcanvas-nav .nav-item {
padding: 14px 17px;
font-size: 15px;
color: #fff;
z-index: 1;
background: rgba(0, 0, 0, 0);
border-bottom: 1px solid #2c5d8f
}
.hc-offcanvas-nav:not(.touch-device) a:hover {
background: #31679e
}
.hc-offcanvas-nav ul:first-of-type:not(:first-child)>li:first-child:not(.nav-back):not(.nav-close)>a {
border-top: 1px solid #2c5d8f;
margin-top: -1px
}
.hc-offcanvas-nav li {
text-align: left
}
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav li.nav-back a {
background: #2c5d8f;
border-top: 1px solid #295887;
border-bottom: 1px solid #295887
}
.hc-offcanvas-nav li.nav-close a:hover,
.hc-offcanvas-nav li.nav-back a:hover {
background: #2b5c8d
}
.hc-offcanvas-nav li.nav-close:not(:first-child) a,
.hc-offcanvas-nav li.nav-back:not(:first-child) a {
margin-top: -1px
}
.hc-offcanvas-nav li.nav-parent .nav-item {
padding-right: 58px
}
.hc-offcanvas-nav li.nav-close span,
.hc-offcanvas-nav li.nav-parent span.nav-next,
.hc-offcanvas-nav li.nav-back span {
width: 45px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
text-align: center;
cursor: pointer;
transition: background .2s ease
}
.hc-offcanvas-nav li.nav-close span::before,
.hc-offcanvas-nav li.nav-close span::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
border-top: 2px solid #fff;
border-left: 2px solid #fff
}
.hc-offcanvas-nav li.nav-close span::before {
margin-left: -9px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.hc-offcanvas-nav li.nav-close span::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.hc-offcanvas-nav a[href]:not([href="#"])>span.nav-next {
border-left: 1px solid #2c5d8f
}
.hc-offcanvas-nav span.nav-next::before,
.hc-offcanvas-nav li.nav-back span::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-left: -2px;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
-webkit-transform-origin: center;
transform-origin: center
}
.hc-offcanvas-nav span.nav-next::before {
-webkit-transform: translate(-50%, -50%) rotate(135deg);
transform: translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav li.nav-back span::before {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.nav-position-left.nav-open .nav-wrapper {
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.nav-position-right.nav-open .nav-wrapper {
box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.nav-position-right span.nav-next::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.nav-position-right li.nav-back span::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(135deg);
transform: translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav.nav-position-top.nav-open .nav-wrapper {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.nav-position-top span.nav-next::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
transform: translate(-50%, -50%) rotate(-135deg)
}
.hc-offcanvas-nav.nav-position-top li.nav-back span::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-position-bottom.nav-open .nav-wrapper {
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.nav-position-bottom span.nav-next::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-position-bottom li.nav-back span::before {
margin-left: 0;
margin-right: -2px;
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
transform: translate(-50%, -50%) rotate(-135deg)
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul .nav-wrapper,
.hc-offcanvas-nav.nav-levels-none .nav-container ul .nav-wrapper {
box-shadow: none;
background: transparent
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul h2,
.hc-offcanvas-nav.nav-levels-none .nav-container ul h2 {
display: none
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul ul .nav-item,
.hc-offcanvas-nav.nav-levels-none .nav-container ul ul .nav-item {
font-size: 14px
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li,
.hc-offcanvas-nav.nav-levels-none .nav-container li {
transition: background .3s ease
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open {
background: #2e6296
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a {
border-bottom: 1px solid #295887
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a:hover,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a:hover {
background: #2f649a
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item .nav-next::before,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item .nav-next::before {
margin-top: 2px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-levels-expand .nav-container span.nav-next::before,
.hc-offcanvas-nav.nav-levels-none .nav-container span.nav-next::before {
margin-top: -2px;
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
transform: translate(-50%, -50%) rotate(-135deg)
}
html,
body,
div,
span,
header,
ul,
li,
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
html {
height: 100%
}
body {
font-family: 'Raleway', sans-serif;
text-align: center;
color: #fffce1
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0
}
em {
font-style: italic
}
strong {
font-weight: 600
}
ol,
ul {
list-style: none
}
.cf::before,
.cf::after {
content: '';
display: block;
height: 0;
overflow: hidden
}
.cf::after {
clear: both
}
#container {
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100%;
background: linear-gradient(-134deg, #517FA4 0%, #243949 100%)
}
.wrapper {
max-width: 800px;
margin: 0 auto;
padding: 0 20px
}
#main-nav {
display: none
}
header {
position: relative;
padding: 50px 0 20px
}
header h1 {
font-size: 50px;
font-weight: 700;
text-align: center;
letter-spacing: 5px;
padding-bottom: 8px
}
header h2 {
max-width: 680px;
margin: auto;
font-size: 20px;
font-weight: 200;
line-height: 1.4;
text-align: center;
letter-spacing: 1px;
padding-bottom: 30px
}
header .git {
display: inline-block;
text-decoration: none;
color: #fff;
border-radius: 4px;
padding: 4px 10px 4px 0;
font-size: 15px;
font-weight: 400;
color: #fffce1;
background: #54b9cb;
transition: background .15s ease-in-out
}
header .git:hover {
background: #4CA8B9
}
header .git:hover svg {
border-color: #54b9cb
}
header .git svg {
width: 15px;
height: 15px;
fill: #fffce1;
position: relative;
top: 2px;
padding: 0 10px;
margin-right: 10px;
border-right: 1px solid #4daabb;
transition: border-color .15s ease-in-out
}
header .ver {
padding-top: 15px;
font-weight: 200;
color: #dab977
}
header .ver span {
color: #fffce1
}
header .toggle {
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
position: relative;
width: auto;
top: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 55px
}
header .toggle span {
width: 35px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
header .toggle span,
header .toggle span::before,
header .toggle span::after {
display: block;
position: absolute;
left: 0;
height: 4px;
background: #182631;
transition: all .25s ease
}
header .toggle span::before,
header .toggle span::after {
content: '';
width: 100%
}
header .toggle span::before {
top: -10px
}
header .toggle span::after {
bottom: -10px
}
header .toggle.toggle-open span {
background: rgba(0, 0, 0, 0);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
header .toggle.toggle-open span::before {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
header .toggle.toggle-open span::after {
-webkit-transform: rotate(-90deg) translate3d(10px, 0, 0);
transform: rotate(-90deg) translate3d(10px, 0, 0)
}
header .toggle:hover span,
header .toggle:hover span::before,
header .toggle:hover span::after {
background: #dab977
}
header .toggle div {
display: inline-block;
margin-right: 15px
}
footer {
padding-bottom: 40px
}
footer .swm {
display: inline-block;
padding: 0 15px
}
footer .swm svg {
display: block;
width: auto;
height: 17px;
margin-top: 22px
}
footer .swm svg path {
transition: fill .1s ease
}
footer .swm svg .l-1 {
fill: #4fb5e1
}
footer .swm svg .l-2 {
fill: #f2c053
}
footer .swm svg .l-3 {
fill: #a7ce38
}
footer .swm:not(:hover) svg .l-1 {
fill: #466e8d
}
footer .swm:not(:hover) svg .l-2 {
fill: #9db9cf
}
footer .swm:not(:hover) svg .l-3 {
fill: #5989ad
}
main {
flex: 1 0 auto;
padding-bottom: 30px;
text-align: left
}
main .content {
border-top: 1px solid rgba(255, 255, 255, 0.1)
}
main h4 {
font-size: 15px;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
margin: 20px 0
}
main h4:first-child {
margin-top: 30px
}
main .actions {
margin: 0 -15px;
text-align: center
}
main .actions.checkboxes {
text-align: left;
padding-top: 8px
}
main .actions.checkboxes label {
font-size: 14px;
text-transform: uppercase;
cursor: pointer
}
main .actions.checkboxes label input {
display: none
}
main .actions.checkboxes label input:checked~span {
background: #dab977
}
main .actions.checkboxes label input:checked~span::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -1px;
border: solid #243949;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px 2px;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg)
}
main .actions.checkboxes label span {
display: inline-block;
position: relative;
top: -1px;
width: 22px;
height: 22px;
background: #fffce1;
margin-right: 12px;
vertical-align: top;
transition: all .1s ease
}
main .actions div {
padding: 0 15px 20px;
box-sizing: border-box
}
@media screen and (min-width: 800px) {
main .actions {
display: flex;
flex-wrap: wrap
}
main .actions div {
float: left;
flex: 1 1 33.33%;
max-width: 33.33%
}
main .actions.position div {
float: left;
flex: 1 1 25%;
max-width: 25%
}
}
main .button {
position: relative;
display: block;
padding: 18px 30px 16px;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 1px;
text-decoration: none;
color: #243949;
cursor: pointer;
background: #fffce1;
border-radius: 30px/80px;
transition: all .1s ease
}
main .button:not(.active):hover {
color: #d5af63
}
main .button.active {
background: #dab977
}
.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
padding-bottom: 41px
}
.hc-offcanvas-nav h2 {
font-weight: 400
}
.hc-offcanvas-nav a {
font-size: 16px
}
.hc-offcanvas-nav li.search .nav-item {
padding-top: 0
}
.hc-offcanvas-nav li.search input[type="text"] {
width: 100%;
box-sizing: border-box;
border: none;
border-radius: 3px;
font-size: 14px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
padding: 5px 10px;
box-shadow: none;
outline: none
}
.hc-offcanvas-nav li.search input[type="text"]::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.8)
}
.hc-offcanvas-nav li.search input[type="text"]:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8)
}
.hc-offcanvas-nav li.search input[type="text"]::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8)
}
.hc-offcanvas-nav li.search input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.8)
}
.hc-offcanvas-nav li.add>a::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'add'
}
.hc-offcanvas-nav li.new>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'fiber_new'
}
.hc-offcanvas-nav li.cryptocurrency>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'local_atm'
}
.hc-offcanvas-nav li.devices>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'devices'
}
.hc-offcanvas-nav li.mobile>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'phone_android'
}
.hc-offcanvas-nav li.television>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'desktop_windows'
}
.hc-offcanvas-nav li.camera>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'camera_alt'
}
.hc-offcanvas-nav li.magazines>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'import_contacts'
}
.hc-offcanvas-nav li.store>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'store'
}
.hc-offcanvas-nav li.collections>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'collections'
}
.hc-offcanvas-nav li.credits>.nav-item::before {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
text-indent: 0;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 15px;
font-size: 19px;
vertical-align: top;
content: 'credit_card'
}
.hc-offcanvas-nav ul.bottom-nav {
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
border-top: 1px solid #2c5d8f
}
.hc-offcanvas-nav ul.bottom-nav li {
flex: auto
}
.hc-offcanvas-nav ul.bottom-nav li a {
padding: 10px;
text-align: center;
height: 100%;
border-bottom: none
}
.hc-offcanvas-nav ul.bottom-nav li svg {
fill: #fff;
display: inline-block;
vertical-align: middle
}
.hc-offcanvas-nav ul.bottom-nav li.github svg {
width: 17px;
height: 17px
}
.hc-offcanvas-nav ul.bottom-nav li.ko-fi svg {
width: 21px;
height: 21px
}
.hc-offcanvas-nav ul.bottom-nav li.email svg {
width: 19px;
height: 19px
}
/*
* HC Off-canvas Nav
* ===================
* Version: 3.4.1
* Author: Some Web Media
* Author URL: http://somewebmedia.com
* Plugin URL: https://github.com/somewebmedia/hc-offcanvas-nav
* Description: jQuery plugin for creating off-canvas multi-level navigations
* License: MIT
*/
"use strict";
function _typeof(n) {
return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(n) {
return typeof n
} : function(n) {
return n && "function" == typeof Symbol && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n
})(n)
}! function(_, n) {
var c, L = n.document,
Q = _(L.getElementsByTagName("html")[0]),
U = (_(L), (/iPad|iPhone|iPod/.test(navigator.userAgent) || !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) && !n.MSStream),
z = "ontouchstart" in n || navigator.maxTouchPoints || n.DocumentTouch && L instanceof DocumentTouch,
V = function(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
},
G = function(n) {
return n.stopPropagation()
},
I = function(e) {
return function(n) {
n.preventDefault(), n.stopPropagation(), "function" == typeof e && e()
}
},
J = function(n, e, t) {
var a = t.children(),
o = a.length,
c = -1 < e ? Math.max(0, Math.min(e - 1, o)) : Math.max(0, Math.min(o + e + 1, o));
0 === c ? t.prepend(n) : a.eq(c - 1).after(n)
},
K = function(n) {
return -1 !== ["left", "right"].indexOf(n) ? "x" : "y"
},
R = (c = function(n) {
var e = ["Webkit", "Moz", "Ms", "O"],
t = (L.body || L.documentElement).style,
a = n.charAt(0).toUpperCase() + n.slice(1);
if (void 0 !== t[n]) return n;
for (var o = 0; o < e.length; o++)
if (void 0 !== t[e[o] + a]) return e[o] + a;
return !1
}("transform"), function(n, e, t) {
if (c)
if (0 === e) n.css(c, "");
else if ("x" === K(t)) {
var a = "left" === t ? e : -e;
n.css(c, a ? "translate3d(".concat(a, "px,0,0)") : "")
} else {
var o = "top" === t ? e : -e;
n.css(c, o ? "translate3d(0,".concat(o, "px,0)") : "")
} else n.css(t, e)
}),
e = function(n, e, t) {
console.warn("%cHC Off-canvas Nav:%c " + t + "%c '" + n + "'%c is now deprecated and will be removed. Use%c '" + e + "'%c instead.", "color: #fa253b", "color: default", "color: #5595c6", "color: default", "color: #5595c6", "color: default")
},
X = 0;
_.fn.extend({
hcOffcanvasNav: function() {
var n = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
if (!this.length) return this;
var A = this,
D = _(L.body);
n.side && (e("side", "position", "option"), n.position = n.side);
var H = _.extend({}, {
maxWidth: 1024,
pushContent: !1,
position: "left",
levelOpen: "overlap",
levelSpacing: 40,
levelTitles: !1,
navTitle: null,
navClass: "",
disableBody: !0,
closeOnClick: !0,
customToggle: null,
insertClose: !0,
insertBack: !0,
labelClose: "Close",
labelBack: "Back"
}, n),
E = [],
$ = "nav-open",
F = function(n) {
if (!E.length) return !1;
var e = !1;
"string" == typeof n && (n = [n]);
for (var t = n.length, a = 0; a < t; a++) - 1 !== E.indexOf(n[a]) && (e = !0);
return e
};
return this.each(function() {
var e = _(this);
if (e.find("ul").addBack("ul").length) {
var n, o, c, i, a, s, b = "hc-nav-".concat(++X),
l = (n = "hc-offcanvas-".concat(X, "-style"), o = _('<style id="'.concat(n, '">')).appendTo(_("head")), c = {}, i = {}, a = function(n) {
return ";" !== n.substr(-1) && (n += ";" !== n.substr(-1) ? ";" : ""), n
}, {
reset: function() {
c = {}, i = {}
},
add: function(n, e, t) {
n = n.trim(), e = e.trim(), t ? (t = t.trim(), i[t] = i[t] || {}, i[t][n] = a(e)) : c[n] = a(e)
},
remove: function(n, e) {
n = n.trim(), e ? (e = e.trim(), void 0 !== i[e][n] && delete i[e][n]) : void 0 !== c[n] && delete c[n]
},
insert: function() {
var n = "";
for (var e in i) {
for (var t in n += "@media screen and (".concat(e, ") {\n"), i[e]) n += "".concat(t, " { ").concat(i[e][t], " }\n");
n += "}\n"
}
for (var a in c) n += "".concat(a, " { ").concat(c[a], " }\n");
o.html(n)
}
});
e.addClass("hc-nav ".concat(b));
var t, r, p, d = _("<nav>").on("click", G),
v = _('<div class="nav-container">').appendTo(d),
f = null,
u = {},
h = !1,
m = 0,
g = 0,
y = 0,
C = null,
x = {},
k = [];
H.customToggle ? s = _(H.customToggle).addClass("hc-nav-trigger ".concat(b)).on("click", q) : (s = _('<a class="hc-nav-trigger '.concat(b, '"><span></span></a>')).on("click", q), e.after(s));
var O = function() {
v.css("transition", "none"), g = v.outerWidth(), y = v.outerHeight(), l.add(".hc-offcanvas-nav.".concat(b, ".nav-position-left .nav-container"), "transform: translate3d(-".concat(g, "px, 0, 0)")), l.add(".hc-offcanvas-nav.".concat(b, ".nav-position-right .nav-container"), "transform: translate3d(".concat(g, "px, 0, 0)")), l.add(".hc-offcanvas-nav.".concat(b, ".nav-position-top .nav-container"), "transform: translate3d(0, -".concat(y, "px, 0)")), l.add(".hc-offcanvas-nav.".concat(b, ".nav-position-bottom .nav-container"), "transform: translate3d(0, ".concat(y, "px, 0)")), l.insert(), v.css("transition", ""), T()
},
T = function() {
var n;
t = v.css("transition-property").split(",")[0], n = v.css("transition-duration").split(",")[0], r = parseFloat(n) * (/\ds$/.test(n) ? 1e3 : 1), p = v.css("transition-timing-function").split(",")[0], H.pushContent && f && t && l.add(function n(e) {
return "string" == typeof e ? e : e.attr("id") ? "#" + e.attr("id") : e.attr("class") ? e.prop("tagName").toLowerCase() + "." + e.attr("class").replace(/\s+/g, ".") : n(e.parent()) + " " + e.prop("tagName").toLowerCase()
}(H.pushContent), "transition: ".concat(t, " ").concat(r, "ms ").concat(p)), l.insert()
},
S = function(n) {
var e = s.css("display"),
t = !!H.maxWidth && "max-width: ".concat(H.maxWidth - 1, "px");
F("maxWidth") && l.reset(), l.add(".hc-offcanvas-nav.".concat(b), "display: block", t), l.add(".hc-nav-trigger.".concat(b), "display: ".concat(e && "none" !== e ? e : "block"), t), l.add(".hc-nav.".concat(b), "display: none", t), l.add(".hc-offcanvas-nav.".concat(b, ".nav-levels-overlap.nav-position-left li.level-open > .nav-wrapper"), "transform: translate3d(-".concat(H.levelSpacing, "px,0,0)"), t), l.add(".hc-offcanvas-nav.".concat(b, ".nav-levels-overlap.nav-position-right li.level-open > .nav-wrapper"), "transform: translate3d(".concat(H.levelSpacing, "px,0,0)"), t), l.add(".hc-offcanvas-nav.".concat(b, ".nav-levels-overlap.nav-position-top li.level-open > .nav-wrapper"), "transform: translate3d(0,-".concat(H.levelSpacing, "px,0)"), t), l.add(".hc-offcanvas-nav.".concat(b, ".nav-levels-overlap.nav-position-bottom li.level-open > .nav-wrapper"), "transform: translate3d(0,".concat(H.levelSpacing, "px,0)"), t), l.insert(), (!n || n && F("pushContent")) && ("string" == typeof H.pushContent ? (f = _(H.pushContent)).length || (f = null) : f = H.pushContent instanceof jQuery ? H.pushContent : null), v.css("transition", "none");
var a = d.hasClass($),
o = ["hc-offcanvas-nav", H.navClass || "", b, H.navClass || "", "nav-levels-" + H.levelOpen || "none", "nav-position-" + H.position, H.disableBody ? "disable-body" : "", U ? "is-ios" : "", z ? "touch-device" : "", a ? $ : ""].join(" ");
d.off("click").attr("class", "").addClass(o), H.disableBody && d.on("click", j), n ? O() : setTimeout(O, 1)
},
w = function() {
var n;
u = function c(n) {
var e = [];
return n.each(function() {
var n = _(this),
o = {
classes: n.attr("class"),
items: []
};
n.children("li").each(function() {
var n = _(this),
e = n.children().filter(function() {
var n = _(this);
return n.is(":not(ul)") && !n.find("ul").length
}).add(n.contents().filter(function() {
return 3 === this.nodeType && this.nodeValue.trim()
})),
t = n.find("ul"),
a = t.first().add(t.first().siblings("ul"));
a.length && !n.data("hc-uniqid") && n.data("hc-uniqid", Math.random().toString(36).substr(2) + "-" + Math.random().toString(36).substr(2)), o.items.push({
uniqid: n.data("hc-uniqid"),
classes: n.attr("class"),
$content: e,
subnav: a.length ? c(a) : []
})
}), e.push(o)
}), e
}((n = e.find("ul").addBack("ul")).first().add(n.first().siblings("ul")))
},
B = function(n) {
n && (v.empty(), x = {}),
function h(n, e, m, t, a) {
var g = _('<div class="nav-wrapper nav-wrapper-'.concat(m, '">')).appendTo(e).on("click", G),
o = _('<div class="nav-content">').appendTo(g);
if (t && o.prepend("<h2>".concat(t, "</h2>")), _.each(n, function(n, e) {
var u = _("<ul>").addClass(e.classes).appendTo(o);
_.each(e.items, function(n, e) {
var t = e.$content,
a = t.find("a").addBack("a"),
o = a.length ? a.clone(!0, !0).addClass("nav-item") : _('<span class="nav-item">').append(t.clone(!0, !0)).on("click", G);
a.length && o.on("click", function(n) {
n.stopPropagation(), a[0].click()
}), "#" === o.attr("href") && o.on("click", function(n) {
n.preventDefault()
}), H.closeOnClick && (!1 === H.levelOpen || "none" === H.levelOpen ? o.filter("a").filter('[data-nav-close!="false"]').on("click", j) : o.filter("a").filter('[data-nav-close!="false"]').filter(function() {
var n = _(this);
return !e.subnav.length || n.attr("href") && "#" !== n.attr("href").charAt(0)
}).on("click", j));
var c = _("<li>").addClass(e.classes).append(o);
if (u.append(c), H.levelSpacing && ("expand" === H.levelOpen || !1 === H.levelOpen || "none" === H.levelOpen)) {
var i = H.levelSpacing * m;
i && u.css("text-indent", "".concat(i, "px"))
}
if (e.subnav.length) {
var s = m + 1,
l = e.uniqid,
r = "";
if (x[s] || (x[s] = 0), c.addClass("nav-parent"), !1 !== H.levelOpen && "none" !== H.levelOpen) {
var p = x[s],
d = _('<span class="nav-next">').appendTo(o),
v = _('<label for="'.concat(b, "-").concat(s, "-").concat(p, '">')).on("click", G),
f = _('<input type="checkbox" id="'.concat(b, "-").concat(s, "-").concat(p, '">')).attr("data-level", s).attr("data-index", p).val(l).on("click", G).on("change", M); - 1 !== k.indexOf(l) && (g.addClass("sub-level-open").on("click", function() {
return W(s, p)
}), c.addClass("level-open"), f.prop("checked", !0)), c.prepend(f), r = !0 === H.levelTitles ? t.text().trim() : "", o.attr("href") && "#" !== o.attr("href").charAt(0) ? d.append(v) : o.prepend(v.on("click", function() {
_(this).parent().trigger("click")
}))
}
x[s]++, h(e.subnav, c, s, r, x[s] - 1)
}
})
}), m && void 0 !== a && !1 !== H.insertBack && "overlap" === H.levelOpen) {
var c = o.children("ul"),
i = _('<li class="nav-back"><a href="#">'.concat(H.labelBack || "", "<span></span></a></li>"));
i.children("a").on("click", I(function() {
return W(m, a)
})), !0 === H.insertBack ? c.first().prepend(i) : V(H.insertBack) && J(i, H.insertBack, c)
}
if (0 === m && !1 !== H.insertClose) {
var s = o.children("ul"),
l = _('<li class="nav-close"><a href="#">'.concat(H.labelClose || "", "<span></span></a></li>"));
l.children("a").on("click", I(j)), !0 === H.insertClose ? s.first().prepend(l) : V(H.insertClose) && J(l, H.insertClose, s.first().add(s.first().siblings("ul")))
}
}(u, v, 0, H.navTitle)
};
S(), w(), B(), D.append(d);
var P = function(n, e, t) {
var a = _("#".concat(b, "-").concat(n, "-").concat(e)),
o = a.val(),
c = a.parent("li"),
i = c.closest(".nav-wrapper");
if (a.prop("checked", !1), i.removeClass("sub-level-open"), c.removeClass("level-open"), -1 !== k.indexOf(o) && k.splice(k.indexOf(o), 1), t && "overlap" === H.levelOpen && (i.off("click").on("click", G), R(v, (n - 1) * H.levelSpacing, H.position), f)) {
var s = "x" === K(H.position) ? g : y;
R(f, s + (n - 1) * H.levelSpacing, H.position)
}
};
A.settings = function(n) {
return n ? H[n] : Object.assign({}, H)
}, A.isOpen = function() {
return d.hasClass($)
}, A.open = N, A.close = j, A.update = function(n, e) {
if (E = [], "object" === _typeof(n)) {
for (var t in n) H[t] !== n[t] && E.push(t);
H = _.extend({}, H, n), S(!0), B(!0)
}(!0 === n || e) && (S(!0), w(), B(!0))
}
} else console.error("%c! HC Offcanvas Nav:%c Menu must contain <ul> element.", "color: #fa253b", "color: default");
function M() {
var n = _(this),
e = Number(n.attr("data-level")),
t = Number(n.attr("data-index"));
n.prop("checked") ? function(n, e) {
var t = _("#".concat(b, "-").concat(n, "-").concat(e)),
a = t.val(),
o = t.parent("li"),
c = o.closest(".nav-wrapper");
if (c.addClass("sub-level-open"), o.addClass("level-open"), -1 === k.indexOf(a) && k.push(a), "overlap" === H.levelOpen && (c.on("click", function() {
return W(n, e)
}), R(v, n * H.levelSpacing, H.position), f)) {
var i = "x" === K(H.position) ? g : y;
R(f, i + n * H.levelSpacing, H.position)
}
}(e, t) : W(e, t)
}
function N() {
if (h = !0, d.css("visibility", "visible").addClass($), s.addClass("toggle-open"), "expand" === H.levelOpen && C && clearTimeout(C), H.disableBody && (m = Q.scrollTop() || D.scrollTop(), L.documentElement.scrollHeight > L.documentElement.clientHeight && Q.addClass("hc-nav-yscroll"), D.addClass("hc-nav-open"), m && D.css("top", -m)), f) {
var n = "x" === K(H.position) ? g : y;
R(f, n, H.position)
}
setTimeout(function() {
A.trigger("open", _.extend({}, H))
}, r + 1)
}
function j() {
h = !1, f && R(f, 0), d.removeClass($), v.removeAttr("style"), s.removeClass("toggle-open"), "expand" === H.levelOpen && -1 !== ["top", "bottom"].indexOf(H.position) ? W(0) : !1 !== H.levelOpen && "none" !== H.levelOpen && (C = setTimeout(function() {
W(0)
}, "expand" === H.levelOpen ? r : 0)), H.disableBody && (D.removeClass("hc-nav-open"), Q.removeClass("hc-nav-yscroll"), m && (D.css("top", "").scrollTop(m), Q.scrollTop(m), m = 0)), setTimeout(function() {
d.css("visibility", ""), A.trigger("close.$", _.extend({}, H)), A.trigger("close.once", _.extend({}, H)).off("close.once")
}, r + 1)
}
function q(n) {
n.preventDefault(), n.stopPropagation(), h ? j() : N()
}
function W(n, e) {
for (var t = n; t <= Object.keys(x).length; t++)
if (t == n && void 0 !== e) P(n, e, !0);
else
for (var a = 0; a < x[t]; a++) P(t, a, t == n)
}
})
}
})
}(jQuery, "undefined" != typeof window ? window : this);
(function($) {
var $main_nav = $('#main-nav');
var $toggle = $('.toggle');
var defaultData = {
maxWidth: false,
customToggle: $toggle,
navTitle: 'All Categories',
levelTitles: true,
pushContent: '#container',
insertClose: 2,
closeLevels: false
};
// add new items to original nav
$main_nav.find('li.add').children('a').on('click', function() {
var $this = $(this);
var $li = $this.parent();
var items = eval('(' + $this.attr('data-add') + ')');
$li.before('<li class="new"><a>'+items[0]+'</a></li>');
items.shift();
if (!items.length) {
$li.remove();
}
else {
$this.attr('data-add', JSON.stringify(items));
}
Nav.update(true);
});
// call our plugin
var Nav = $main_nav.hcOffcanvasNav(defaultData);
// demo settings update
const update = (settings) => {
if (Nav.isOpen()) {
Nav.on('close.once', function() {
Nav.update(settings);
Nav.open();
});
Nav.close();
}
else {
Nav.update(settings);
}
};
$('.actions').find('a').on('click', function(e) {
e.preventDefault();
var $this = $(this).addClass('active');
var $siblings = $this.parent().siblings().children('a').removeClass('active');
var settings = eval('(' + $this.data('demo') + ')');
update(settings);
});
$('.actions').find('input').on('change', function() {
var $this = $(this);
var settings = eval('(' + $this.data('demo') + ')');
if ($this.is(':checked')) {
update(settings);
}
else {
var removeData = {};
$.each(settings, function(index, value) {
removeData[index] = false;
});
update(removeData);
}
});
})(jQuery);
