css - 语义 ui 菜单响应

Question

我想要一个经典屏幕的菜单:

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

还有一个用于带有垂直侧边栏的移动屏幕(有关更多详细信息，请参阅文本末尾的 fiddle ):

<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;
  }
}

我无法在手机或经典屏幕上实现切换/隐藏到另一个菜单。

我的 fiddle 是:https://jsfiddle.net/e59v5veL/8/

Answer 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/