bewoksatukosong.com | hello semuanya balik lagi dengan om bewok, kali ini om bewok mau sharing, bagaimana cara membuat nav bar active yang dinamis, jadi ketika kita pindah ke menu lain, maka navigation bar tersebut berubah warna, nah kali ini kita menggunakan html, css dan php.
Yuk kita buat
Pertama kita buat file nya terlebih dahulu kalian harus buat index.php, navigasi.php, about.php, contact.php, gallery.php dan style.css
Oke selanjutnya kita coding dulu pada bagian index.php
<?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>Ini adalah halaman <?php echo $page; ?> (home.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</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>Ini adalah halaman <?php echo $page; ?> (gallery.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</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>Ini adalah halaman <?php echo $page; ?> (contact.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</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>Ini adalah halaman <?php echo $page; ?> (about.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</footer>
</div>
</body>
</html>
Selanjutnya kita pada bagian style.css
* {
padding: 0;
margin: 0;
}
/* kita buat menu dengan background abu-abu */.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
No comments:
Post a Comment