How to Dynamic Navigation with Active Class in PHP?
Teams applying “How to Dynamic Navigation with Active Class in PHP?” in a production project can use practical job ads to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.
Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.
Hi friends,
In this post, we will learn how to dynamic navigation with active class in PHP. I explained simply how to add a dynamic active class on a selected page in PHP. Here you will learn how to implement PHP dynamic navigation with an active class example. This tutorial will give you a simple example of how to add an active class dynamically in PHP.
I will give you a simple example of how to dynamically add active classes to nav with PHP.
So let's see bellow example:
home.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Heebo', sans-serif;
}
.solo-main{
background-color: #222222;
}
.solo-title{
font-size: 29px;
}
.solo-nav ul li a{
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
.solo-nav ul li a.active{
background-color: #ff9800;
color: white;
}
img{
background-color: white;
height: 45px;
}
</style>
</head>
<body>
<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>
<div class="container-fluid solo-main p-0">
<div class="container p-0">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>
<button class="navbar-toggler bg-info" 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 solo-nav" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-md-12 text-center mt-5 pt-5">
<h1 class="display-1">Nicesnippets.com - Home</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>blog.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Heebo', sans-serif;
}
.solo-main{
background-color: #222222;
}
.solo-title{
font-size: 29px;
}
.solo-nav ul li a{
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
.solo-nav ul li a.active{
background-color: #ff9800;
color: white;
}
img{
background-color: white;
height: 45px;
}
</style>
</head>
<body>
<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>
<div class="container-fluid solo-main p-0">
<div class="container p-0">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>
<button class="navbar-toggler bg-info" 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 solo-nav" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-md-12 text-center mt-5 pt-5">
<h1 class="display-1">Nicesnippets.com - Blog</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>contact-us.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>How to Dynamic Navigation with Active Class in PHP? - Nicesnippets.com</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Heebo&family=Mulish&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Heebo', sans-serif;
}
.solo-main{
background-color: #222222;
}
.solo-title{
font-size: 29px;
}
.solo-nav ul li a{
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
.solo-nav ul li a.active{
background-color: #ff9800;
color: white;
}
img{
background-color: white;
height: 45px;
}
</style>
</head>
<body>
<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>
<div class="container-fluid solo-main p-0">
<div class="container p-0">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand solo-title mb-0 text-light font-weight-bold" href="#"><img src="nice-logo.png"></a>
<button class="navbar-toggler bg-info" 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 solo-nav" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'home') ? 'active':''; ?>" href="home.php">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'blog') ? 'active':''; ?>" href="blog.php">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link text-light p-3 <?= ($activePage == 'contact-us') ? 'active':''; ?>" href="contact-us.php">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-md-12 text-center mt-5 pt-5">
<h1 class="display-1">Nicesnippets.com - Contact-us</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>Output:
I hope it will help you.....
- How To Use Php Conditional Statement Example
- How to Check if String Contains Regex in PHP?
- PHP Array_column() Function Example
- PHP Generate List of Random Numbers Between 0 and 100 Example
- How to User Login with Facebook in PHP?
- How to Explode Every Character into Array Using PHP Example?
- PHP Form Validation Tutorial
- PHP Convert XML to JSON Example