Html 自定义引导'；汉堡包菜单

我有一个垂直导航，我有一个断点，汉堡菜单将显示在中等屏幕上。当汉堡包菜单出现时，我希望图标后面的文本被隐藏（因为它占用了很多空间），只看到图标，如果我单击汉堡包菜单，我希望完整的菜单再次显示（原样）

HTML

我为此做了一个密码笔

---

您必须对HTML进行一些更改。使用

包装文本，然后使用媒体查询

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>

---

您必须对HTML进行一些更改。使用

包装文本，然后使用媒体查询

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>

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

• 关闭并隐藏文本
• 打开时隐藏文本
• 打开并显示文本

您可以钩住折叠组件的

隐藏

和

隐藏

事件

$('#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;
    }
}

---

相关：

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

• 关闭并隐藏文本
• 打开时隐藏文本
• 打开并显示文本

您可以钩住折叠组件的

隐藏

和

隐藏

事件

$('#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;
    }
}

---

相关的：