CODEWITHSUNDEEP
javascriptjqueryhtmlcssicons
solidsponge
solidsponge

Reputation: 13

Menu icon toggle issue JQuery

I obtained a toggle control that animates between a menu icon and an X when clicked. It also presents an overlay nav.

the problem is: When you click any link on the overlay nav, it doesn't change/toggle X back to the default menu icon.

In the following code snippet, I added $('.cd-menu-icon').toggleClass('is-clicked'); $('.cd-header').toggleClass('menu-is-open'); (on lines 33, 34) to initially set the toggled state of the control.

jQuery(document).ready(function($){
    //if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
    var MQL = 1170;

    //primary navigation slide-in effect
    if($(window).width() > MQL) {
        var headerHeight = $('.cd-header').height();
        $(window).on('scroll',
        {
            previousTop: 0
        }, function () {
            var currentTop = $(window).scrollTop();
            //check if user is scrolling up
            if (currentTop < this.previousTop ) {
                //if scrolling up...
                if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                    $('.cd-header').addClass('is-visible');
                } else {
                    $('.cd-header').removeClass('is-visible is-fixed');
                }
            } else {
                //if scrolling down...
                $('.cd-header').removeClass('is-visible');
                if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
            }
            this.previousTop = currentTop;
        });
    }

    //open/close primary navigation
    $('.cd-primary-nav-trigger').on('click', function(){
        $('.cd-menu-icon').toggleClass('is-clicked');
        $('.cd-header').toggleClass('menu-is-open');

        //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
        if( $('.cd-primary-nav').hasClass('is-visible') ) {
            $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').removeClass('overflow-hidden');
            });
        } else {
            $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').addClass('overflow-hidden');
            });
        }
    });
});

Hope someone can help.

To reproduce: (use JsFiddle Example)

  1. Open menu (click 'hamgburger' icon box area)
  2. Click any link on the overlay, when it's presented. (i.e "1", "2", "3", "4")
  3. Result: the overlay closes, but the menu icon doesn't toggle back.

Upvotes: 1

Views: 1789

Answers (2)

Mike
Mike

Reputation: 1316

A quick solution is to add a new click listener that will listen to clicks on your links

$('.nav-overlay').click(function() {
    $('.cd-menu-icon').toggleClass('is-clicked');
});

In your original fiddle, the hamburger icon will only change when it is clicked directly because the click listener is attached only to that element

Modified Fiddle

Upvotes: -1

Sharad Saxena
Sharad Saxena

Reputation: 319

I think you have implemented the custom click events on 1, 2, 3, 4 links in <script> tag (line 253) in the HTML part.

Just replace that <script> tag with below:

<script>
  $('.cd-primary-nav a').on('click', function(){
  $('.cd-menu-icon').removeClass('is-clicked');
  $('.cd-header').removeClass('menu-is-open');
  $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
    $('body').removeClass('overflow-hidden');
  });
  });
</script>

JSFiddle: https://jsfiddle.net/c9dj010v/

Upvotes: 4

Related Questions