Cara Mambuat Navigation Menu Website pada PHP ~ Dewan Komputer

Cara Mambuat Navigation Menu Website pada PHP - Hai sobat pada kesempatan kali ini saya akan memposting tentang cara membuat navigation menu pada website. Bagi Anda pengembang website pasti tahu apa itu navigation menu. Menu ini bisa diletakkan pada header atau menu atas website dan bisa juga di footer atau menu bawah website. Namun kebanyakan menu seperti ini biasa ada diatas atau header. Oleh karena itu membuat navigation menu seperti ini sangatlah berguna bagi Anda calon pengembang website profesional.
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

About Admin

Saya senang berbagi ilmu agar semua orang tidak lagi asing terhadap ilmu-ilmu yang ada pada dunia komputer. Selain itu saya juga memberikan ilmu-ilmu tentang pemrograman ke blog ini khususnya untuk yang kuliah jurusan komputer ;) ;) ;)

1 komentar:

Click here for komentar

Anonim

admin

13 Maret 2022 pukul 12.19 ×

Cara Mambuat Navigation Menu Website Pada Php ~ Dewan Komputer >>>>> Download Now

>>>>> 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