Kali ini saya akan membuat menu Horizontal dan Menu Dropdown menggunakan HTML dan CSS.
1. Pertama buat file menu.html dan buatlah kodenya seperti di bawah ini :
<!DOCTYPE html>2. Lalu Buatlah file menu.css untuk membuat desain tampilan pada menu :
<html>
<head>
<meta charset="utf-8">
<title>Membuat Menu Horizontal dan Menu Dropdown</title>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Beranda</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">banuaril10.blogspot.com</a></li>
</ul>
</li>
</ul>
</nav> </body>
</html>
nav ul ul {
display: none;
margin: 0px auto;
padding: 15px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: linear-gradient(#687587, #404853);
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {
float: left;
color: white;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: white; 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: 25px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
3. Link file menu.css ke file menu.html dengan menambahkan coding berikut diantara <head> </head>, sbb :
<link href="menu.css" rel="stylesheet" type="text/css">
simpan kedua file html dan css di folder yang sama, lalu jalankan file menu.html dan lihat hasilnya :)
Selamat Mencoba :)
Jika ingin konsultasi masalah pemograman php, javascript dll, boleh hubungi nomor : 088211832975
0 komentar:
Post a Comment