自定义 Bootstrap 汉堡菜单

Question

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

HTML

<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>Dashboard</a>
        </li>

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

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

我为此做了一个代码笔 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://codeply.com/go/i7Hjqmy8bo

---

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