Dengan menggunakan CSS tampilan Website yang kita buat akan menjadi lebih menarik untuk dilihat. Kali ini saya akan memberikan tutorial mengenai cara membuat menu drop down dengan lebih mudah dan menarik menggunakan CSS.
Tanpa basa-basi lagi kita langsung saja menuju ke TKP oK. Adapun langkah-langkah pengerjaanya dapat saudara ikuti tahapan-tahapan dibawah ini dengan benar :
- Langkah Pertama : Saudara dapat mengcopy Scrip dibawah ini kemudian pindahkan kedalam aplikasi editor seperti Notepad ++ .
Tanpa basa-basi lagi kita langsung saja menuju ke TKP oK. Adapun langkah-langkah pengerjaanya dapat saudara ikuti tahapan-tahapan dibawah ini dengan benar :
- Langkah Pertama : Saudara dapat mengcopy Scrip dibawah ini kemudian pindahkan kedalam aplikasi editor seperti Notepad ++ .
Script Untuk Menu Utama Drop Down : Simpan Dengan Nama Index.php
<head>
<title>www.Peiindostar.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- end #header -->
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Struktur Organisasi</a></li>
<li><a href="#">Visi dan Misi</a></li>
</ul>
</li>
<li><a href="#">Gallery Kegiatan</a></li>
<li><a href="#">Data Statistik</a></li>
<li><a href="#">Wilayah Desa</a></li>
</ul>
</li>
</ul>
</nav>
<!-- end #menu -->
</body>
</html>
- Langkah Kedua : Hampir sama dengan langkah pertama saudara dapat mengcopy pastekan scrip dibawah ini kedalam aplikasi editor yaitu Notepad ++.
Script Untuk Style CSS : Simpan dengan nama Style.css
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #f44903;
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: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; 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 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Sangat mudah dan praktis bukan? Sampai jumpa lagi bersama kami disini di www.Peiindostar.com. Wasalam...
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Struktur Organisasi</a></li>
<li><a href="#">Visi dan Misi</a></li>
</ul>
</li>
<li><a href="#">Gallery Kegiatan</a></li>
<li><a href="#">Data Statistik</a></li>
<li><a href="#">Wilayah Desa</a></li>
</ul>
</li>
</ul>
</nav>
<!-- end #menu -->
</body>
</html>
- Langkah Kedua : Hampir sama dengan langkah pertama saudara dapat mengcopy pastekan scrip dibawah ini kedalam aplikasi editor yaitu Notepad ++.
Script Untuk Style CSS : Simpan dengan nama Style.css
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #f44903;
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: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; 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 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Sangat mudah dan praktis bukan? Sampai jumpa lagi bersama kami disini di www.Peiindostar.com. Wasalam...
0 Komentar untuk "Cara Mudah Membuat Menu Drop Down Web Menggunakan CSS"
------------------------------------------------------------------------------------
ATURAN PEMBERIAN KOMENTAR DAN SARAN :
- SOPAN
- RELEVAN
SILAHKAN BERIKAN KOMENTAR SAUDARA
ATAS PERHATIANNYA SAYA UCAPKAN TERIMAKASIH!!!
-------------------------------------------------------------------------------------