site-accueil-insa/assets/scripts/sidenavScript.js
2018-06-05 20:03:33 +02:00

88 lines
No EOL
2.2 KiB
JavaScript

var menuOpen = false;
var sidenav = $("#menuSidenav");
var hamburger = $("#hamburger");
var backButton = $("#back-button");
/*
* Open navigation menu, change Hamburger icon to selected state
* and display the back button overlay over the page
*/
function openNav() {
sidenav.css("margin-left", "0");
sidenav.css("overflow", "auto");
backButton.addClass("active-background");
enableHamburger();
menuOpen = true;
}
/*
* Close navigation menu, change Hamburger icon back to default state
* and hide the back button overlay
*/
function closeNav() {
sidenav.css("margin-left", "-270px");
sidenav.css("overflow", "hidden");
backButton.removeClass("active-background");
disableHamburger();
menuOpen = false;
}
/*
* Toggle the navigation bar
*/
function toggleNav() {
if (menuOpen) {
closeNav();
} else {
openNav();
}
}
function disableHamburger() {
hamburger.removeClass("change");
}
function enableHamburger() {
hamburger.addClass("change");
}
/*
* Open navigation menu when swiping right (if not swiping on an image)
*/
var img = document.querySelector('.sidenav');
// Create a manager to manager the element
var manager = new Hammer.Manager(img, {touchAction: "auto"}); // enable the touch action to allow scrolling on the sidenav
// Create a recognizer
var Swipe = new Hammer.Swipe();
// Add the recognizer to the manager
manager.add(Swipe);
// Subscribe to the swipe event
manager.on('swipe', function(e) {
var direction = e.offsetDirection;
if (direction === 4) { // right
openNav();
} else if (direction === 2) { // left
closeNav();
}
});
// Animate hamburger on hover
hamburger.hover(function(){
$("#bar1").css("background-color", "#1a5dad");
$("#bar2-1").css("background-color", "#ee293d");
$("#bar2-2").css("background-color", "#ee293d");
$("#bar2-1").css("left", "-5px");
$("#bar2-2").css("right", "-5px");
$("#bar3").css("background-color", "#1a5dad");
}, function(){
$("#bar1").css("background-color", "white");
$("#bar2-1").css("background-color", "white");
$("#bar2-2").css("background-color", "white");
$("#bar2-1").css("left", "0");
$("#bar2-2").css("right", "0");
$("#bar3").css("background-color", "white");
});