site-accueil-insa/assets/scripts/sidenavScript.js

88 lines
2.2 KiB
JavaScript
Raw Normal View History

2018-03-25 13:22:28 +02:00
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
*/
2018-03-25 13:22:28 +02:00
function openNav() {
sidenav.css("margin-left", "0");
2018-05-24 13:17:51 +02:00
sidenav.css("overflow", "auto");
2018-03-25 13:22:28 +02:00
backButton.addClass("active_background");
2018-03-25 14:19:53 +02:00
enableHamburger();
2018-03-25 13:22:28 +02:00
menuOpen = true;
}
/*
* Close navigation menu, change Hamburger icon back to default state
* and hide the back button overlay
*/
2018-03-25 13:22:28 +02:00
function closeNav() {
sidenav.css("margin-left", "-270px");
2018-05-24 13:17:51 +02:00
sidenav.css("overflow", "hidden");
2018-03-25 13:22:28 +02:00
backButton.removeClass("active_background");
2018-03-25 14:19:53 +02:00
disableHamburger();
2018-03-25 13:22:28 +02:00
menuOpen = false;
}
/*
* Toggle the navigation bar
*/
2018-03-25 13:22:28 +02:00
function toggleNav() {
if (menuOpen) {
closeNav();
} else {
openNav();
}
}
2018-03-25 14:19:53 +02:00
function disableHamburger() {
2018-03-25 13:22:28 +02:00
hamburger.removeClass("change");
}
2018-03-25 14:19:53 +02:00
function enableHamburger() {
2018-03-25 13:22:28 +02:00
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);
// 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();
}
});
2018-04-24 00:15:37 +02:00
// Animate hamburger on hover
hamburger.hover(function(){
2018-05-06 21:47:33 +02:00
$("#bar1").css("background-color", "#1a5dad");
$("#bar2-1").css("background-color", "#ee293d");
$("#bar2-2").css("background-color", "#ee293d");
2018-04-24 00:15:37 +02:00
$("#bar2-1").css("left", "-5px");
$("#bar2-2").css("right", "-5px");
2018-05-06 21:47:33 +02:00
$("#bar3").css("background-color", "#1a5dad");
2018-04-24 00:15:37 +02:00
}, 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");
});