Skip to content

Instantly share code, notes, and snippets.

@WebDevJL
Created July 24, 2020 11:07

Revisions

  1. WebDevJL created this gist Jul 24, 2020.
    15 changes: 15 additions & 0 deletions main.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    jQuery(document).ready(function(){
    var mobileNav = jQuery(".mobile_nav");
    var mobileMenuBar = jQuery(".mobile_menu_bar");
    jQuery(".et_mobile_menu")
    .append("<li><a class=\"close-nav\" href=\"#\" aria-label=\"Fermer le menu\" title=\"Fermer le menu\">Fermer le menu</a></li>");
    mobileMenuBar.click(function(event) {
    var openedMenu = mobileNav.hasClass("opened");
    console.log("clicked menu icon (opened: "+openedMenu+"!");
    });
    jQuery(".close-nav").click(function(event) {
    var openedMenu = mobileNav.hasClass("opened");
    console.log("clicked close nav link (opened: "+openedMenu+"!");
    mobileMenuBar.removeClass("opened");
    });
    });
    22 changes: 22 additions & 0 deletions styles.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    /*
    * Slide menu
    * TODO: add a close link
    * */
    .et_mobile_menu,
    .closed .et_mobile_menu {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0 !important;
    bottom: 0;
    right: 0;
    left: 1000%;
    transform: translateX(0) !important;
    transition: transform 250ms;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    }
    .opened .et_mobile_menu {
    transform: translateX(-1000%) !important;
    }