Question

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

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

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/

语义ui菜单响应

1 个答案: