语义 ui 菜单响应式答案

【问题标题】：semantic ui menu responsive语义 ui 菜单响应式
【发布时间】：2018-08-27 09:14:10
【问题描述】：

我想要一个经典屏幕菜单：

<div class="ui borderless stackable container main menu">

还有一个用于带有垂直侧边栏的移动屏幕（有关详细信息，请参阅文本末尾的小提琴）：

<div class="ui container fixed secondary menu">

我在 CSS 文件中显示/隐藏一个菜单：

.main.menu {
    margin-top: 4em;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
    box-shadow 0.5s ease,
    padding 0.5s ease
    ;
}

.secondary.menu {
    display: none !important ; /* put block to see the 2nd menu */
}

@media only screen and (max-width: 700px) {
  .ui.main.menu {
    display: none !important;
  }
  .main.menu .item,
  .main.menu .menu {
    display: none;
  }
  .secondary.menu {
    display: block;
  }
}

我无法在移动或经典屏幕上切换/隐藏到另一个菜单。

我的小提琴是：https://jsfiddle.net/e59v5veL/8/

【问题讨论】：

标签： css responsive-design menu semantic-ui

【解决方案1】：

您可以尝试这样做。

您还需要将!important 放入.secondary.menu 的样式中以实现您想要的效果

@media only screen and (max-width: 700px) {
      .ui.main.menu {
        display: none !important;
      }
      .main.menu .item,
      .main.menu .menu {
        display: none;
      }
      .secondary.menu {
        display: block!important;
      }
    }

请查看此链接中的实时示例。 https://jsfiddle.net/e59v5veL/11/

【讨论】：