Question

我有一个垂直导航，并且有一个要在中等屏幕上显示的汉堡菜单的断点。当出现汉堡菜单时，我希望图标后的文本被隐藏（因为它占用了大量空间），并且仅显示图标，并且如果我单击汉堡菜单，我希望再次显示完整菜单（如是）。

HTML

initial
    begin
      $dumpfile("dump.vcd");
      $dumpvars;
      #1000 $finish;
     end

CSS：

let
    url = "https://url/private/webService/?date_deb=2019-07-01&date_fin=2019-08-31",
    body  = "{ ""rest_mdp"": ""b6cfsdffdg2bb173rgfgddfga62b3e"" }",
    Parsed_JSON = Json.Document(body),
    BuildQueryString = Uri.BuildQueryString(Parsed_JSON),
    webdata = Json.Document(Web.Contents(url,[Headers = [#"Content-Type"="application/json"], Content=Text.ToBinary(body) ] ))
in
    webdata

我为此做了一个码笔 https://codepen.io/ibrahim-kunushefci/pen/ewwWQv

Answer 1

您必须在HTML中进行一些更改。用<span>包裹文本，然后使用媒体查询。

HTML

<!-- Make the window larger than 767px to see the nav items
     Smaller than 767px to see the hamburger menu -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav navbar-sidenav">
            <li class="nav-item">
                <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt mr-4"></i><span>Dashboard</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users mr-4"></i><span>Users</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-users mr-4"></i><span>Admins</span></a>
            </li>
        </ul>
    </div>
</nav>

CSS

.aside-section {
  margin: 0;
  float: left;
  width: 280px;
  height: 100%;
  background-color: #f1f1f1;
}

.navbar-sidenav {
  position: relative;
  flex-direction: column;
  width: 170px;
  background-color: #f1f1f1;
}

.nav-link-p {
  padding: 0;
  margin: 28px 0 28px 10px;
}

@media screen and (max-width: 767.98px) {
  /* Some code needs to be here */
  ul.nav li a span {
    display: none;
  }
  .navbar-sidenav {
    display: inline-block;
    width: auto;
  }
  ul.nav li a i {
    margin-left: 10px;
    margin-right: 16px !important;
  }
}

DEMO HERE

Answer 2

我认为您需要JS（jQuery）才能使汉堡包折叠菜单具有3种状态：

以隐藏的文字关闭
打开并隐藏文字
打开并显示文字

您可以加入Collapse组件的hide和hidden事件。...

$('#navbarNav').on('hide.bs.collapse', function (e) {
  if ($('.nav-text.d-none').length > 0) {
      // prevent nav from hiding, and show the text
      e.preventDefault();
      $('.nav-text').removeClass('d-none');
  }
});

$('#navbarNav').on('hidden.bs.collapse', function (e) {
    // rehide icons when nav closes
    $('.nav-text').addClass('d-none');
});

添加一些CSS以确保文本始终以更大的宽度显示：

@media screen and (min-width: 768px) {
    .nav-text.d-none {
        display: inline !important;
    }
}

https://www.codeply.com/go/i7Hjqmy8bo

相关：Create a responsive navbar sidebar "drawer" in Bootstrap 4?

自定义引导程序的汉堡包菜单

2 个答案: