Difference between revisions of "Template:Montpellier"

Revision as of 09:12, 20 August 2018

<!DOCTYPE html>

/********NAVBAR************************************************************************************************************************************************************/

 let animationDelay = 200; //in ms

 function appearEachChild(selector) {
   selector.children().css("display", "block");
   selector.children().animate({
     opacity: 1
   }, animationDelay);
 }

 function disappearEachChild(selector) {
   selector.children().animate({
     opacity: 0
   }, animationDelay, function () {
     $(this).css("display", "none");
   });
 }

 $(function () {
   let menuBigLinks = $("nav nav > a");

   menuBigLinks.each(function() {
     let menuLink = $(this);
     let submenu = menuLink.parent();
     let subitemcontainer = submenu.find("div");
     let subitems = subitemcontainer.children();

     // De base le sous-menu ne doit pas gêner la navigation donc on ne l'affiche pas du tout.
     subitemcontainer.css("display", "none");

     //On fait en sorte que le menu apparaisse quand on passe sur le lien
     menuLink.mouseenter(function() {
       subitemcontainer.css({left: menuLink.position().left, top: parseInt(menuLink.position().top, 10) + parseInt(menuLink.outerHeight(), 10) +
         parseInt(menuLink.css("margin-bottom"), 10)*2});
         subitemcontainer.css("display", "flex");
         appearEachChild(subitemcontainer);
       $(this).toggleClass("expanded", true);
       });

       submenu.mouseleave(function() {
         disappearEachChild(subitemcontainer);
         $(this).children()
         .filter('a')
         .first()
         .toggleClass("expanded", false);
       });
     });
   });

</script>