hamburger menu with jquery smooth scroll

  • Resolved morene

    (@morene)


    8 years, 9 months ago

    hi,

    i′m making custom theme, so please check it on desktop now. This is my site: https://fidastav.konekto.net/

    I created hambruger icon and hamburger menu. Hamburger menu is slideUp when I click on hamburger icon my hamburger menu slideDown. After clicking on links the site smooth scroll down. It seems perfect but when i return up my humberger menu is still open and hamburger menu has class “open”. I tried to make this effect, when i return back hambruger menu will be slideUp or close again and hamburger icon will be without class “open”.

    CSS code:

    #nav-icon4 {
    width: 60px;
    height: 45px;
    position: relative;
    margin: 50px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    }

    #nav-icon4 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #d3531a;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }

    #nav-icon4 {
    }

    #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    #nav-icon4 span:nth-child(2) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    #nav-icon4 span:nth-child(3) {
    top: 36px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    #nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 8px;
    }

    #nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }

    #nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 39px;
    left: 8px;
    }

    JQEURY code:

    $(document).ready(function(){

    var menu = $(‘.menu-ham’);
    menu.slideUp();
    $(‘#nav-icon4’).click(function(){
    $(this).toggleClass(‘open’);
    $(‘.menu-ham’).slideToggle();
    });

    menulinks = menu.find(‘a’);

    menulinks.on(‘click’, function() {
    $(‘html,body’).animate({scrollTop: $(‘[name=”‘ + $.attr(this, ‘href’).substr(1) + ‘”]’).offset().top
    }, 500);
    return false;
    });
    //menu.slideUp();
    //$(‘#nav-icon4’).removeClass(‘open’);
    });

    My code is not working

    menu.slideUp();
    $(‘#nav-icon4’).removeClass(‘open’);

    Any advice

    Thanks a lot

Viewing 2 replies - 1 through 2 (of 2 total)

  • Try this. I’ve re-factored your code slightly and made the menu disappear once an item has been clicked and the user has been scrolled down the page.

    This should replace your entire JS you provided above.

    $(function(){
    var menu = $(".menu-ham");
    var menulink = menu.find('a');
    var menuicon = $("#nav-icon4");

    $(menuicon).on("click", function(){
        $(this).toggleClass("open");
        $(menu).slideToggle();
    });

    $(menulink).on("click", function(){
        $(menuicon).toggleClass("open");
        $(menu).hide();
        $('html,body').animate({scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
         }, 500);
         return false;
    });
});
    Thread Starter morene

    (@morene)

    Thanks a lot! it′s perfect!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘hamburger menu with jquery smooth scroll’ is closed to new replies.