Design updates
This commit is contained in:
parent
ac623a4eee
commit
3a7f36261d
6 changed files with 277 additions and 183 deletions
|
@ -1,79 +1,167 @@
|
|||
/*-----------------------------------------------------------------------------------
|
||||
/*
|
||||
/* Main JS
|
||||
/*
|
||||
----------------------------------------------------------------------------------- */
|
||||
|
||||
(function($) {
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
------------------------------------------------------ */
|
||||
var toggle_button = $("<a>", {
|
||||
id: "toggle-btn",
|
||||
html : "Menu",
|
||||
title: "Menu",
|
||||
href : "#" }
|
||||
);
|
||||
var nav_wrap = $('nav#nav-wrap')
|
||||
var nav = $("ul#nav");
|
||||
|
||||
/* if JS is enabled, remove the two a.mobile-btns
|
||||
and dynamically prepend a.toggle-btn to #nav-wrap */
|
||||
nav_wrap.find('a.mobile-btn').remove();
|
||||
nav_wrap.prepend(toggle_button);
|
||||
|
||||
toggle_button.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
nav.slideToggle("fast");
|
||||
});
|
||||
|
||||
if (toggle_button.is(':visible')) nav.addClass('mobile');
|
||||
$(window).resize(function(){
|
||||
if (toggle_button.is(':visible')) nav.addClass('mobile');
|
||||
else nav.removeClass('mobile');
|
||||
});
|
||||
|
||||
$('ul#nav li a').on("click", function(){
|
||||
if (nav.hasClass('mobile')) nav.fadeOut('fast');
|
||||
});
|
||||
|
||||
|
||||
/* Smooth Scrolling
|
||||
------------------------------------------------------ */
|
||||
$('.smoothscroll').on('click', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var target = this.hash,
|
||||
$target = $(target);
|
||||
|
||||
$('html, body').stop().animate({
|
||||
'scrollTop': $target.offset().top
|
||||
}, 800, 'swing', function () {
|
||||
window.location.hash = target;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* Back To Top Button
|
||||
------------------------------------------------------- */
|
||||
var pxShow = 300; //height on which the button will show
|
||||
var fadeInTime = 400; //how slow/fast you want the button to show
|
||||
var fadeOutTime = 400; //how slow/fast you want the button to hide
|
||||
var scrollSpeed = 300; //how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
|
||||
|
||||
// Show or hide the sticky footer button
|
||||
$(window).scroll(function() {
|
||||
|
||||
if ($(window).scrollTop() >= pxShow) {
|
||||
$("#go-top").fadeIn(fadeInTime);
|
||||
} else {
|
||||
$("#go-top").fadeOut(fadeOutTime);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* ===================================================================
|
||||
* Keep It Simple 3.0.0 - Main JS
|
||||
*
|
||||
* ------------------------------------------------------------------- */
|
||||
|
||||
(function($) {
|
||||
|
||||
"use strict";
|
||||
|
||||
const cfg = {
|
||||
scrollDuration : 800, // smoothscroll duration
|
||||
mailChimpURL : '' // mailchimp url
|
||||
};
|
||||
const $WIN = $(window);
|
||||
|
||||
|
||||
// Add the User Agent to the <html>
|
||||
// will be used for IE10/IE11 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; rv:11.0))
|
||||
const doc = document.documentElement;
|
||||
doc.setAttribute('data-useragent', navigator.userAgent);
|
||||
|
||||
|
||||
|
||||
/* preloader
|
||||
* -------------------------------------------------- */
|
||||
const ssPreloader = function() {
|
||||
|
||||
$("html").addClass('ss-preload');
|
||||
|
||||
$WIN.on('load', function() {
|
||||
|
||||
// force page scroll position to top at page refresh
|
||||
// $('html, body').animate({ scrollTop: 0 }, 'normal');
|
||||
|
||||
// will first fade out the loading animation
|
||||
$("#loader").fadeOut("slow", function() {
|
||||
// will fade out the whole DIV that covers the website.
|
||||
$("#preloader").delay(300).fadeOut("slow");
|
||||
});
|
||||
|
||||
// for hero content animations
|
||||
$("html").removeClass('ss-preload');
|
||||
$("html").addClass('ss-loaded');
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/* mobile menu
|
||||
* ---------------------------------------------------- */
|
||||
const ssMobileMenu = function() {
|
||||
|
||||
const $toggleButton = $('.header-menu-toggle');
|
||||
const $headerContent = $('.header-content');
|
||||
const $siteBody = $("body");
|
||||
|
||||
$toggleButton.on('click', function(event){
|
||||
event.preventDefault();
|
||||
|
||||
// at 800px and below
|
||||
if (window.matchMedia('(max-width: 800px)').matches) {
|
||||
$toggleButton.toggleClass('is-clicked');
|
||||
$siteBody.toggleClass('menu-is-open');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$WIN.on('resize', function() {
|
||||
|
||||
// above 800px
|
||||
if (window.matchMedia('(min-width: 801px)').matches) {
|
||||
if ($siteBody.hasClass("menu-is-open")) $siteBody.removeClass("menu-is-open");
|
||||
if ($toggleButton.hasClass("is-clicked")) $toggleButton.removeClass("is-clicked");
|
||||
}
|
||||
});
|
||||
|
||||
// open (or close) submenu items in mobile view menu.
|
||||
// close all the other open submenu items.
|
||||
$('.s-header__nav .has-children').children('a').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// at 800px and below
|
||||
if (window.matchMedia('(max-width: 800px)').matches) {
|
||||
|
||||
$(this).toggleClass('sub-menu-is-open')
|
||||
.next('ul')
|
||||
.slideToggle(200)
|
||||
.end()
|
||||
.parent('.has-children')
|
||||
.siblings('.has-children')
|
||||
.children('a')
|
||||
.removeClass('sub-menu-is-open')
|
||||
.next('ul')
|
||||
.slideUp(200);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* alert boxes
|
||||
* ------------------------------------------------------ */
|
||||
const ssAlertBoxes = function() {
|
||||
|
||||
$('.alert-box').on('click', '.alert-box__close', function() {
|
||||
$(this).parent().fadeOut(500);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* smooth scrolling
|
||||
* ------------------------------------------------------ */
|
||||
const ssSmoothScroll = function() {
|
||||
|
||||
$('.smoothscroll').on('click', function (e) {
|
||||
const target = this.hash;
|
||||
const $target = $(target);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$('html, body').stop().animate({
|
||||
'scrollTop': $target.offset().top
|
||||
}, cfg.scrollDuration, 'swing').promise().done(function () {
|
||||
window.location.hash = target;
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* back to top
|
||||
* ------------------------------------------------------ */
|
||||
const ssBackToTop = function() {
|
||||
|
||||
const pxShow = 800;
|
||||
const $goTopButton = $(".ss-go-top")
|
||||
|
||||
// Show or hide the button
|
||||
if ($(window).scrollTop() >= pxShow) $goTopButton.addClass('link-is-visible');
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
if ($(window).scrollTop() >= pxShow) {
|
||||
if(!$goTopButton.hasClass('link-is-visible')) $goTopButton.addClass('link-is-visible')
|
||||
} else {
|
||||
$goTopButton.removeClass('link-is-visible')
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* initialize
|
||||
* ------------------------------------------------------ */
|
||||
(function ssInit() {
|
||||
|
||||
ssPreloader();
|
||||
ssMobileMenu();
|
||||
ssAlertBoxes();
|
||||
ssSmoothScroll();
|
||||
ssBackToTop();
|
||||
|
||||
})();
|
||||
|
||||
})(jQuery);
|
Loading…
Add table
Add a link
Reference in a new issue