Seperti yang sobat tahu, kemajuan teknologi saat ini sangatlah pesat. Hampir semua hal-hal yang dikerjakan sudah menggunakan sistem komputerisasi. Selain itu sekarang juga banyak dari sistem tersebut yang sudah di-onlinekan atau dengan kata lain membuat dengan basis website. Hal ini menjadikan programmer website banyak yang mencarinya.
Baca juga :
CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP
Cara Mambuat Navigation Menu Website pada PHP
Seperti yang sudah dijelaskan diatas kita akan membuat navigation menu yang biasa digunakan pada header. Oke langsung saja pertama yaitu Anda membuat file .css dan diberi nama style.css, bisa dibuat menggunakan notepad, notepad++, dreamweaver atau yang lainnya. Seperti di gambar saya menggunakan notepad++
Selanjutnya isikan script dibawah ini :
style.css
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background:#CCC;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #3CC;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 40px;
color:black; text-decoration: none;
}
nav ul ul {
background: #669; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Anda bisa edit sendiri untuk warna saat biasa, warna saat fokus(hover), panjang, lebar, dll. Silahkan Anda coba-coba sendiri. Selanjutnya Anda buat file index.html. Cara membuatnya sama seperti tadi dan isikan seperti dibawah ini :
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dery Septian Suwandi</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Pemrograman</a>
<ul>
<li><a href="#">Visual Basic</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Pemrograman Web</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Email</a>
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">MSN</a></li>
</ul>
</li>
<li><a href="#">Twitter</a>
</ul></li>
<li><a href="#">Kampus</a></li>
</ul>
</nav>
</body>
</html>
Untuk index.html juga bisa Anda sesuaikan seperti kebutuhan Anda. Jika Anda ingin setelah diklik akan langsung menuju link Anda bisa ganti '#' dengan link contohnya pada contact ganti # menjadi contact.html.
Untuk hasilnya akan menjadi seperti di bawah ini :
Gimana? mudah kan? Untuk membuat lebih menarik Anda bisa ubah-ubah sendiri sesuai keinginan Anda. Sekian postingan saya tentang Cara Mambuat Navigation Menu Website pada PHP. Semoga bermanfaat dan sampai ketemu lagi pada postingan selanjutnya.
UNTUK UPDATE BERBAGAI ARTIKEL TENTANG PHP MULAI DARI DASAR SAMPE TINGKAT EXPERT BISA KUNJUNGI DEWAN KOMPUTER YANG BARU DISINI.
www.dewankomputer.com
JIKA ANDA INGIN MENDOWNLOAD CONTOH PROGRAM DIATAS TINGGAL KLIK LINK
DOWNLOAD
Cara Mambuat Navigation Menu Website Pada Php ~ Dewan Komputer >>>>> Download Now
BalasHapus>>>>> Download Full
Cara Mambuat Navigation Menu Website Pada Php ~ Dewan Komputer >>>>> Download LINK
>>>>> Download Now
Cara Mambuat Navigation Menu Website Pada Php ~ Dewan Komputer >>>>> Download Full
>>>>> Download LINK