如何使用 dropUp 转换 li navbar 下拉菜单

【问题标题】：How to convert li navbar dropdown with dropUp如何使用 dropUp 转换 li navbar 下拉菜单
【发布时间】：2022-01-04 11:01:24
【问题描述】：

这是一个简单的引导导航栏，带有一些 li 链接。我想将下拉菜单转换为下拉菜单。

.navbar {
   background-color: #34A8F0;
}
.nav-link{
   display: flex;
   flex-direction: column;
   align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <nav class="navbar navbar-expand-md navbar-light ">
      <a class="navbar-brand" href="#">
         Navbar
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">User Managemnt</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Jobs</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">HRMS</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Sell</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Notification</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Expenses</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Report</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
       </ul>
        <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>

   </nav>
</body>
</html>
我看到如何转换，但他们使用按钮，但我不想使用我想要这个 li 的按钮。这个下拉菜单向下打开我希望它向上打开（下拉） 我有很多 li，这就是为什么我不能使用 li 按钮来下拉。

【问题讨论】：

    标签： javascript html css bootstrap-4


    【解决方案1】： 
    <div class="dropup">  
  <button class=" btn nav-value   dropdown-toggle" type="button" data-toggle="dropdown">Sell
  <span class="caret"></span></button>  
  <ul class="dropdown-menu">  
    <li><a href="#">All Sales</a></li>  
    <li><a href="#">Add Sales</a></li>  
    <li><a href="#">List POS</a></li>  
    <li><a href="#">POS</a></li>
    <li><a href="#">List Drafts</a></li>
    <li><a href="#">List Qoutation</a></li>
    <li><a href="#">List Sell Return</a></li>
    <li><a href="#">Shipment</a></li>
    <li><a href="#">Discounts</a></li>

  </ul>  
</div>

    【讨论】：

      【解决方案2】：

      打开时在下拉列表中添加position:absolute 和top:-75px。

      .navbar {
   background-color: #34A8F0;
}
.nav-link{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.dropdown-menu.show {
   top: -75px;
   position: absolute !important;
}
      <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <nav class="navbar navbar-expand-md navbar-light ">
      <a class="navbar-brand" href="#">
         Navbar
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">User Managemnt</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Jobs</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">HRMS</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Sell</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Notification</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Expenses</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Report</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
       </ul>
        <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>

   </nav>
</body>
</html>

      【讨论】：

        【解决方案3】： 
        .dropdown-menu.show{
top:-50px;
position:absolute;
}

        试试这个

        【讨论】：

          猜你喜欢
          • 2013-04-20
          • 2013-07-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-02-23
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode