mediarox/module-js-hc-offcanvas-nav

Magento 2 Module for HC Off-canvas Nav

0.0.6 2022-03-16 08:39 UTC

MIT

README

This repo is just an integration of original js-library including css into Magento 2.

JavaScript library for creating off-canvas multi-level navigations, using ARIA. Dependency free, but also works as a jQuery plugin.

See original repository for more information: https://github.com/somewebmedia/hc-offcanvas-nav

Installation

cd <magento_root>
composer require mediarox/module-js-hc-offcanvas-nav
bin/magento setup:upgrade

Usage example

?>
<script>
    require([
        'jquery',
        'hcOffcanvasNav'
    ], function ($, hcOffcanvasNav) {
        // create global instance. info: the call as jQuery plugin ($(selector).hcOffcanvasNav) does not work reliably.
        window.topMenuNavigation = new hcOffcanvasNav('nav.navigation', {
            disableAt: 768,
            labelBack: '<?= $escaper->escapeHtml(__('Back')) ?>',
            width: '100%',
            levelTitles: true,
            levelTitleAsBack: true
        });
        // handle magento mobile nav trigger click. (the "customToggle" option causes collisions in the design.)   
        $('[data-action="toggle-nav"]').on('click', function(event) {
            event.preventDefault();
            window.topMenuNavigation.open();
        });
    });
</script>