zorako
Absurdity Curator
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Getting Started
First, we need the jQuery library and Bootstrap 4. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:
For jQuery
For Bootstrap 4
Note: Bootstrap JS depends on jQuery to work. Therefore you need to declare jQuery first before declaring boostrap js.
Creating our Database
Next, we create the database that we are going to filter in this tutorial.
I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.
You should be able to create a database named test.
Displaying our Nav
Lastly, we display our nav with the dynamic dropdown list from our database. Create a new file, name it as index.php and paste the codes below.
That ends this tutorial. Happy Coding :)
Download
First, we need the jQuery library and Bootstrap 4. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:
For jQuery
For Bootstrap 4
Note: Bootstrap JS depends on jQuery to work. Therefore you need to declare jQuery first before declaring boostrap js.
Creating our Database
Next, we create the database that we are going to filter in this tutorial.
I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.
You should be able to create a database named test.
Displaying our Nav
Lastly, we display our nav with the dynamic dropdown list from our database. Create a new file, name it as index.php and paste the codes below.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>How to Create a Dynamic Dropdown Menu using PHP/MySQLi and Bootstrap 4</title>
- <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
- </head>
- <body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">SourceCodeSter</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 mr-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">
- Category
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <?php
- //connection
- $conn
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'test'
)
;
- $sql
=
"SELECT * FROM categories"
;
- $query
=
$conn
->
query
(
$sql
)
;
- while
(
$row
=
$query
->
fetch_assoc
(
)
)
{
- echo
"
- <a class='dropdown-item' href='#'>"
.
$row
[
'name'
]
.
"</a>
- "
;
- }
- ?>
- </div>
- </li>
- </ul>
- </div>
- </nav>
- <script src="jquery.min.js"></script>
- <script src="bootstrap4/js/bootstrap.min.js"></script>
- </body>
- </html>
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view the hidden content.