forked from rebillar/site-accueil-insa
88 lines
No EOL
2.2 KiB
JavaScript
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");
|
|
}); |