Yii2 / Bootstrap NavBar菜单 - 保持项始终可见 [英] Yii2/Bootstrap NavBar menu - keep an item always visible

问题描述

我有一个Yii2应用程序，NavBar菜单向上，它看起来像这样：

I have an Yii2 application with NavBar menu up top, which looks something like that:

echo Nav::widget([
                'options' => ['class' => 'navbar-nav '],
                'items' => [
                    ['label' => 'Home', 'url' => ['/site/index']],
                    ['label' => 'About', 'url' => ['/site/about']],
                    ['label' => 'Contact', 'url' => ['/site/contact']],
...

事实上，在我的代码中，我有'encodeLabels'=> false

In fact, in my code I have 'encodeLabels' => false and I have images instead of text in the labels but that is not relevant.

这个行为与小屏幕上的预期一致 - 在小型和超小型设备上，链接消失，汉堡包图标弹出如果你点击它，你会得到一个下拉与所有的链接。

This behaves exactly as intended on small screen - on small and extra small devices the links disappear, the 'hamburger' icon pops up and if you click on it, you get a drop down with all the links.

我想做的是总是保持几个链接外的汉堡包菜单，并且不包括在下拉菜单中。例如，首页和关于链接需要保留在菜单中，即使屏幕太小也可以在每个级别显示，其他一切都可以在下拉菜单中自由进行。

What I want to do is always keep a couple of links outside of the 'hamburger' menu and not include them in the drop down menu. For example, the "Home" and "About" links need to stay in the menu, visible at each level even when the screen becomes too small and everything else is free to go inside the dropdown menu.

我没有尝试把它们放在 NavBar :: begin 部分代码，没有成功，此外，我认为应该有一个更容易方式做到这一点。任何想法？

I did few attempts to stuff them in the NavBar::begin part of the code with no success, besides, I think there should be an easier way to do that. Any ideas?

推荐答案

您应该将 NavBar 自定义引导 navbar ：

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header navbar-right pull-right">
      <ul class="nav pull-left">
        <li class="navbar-text pull-left">User Name</li>
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle">
            <span class="glyphicon glyphicon-user"></span>
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="visible-xs-block clearfix"></div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="/news">News</a></li>
        <li><a href="/Shop">Shop</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/locator">Locator</a></li>
        <li><a href="/extras">Extras</a></li>
      </ul>
    </div>
  </div>
</nav>

jsfiddle

这篇关于Yii2 / Bootstrap NavBar菜单 - 保持项始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！