Question

我正在处理标题。它看起来像这样：

<nav class="ui fixed borderless menu huge">
    <div class="ui container grid">
      <!-- regular navbar -->
      <div class="computer only row">
        <!-- left menu -->
        <a href="#" class="header item" id="logo-header">
          TMP
        </a>
        <a href="" class="item">Home</a>

        <a href="" class="item">Others</a>

        <!-- right menu -->
        <div class="right menu">
          <div class="item">
            <i class="search icon"></i>
          </div>
          <a href="" class="ui dropdown item">
            <div class="cart-menu">
              <i class="black large cart icon"></i>
              <div class="floating ui red label cart-items-badge">5</div>
            </div>
            <div class="menu">
              <!-- cart items -->
            </div>
          </a>
          <a href="" class="item">Login/Register</a>
        </div>
      </div>
      <!-- mobile navbar -->
      <div class="mobile-navbar tablet mobile only row">
        <a href="#" class="header item">
          <img class="store-logo" src="./img/vnl_logo.png" />
          <span class="store-title">TMP</span>
        </a>
        <div class="right menu">
          <div class="item mobile-search-icon">
            <div class="ui fluid transparent left icon input">
              <!-- <i class="search icon"></i> -->
              <input type="text" id="mobile-search-box" placeholder="Search...">
              <label for="mobile-search-box">
                <span><i class="search icon"></i></span>
              </label>
            </div>
          </div>
          <a href="#" class="menu item toggle burger">
            <span class="ui basic icon">
              <i class="content icon"></i>
            </span>
          </a>
        </div>
        <div class="ui vertical borderless fluid menu">
          <a href="#" class="item">Home</a>
          <a href="#" class="item">Categories</a>
          <a href="#" class="item">
            Cart
            <div class="floating ui red label">5</div>
          </a>
          <a href="#" class="item">About</a>
        </div>
      </div>
    </div>
  </nav>

在移动设备上，当点击“搜索”图标时，我希望它在标题中展开，留下此分布：

LOGO - 搜索栏 - 菜单汉堡

搜索栏占整个宽度的80％。为此，我要做以下事情：

JS：

$('.mobile-search-icon').click(expandSearchMobile)

function expandSearchMobile(e) {
  $('div.mobile-navbar .store-title').css('display', 'none')
  $('div.mobile-navbar .right.menu').addClass('search-on')
  $('div.mobile-navbar .right.menu .mobile-search-icon').css("width", "100%")
}

的CSS：

.mobile-navbar div.right.menu.search-on {
    margin-left: 0px !important;
    width: 80%;
    float: left;
    -webkit-transition: width 1.6s;
  transition: width 1.6s;
  transition: width 1.6s;
  transition: width 1.6s;
  cursor: pointer;
}

但汉堡正在消失，嗯，不完全是，正被推向右边。这就是为什么在我的CSS中我将边距设置为0.此属性最初由框架设置：

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto!important;

但是我的重要性并不优先于框架中定义的边距。

我不想从框架中删除！important，修改框架对我来说不是一个选项。

我可以使用其他任何方法吗？

这是一个小提琴手： https://jsfiddle.net/La11m48f/

感谢。

CSS！重要的是在语义UI中没有优先权

0 个答案: