Question

我的移动菜单可以顺畅地工作，但是宽度较小时，除非我将高度调得很短，否则它们不会关闭。似乎当我减小屏幕的高度和宽度时，用于关闭图标的“ x”的点击框越来越小，并且在移动宽度上几乎不存在（除非我将高度短得离谱）

这与大多数手机不兼容，因为它们的屏幕更高，并且也破坏了我的其余导航。

奇怪的是，这仅发生在我的非粘性移动菜单上，当我向下滚动时，我弹出了另一个粘性菜单，并且可以正常工作。

这是我的代码（用于非粘性移动导航）：

HTML：

<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

（我使用的是离子包，所以我可以使用图标）

CSS：

/* Mobile navi */
.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}

.mobile-nav-icon i {
    font-size: 200%;
    color: #980101;
}

JavaScript：

    /* Mobile navigation */

$('.js--nav-icon').click(function() {
    var nav = $('.js--main-nav');
    var icon = $('.js--nav-icon i');

    nav.slideToggle(200);

    if (icon.hasClass('ion-navicon-round')) {
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');

    } else {
        icon.addClass('ion-navicon-round');
        icon.removeClass('ion-close-round');
    }        
});

下面是我的粘性导航的代码（如果有帮助的话）

粘性导航代码：

CSS：

/* Sticky navi */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    -webkit-box-shadow: 0 2px 2px #efefef;
    box-shadow: 0 2px 2px #efefef;
    z-index: 9999;
}

.sticky .main-nav { 
    margin-top: 0px; 
    margin-right: 20px;
} 

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    padding: 16px 0;
    color: #555;
}

.sticky .logo { display: none; }
.sticky .logo-black { 
    width: 150px;
    height: auto;
    display: block; 
    margin-left: 30px;
}

JavaScript

    $('.js--section-features').waypoint(function(direction) {
    if (direction == "down") {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
}, {
  offset: '60px;'
});

菜单如下：https://imgur.com/a/8hRQXqz

粘性菜单：https://imgur.com/a/ICQ9fZf

TL; DR：当我单击较小的宽度和高度时，我希望“ x”图标关闭菜单。

移动菜单不会以一定的宽度关闭

0 个答案: