漂浮的Div导致麻烦

Question

我似乎已经陷入浮动div的特殊问题。 div的示例位于this website

我无法实现的目的是将div中包含的菜单转换为响应式可堆叠汉堡菜单。

我非常感谢你对此的帮助。

祝福， 萨米特

Answer 1

隐藏大菜单，并在小屏幕上显示可堆叠汉堡。这可以通过使用CSS来完成。

Mobile first，基本上如此：

.largeMenuDiv { display: none }

@media ( min-width: 480px ) {

    .largeMenuDiv    { display: block; }
    .stackableBurger { display: none; }

}

当然，你可以通过JavaScript菜单在不同的屏幕尺寸上进行变换，但它的IMO会更复杂。