Saved Bookmarks
| 1. |
Can a Bootstrap Dropdown menu be built to drop up rather than down? |
|
Answer» <P>A dropdown menu is a standard menu that drop down. But, for your website or web project, if you WANT it to drop up, then it is possible. The following is an EXAMPLE that has drop up menu instead of dropdown. We used the .dropup class in DIV to fulfill our purpose. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dropup</h2> <p>Example of menu upwards i.e. drop up:</p><br> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Demo <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>The output looks like this: Now, clicking on the menu will generate the menu upwards i.e. dropup: |
|