Блог

Если вы измените размер окна до 600 пикселей или меньше, я получу 2 иконки вместо одной, меню гамбургера.

Вторая проблема заключается в том, что если щелкнуть и закрыть гамбургер, и я изменяю размер окна более чем на 600 пикселей, все навигационное меню прерывается.

вот код jQuery

 var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("close").style.display = "block";
    $('#menu ul').slideToggle();
}

function closeNav() {
    document.getElementById("open").style.display = "block";
    document.getElementById("close").style.display = "none";
    $('#menu ul').slideToggle();
}

$(function () {
nav.mouseleave(function () {
    $(this).find("li").slideUp();
    });
}); 
 

И вы можете увидеть это в действии здесь

https://www.myccandbuilds.com/

Этот скрипт прослушивает размер экрана и устанавливает правильные настройки для более и менее 600 пикселей

Добавьте этот код в свой код jQuery:

 $(window).on('resize load', function () {
    var win = $(this);
    if (win.width() <= 600) {
        $('#close').attr("style", "display:none;");
        $('#open').attr("style", "display:block;");
        $('#menu ul').attr("style", "display:none;");
    } else {
        $('#close').attr("style", "display:block;");
        $('#menu ul').attr("style", "display:block;");
    }
});