Question

我尝试制作与doordash网站相同的菜单。我差不多完成了，但问题在于更多按钮。如何在更改屏幕分辨率时将额外的项目放在幻灯片中？

例如，在缩小浏览器窗口时，下拉菜单中的项目会增加，而在扩大浏览器窗口时，下拉菜单中的项目会减少。

换句话说，菜单包含3项onload（宽屏幕），而在移动屏幕上则包含6项。

HTML：

  <div class="MoreCategoriesContainer" style="display:none">
 <button class="extraCategorylist">food1</button>
 <button class="extraCategorylist">food2</button>
 <button class="extraCategorylist">food3</button>
 <button class="extraCategorylist">food4</button>
 <button class="extraCategorylist">food5</button>
 <button class="extraCategorylist">food6</button> </div>

我在下拉菜单中的所有css都是：

.MoreCategoriesContainer {
overflow-y: auto;
 max-height: 80vh;
 position: absolute;
  right: 0;
   top: calc(100% + 2px);
 box-shadow: 0 2px 8px 0 rgba(0,0,0,.19);
  border-radius: 4px;
 background: #fff;
 padding: 6px 24px;
 }

Answer 1

为您不想在大屏幕上显示的项目将课程设置为large-hidden，并使用以下css规则：

@media only screen and (min-width: 830px) {
    .large-hidden {
       display: none;
    }
}

如何制作响应式下拉菜单

1 个答案: