Home > Blockchain >  How to convert li navbar dropdown with dropUp
How to convert li navbar dropdown with dropUp

Time：11-26

Its simple bootstrap navbar with some li links. I want to convert dropdown to dropup.

.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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I see how to convert but they use the button but I don't want to use the button I want this li. This dropdown open downward I want it open upward(dropup) I have many li that's why I can't use the button for li to dropup.

CodePudding user response：

Sell
  • All Sales
  • Add Sales
  • List POS
  • POS
  • List Drafts
  • List Qoutation
  • List Sell Return
  • Shipment
  • Discounts
    •               </ul>  
            </div>

    CodePudding user response：

    .dropdown-menu.show{
top:-50px;
position:absolute;
}

    try with this

    CodePudding user response：

    Add position:absolute and top:-75px in dropdown when open.

    .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>
    <iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

    Page link：https//www.codepudding.com/Blockchain/205842.html

    Prev:JavaScript how to build array from nested Object using recursion without mutation
    Next:How can I use the prevState in a state with multiple arguments?
    • Related

    About Us:  Contact Us      Terms of Service       Privacy Policy

    Copyright © 2010-2023，Powered By CodePudding