Question

我正在尝试为前端创建侧边栏菜单，默认情况下该菜单应在桌面上显示，但在移动设备上开始隐藏。下面显示的“活动”类处理显示/隐藏之间的过渡。边栏有效，当我单击手机上的“汉堡包”按钮时，它会按原样显示或隐藏菜单。

CSS：

.sidebar {
    transform: translateY(-100%);
    transition: all .25s ease-in-out;
}

.sidebar.active {
    transform: translateY(0);
    transition: all .25s ease-in-out;
}

JS：

$("#sidebar-toggle").click(function () {
    $(".sidebar").toggleClass("active");
});

默认情况下，该菜单在桌面上具有“活动”类，因此除非用户将其隐藏，否则该菜单会显示出来，当我在移动设备上加载页面后尝试隐藏菜单时，会出现问题：

$(document).ready(function () {
    if ( window.innerWidth >= 770 )
    { $(".sidebar").addClass("active"); }
    else
    { $(".sidebar").removeClass("active"); }
});

但是，在手机上浏览应用程序时，每次刷新页面时，菜单都会消失。如何在不使用JS的情况下将边栏设置为在桌面上为“活动”状态，但默认情况下不在移动设备上为活动状态？

更新：由于似乎有些人难以理解正在发生的事情，因此我将尝试再次澄清，现在仅使用简单的句子：

我希望我的侧边栏默认在桌面（最小大小> 770）上具有“活动”类。我还希望我的侧边栏在移动设备上默认不具有“活动”类（最小尺寸<770）。我做不到我只能将边栏设置为始终处于活动状态。我还可以根据屏幕大小删除或添加类。上面提供的JS可以做到这一点。但是，这发生在页面加载之后。结果（在移动设备上）是出现在每次刷新/重定向中的边栏，然后进行过渡。我不希望它在刷新/重定向时处于活动状态，然后迁移出去。我希望它从一开始就处于非活动状态。但是在桌面上是活动的。

UPDATE2：我真的希望这更容易理解：我想在台式机上使用“活动”类创建边栏，而在手机上不使用“活动”类。我不想从“活动”类开始，然后在页面加载后用JS将其删除，这就是我现在要做的。我希望边栏在没有活动课程的情况下开始-仅在移动设备上提供。

Answer 1

有人稍早发布了类似内容，但删除了答案，经过一番修改后，我知道了。默认情况下，边栏没有设置“活动”类。同样默认情况下，它对于移动设备是隐藏的，但对于台式机则显示。 “活动”类可以在移动设备上显示侧边栏。

/* small screen, hidden by default */
@media only screen and (max-width: 770px ) {
    .sidebar {
        transform: translateY(-100%);
        transition: all .25s ease-in-out;
    }
}

/* large screen, shown by default */
@media only screen and (min-width: 771px ) {
    .sidebar {
        transform: translateY(0);
        transition: all .25s ease-in-out;
    }
    #sidebar-toggle {
        display: none;
    }
}

/* activate the menu on small screen */
.sidebar.active {
    transform: translateY(0);
    transition: all .25s ease-in-out;
}

Answer 2

/* apply hide the element when width larger than 770px */    
@media (max-width: 770px) {
   .sidebar.active {
      display:none;
   }
}

移动设备和台式机页面加载时使用不同的CSS样式类

2 个答案: