时间戳

首页 > 解决方案 > 水平滚动导航，如 facebook 或 instagram - css

javascript - 水平滚动导航，如 facebook 或 instagram - css

问题描述

我的滚动导航有问题。或者实际上我正在寻找一种解决方案，可以像现在的大多数应用程序一样在移动屏幕上进行水平滚动导航。我的菜单是一个超级菜单是一个超级菜单，它在桌面和移动设备上都可以正常工作。当我使用此代码使其水平滚动时，它不会打开超级菜单。

    ul{ /* set's the horizontal layout for the menu */
       white-space: nowrap;
       overflow-x: auto; 
       overflow-y: hidden;
       flex-wrap: inherit !important;
       scrollbar-width: none; /* this will remove scroll-bar for mozilla based browser */
}
    selector ul::-webkit-scrollbar { 
        /* now, let's remove the scroll-bar from the menu */
          display: none; 
        }

可滚动菜单工作但不是大型菜单

如果我删除 overflow-x 或 y 属性，然后大型菜单会显示其内容，但布局是这样的。 删除溢出属性后

我的超级菜单

标签： javascripthtmlcsswordpressmegamenu

解决方案

如果您正在使用小型设备，则必须指定媒体查询，例如：

@media screen and (max-width: 600px) {  
  .column {    
    width: 100%;
    height: auto;  
  }
}

您是否尝试过设置max-width和max-height？

你应该谷歌关于下拉菜单。这个w3schools页面解释了如何通过它。

推荐阅读