Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat menu active otomatis di php part2, pada sesi sebelumnya teman-teman sudah buat beberapa file seperti file index.php, file navigasi.php dan file kontak.php. Dari ketiga file tersebut dimana file index.php adalah file untuk halaman home, file navigasi.php adalah file yang menampung kondisi untuk pengecekan variabel yang sama dari setiap halaman yang aktif, sedangkan file kontak.php adalah file untuk halaman kontak. Lantas untuk selanjutnya masih ada beberapa file lagi yang harus teman-teman buat, dan ditambahkan lagi dengan file css, dimana file tersebut untuk menampung property warna yang digunakan dari selektor active tersebut.
Berikut Tahapan Lanjutannya :
- Selanjutnya teman-teman buat lagi satu file dengan nama lokasi.php, dan ketikan kode seperti di bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $halaman = "lokasi"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Menu Active Otomatis Di PHP By Dumet School</title> <link rel="stylesheet" type='text/css' href="http://fonts.googleapis.com/css?family=Strait" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="title"> <h1>Halaman <?php echo $halaman; ?></h1> </div> <?php include "navigasi.php"; ?> </body> </html> |
- Jika sudah, teman-teman save terlebih dahulu file tersebut.
- Selanjutnya teman-teman buat lagi satu file dengan nama style.css, dan ketikan kode seperti di bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
* { margin: 0; padding: 0; } body { background-color: #f00; } h1 { text-align: center; margin: 5% auto 0; color: #f9f9f9; font-family: 'Strait', sans-serif; } .menu-container { display: block; position: relative; width: 700px; background-color: #f3f0ef; margin: 2% auto 0; padding: 0; border-radius:5px; box-shadow: inset 0 0 1px rgba(255,255,255,1); box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.1); } .nav{ background-color: #111; height:40px; border-radius:5px 5px 0 0; } .settings { height:20px; float:right; background-image:url(http://i.imgur.com/CLs7u.png); width:20px; margin:10px; } .menu ul { list-style:none; } .menu ul li { border-top:1px solid rgba(0,0,0,0.1); padding:11px 10px; box-shadow:inset 0 1px 1px #fff; text-indent:10px; } .menu ul li a { font-size:14px; color:#a4a3a3; font-family: 'Strait', sans-serif; font-size:14px; text-decoration:none; text-shadow: 1px 1px 1px #fff; } .menu ul li img { float:left; margin:-2px 0 0 0; } .menu ul li:hover { border-left:3px solid #111; background-color:rgba(0,0,0,0.02); } .active { border-left:3px solid #111; background-color:rgba(0,0,0,0.02); } |
- Jika sudah teman-teman save terlebih dahulu file tersebut, dan jalankan di browser teman-teman dengan mengetikan http://localhost/nama_folder_project
Sampai disini penjelasan saya mengenai cara membuat menu active otomatis di php, semoga bermanfaat.