How to Make a Dynamic Active Navigation Bar Html Css Php
Table of Contents [Show]
Hello everyone, we are back with uncle duck, this time uncle duck wants to share, how to make a dynamic active nav bar, so when we move to another menu, the navigation bar changes color, so this time we use html, css and php.
Let's make it.
First, we create the files, first you have to create index.php, navigation.php, about.php, contact.php, gallery.php and style.css
Okay, next we code first in the index.php section
<?php
$title = "Menubar dinamis with PHP";
$page = "Home";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>This is a page <?php echo $page; ?> (home.php) </h2>
</div>
<!-- footer -->
<footer>
Want to learn programming? Come on, visit our website at Papinsa
</footer>
</div>
</body>
</html>
gallery.php
<?php
$title = "Menubar dinamis with PHP";
$page = "Gallery";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>This is a page <?php echo $page; ?> (gallery.php) </h2>
</div>
<!-- footer -->
<footer>
Want to learn programming? Come on, visit our website at Papinsa
</footer>
</div>
</body>
</html>
contact.php
<?php
$title = "Menubar dinamis with PHP";
$page = "Contact";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>This is a page <?php echo $page; ?> (contact.php) </h2>
</div>
<!-- footer -->
<footer>
Want to learn programming? Come on, visit our website at Papinsa
</footer>
</div>
</body>
</html>
about.php
<?php
$title = "Menubar dinamis with PHP";
$page = "About";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>This is a page <?php echo $page; ?> (about.php) </h2>
</div>
<!-- footer -->
<footer>
Want to learn programming? Come on, visit our website at Papinsa
</footer>
</div>
</body>
</html>
Next we go to the section style.css
* {
padding: 0;
margin: 0;
}
/* let's create a menu with a gray background */.menu {
background: #333;
padding: 14px 16px;
margin: 0;
}
.menu ul .active {
text-decoration: underline;
}
.menu ul .active a {
color: red;
text-align: center;
}
.menu ul li {
list-style: none;
text-decoration: none;
display: inline;
padding: 14px 16px;
line-height: 50px;
}
.menu ul li a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
}
.content {
padding: 1rem;
line-height: 20px;
height: 300px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
Lalu kita koding pada bagian navigasi.php
<div class="menu">
<ul>
// jika page yang kita klik adalah home / about / gallery / contact
// tolong aktifkan class active yang berada
// di css sehingga ia akan berubah menjadi merah
<li <?php if ($page == "Home") echo "class='active'"; ?>> <a href="index.php">Home</a></li>
<li <?php if ($page == "About") echo "class='active'"; ?>> <a href="about.php">about</a></li>
<li <?php if ($page == "Gallery") echo "class='active'"; ?>> <a href="gallery.php">gallery</a></li>
<li <?php if ($page == "Contact") echo "class='active'"; ?>> <a href="contact.php">contact</a></li>
</ul>
</div>
Maka hasilnya seperti dibawah ini yaa
Sampai jumpa di tutorial selanjutnya
0 Comments