JS功能将导航转换为右侧

时间:2018-06-08 00:30:31

标签: javascript jquery css css3

我正在研究shopify。 https://vapiuminc.myshopify.com/

如果您打开该页面。通过单击右上角的图标,您将在右侧获得导航栏。我添加了一个关闭按钮来隐藏导航。但是我无法通过点击它来改变它。

以下功能用于显示和隐藏主题菜单。

show: function(){
                $hamburger.addClass('open');

                $('.js-searchToggle').focus();
                $('.js-searchToggle').attr('tabindex','0').attr('aria-expanded', true);;
                $('.last-focusable-element').attr('tabindex','0');

                $body.add('html').addClass('nav--is-hiding');

                $('.nav-inner').css({
                    'transform': 'none'

                });

                $('.header-fix-cont-inner, .bodyWrap, .siteAlert, .main-logo').css({
                    'transform': 'translateX(-'+$('.nav-inner').width()+'px)'
                });

                $(window).on('resize.siteNav', function() {
                    $('.header-fix-cont-inner, .bodyWrap').css({
                        'transform': 'translateX(-'+$('.nav-inner').width()+'px)'
                    });
                });

                var activeEl = document.activeElement;
                if($(activeEl).hasClass('js-menuToggle ')){
                    $('body').on('keydown', function(e) {
                        if(e.which == 9){
                            $('.js-searchToggle').focus();
                        }
                    });
                }

                $('body').on('keydown', function(e) {
                    if (e.which == 9) {
                        var activeEl = document.activeElement;
                         if($(document.activeElement).hasClass('last-focusable-element')){
                            Site.nav.hide();
                            $('.last-focusable-element').attr('tabindex','-1');
                         }
                     }
                });

                $('.visible-nav-link').each(function(){
                    $(this).removeAttr('tabindex');
                });

                $('body').on('keydown', function(e) {
                    var activeEl = document.activeElement;
                    var sibling = $(activeEl).next();
                    if($(sibling).hasClass('is-visible') && e.which == 9 ){
                        $('.submenu-item--link').each(function(){
                            $(this).attr('tabindex','0');
                        });
                    }
                    if($(activeEl).data('last') == true && e.which == 9){
                        var menu = $(activeEl).parents().eq(3);
                        $(menu).removeClass('submenu--is-visible');
                        $('.submenu-item--link').each(function(){
                            $(this).attr('tabindex','-1');
                        });
                    }
                });

                $('.js-searchToggle').attr('tabindex','0');
                $('#shopName').attr('tabindex','-1');
                $('#cartTotal').attr('tabindex','-1');

            },
            hide: function(){
                $hamburger.removeClass('open');
                $body.add('html').addClass('nav--is-visible');

                $('.nav-inner, .header-fix-cont-inner, .bodyWrap, .siteAlert, .main-logo').add($hamburger).css({
                    'transform': 'none',
                });
              $('.nav-inner').add($hamburger).css({
                    'transform': 'translate(100%)',
                });

                $(window).off('resize.siteNav');

                setTimeout(function(){
                    $body.add('html').removeClass('nav--is-visible');
                    $body.add('html').removeClass('nav--is-hiding');
                }, 300);

                // close search too
                if ($('.nav-container').hasClass('search--is-visible')){
                    Site.nav.search.close();
                }

                $('.visible-nav-link').each(function(){
                    $(this).attr('tabindex','-1');
                });

                $('.js-searchToggle').removeAttr('tabindex').attr('aria-expanded', false);
                $('#shopName').attr('tabindex','0');
                $('#cartTotal').attr('tabindex','0');

            },

请点击上面的十字按钮,帮我看一些js函数来隐藏导航栏,

谢谢

0 个答案:

没有答案