如何为已启动会话的用户创建下拉菜单答案

【问题标题】：How to create a dropdown menu for the user that has a session initiated如何为已启动会话的用户创建下拉菜单
【发布时间】：2018-01-07 18:21:28
【问题描述】：

我正在使用引导导航栏，它工作正常，在移动设备上会出现切换按钮，当单击此按钮时，它会出现一个包含正确菜单项的下拉菜单，就像引导默认设置一样。

但我还希望有一个带有用户名的菜单项，该用户名在用户启动会话时出现，并且当单击此菜单项时，它还会显示一个下拉菜单，其中包含启动会话的用户可用的项目。

用户在会话启动时可用的菜单项是：

<ul>
  <li>Edit Profile</li>
  <li>Logout</li>
</ul>

您知道如何使用引导程序为会话开始的用户创建包含上述项目的下拉菜单吗？因此，当单击菜单项“Jan”时，使用引导样式显示带有上述项目的下拉菜单，就像单击移动设备中的切换按钮时一样，它会显示带有菜单项的下拉菜单？

没有显示下拉菜单项的部分的工作示例可用于会话启动正常工作的用户：https://jsfiddle.net/eeeoft8n/3/

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

请查看bootstrap docs，那里有一些很好的例子。

您需要在链接上添加 div 和 dropdown-menu 类和必要的 aria-toggle 以激活它们。

.menu_container {
  position: relative;
  width: 100%;
}

div.dropdown-menu{
  left:auto;
  right:0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div class="container-fluid px-0">
  <nav class="navbar navbar-expand-md navbar-light">
    <a href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="menu_container">
      <div class="collapse navbar-collapse" id="main_nav">
        <ul class="navbar-nav ml-auto d-flex align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Item 0</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-user" aria-hidden="true"></i> Jan
            </a>
            <div class="dropdown-menu" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="#">Edit Profile</a>
              <a class="dropdown-item" href="#">Delete brains</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">logout</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

您可能需要全屏显示才能获得全角视图而不是移动视图

【讨论】：