Tutorial belajar CSS lanjutan : Belajar
membuat menu Dropdown sederhana
Menu dropdown adalah
sebuah menu navigasi yang sangat populer di gunakan oleh pengguna web, bentuk
nya yang simpel tetapi memiliki peran penting membuat dropdown banyak di
gunakan. pada tutorial kali ini kita akan belakar membuat sebuah menu dropdown
yang sangat sederhana.dengan syntax yang sederhana, CSS yang sederhana,dan
tampilan yang sederhana pula.
di sini saya hanya
akan menjelaskan dan memberikan contoh pembuatan menu dropdown sederhana dan
anda bisa mengembangkan nya lebih jauh lagi sesuai keinginan dan kreatifitas anda
sendiri.
pada dasar nya menu
dropdown di buat dari list ordered list atau unordered list, yang kemudian di
olah dengan sentuhan CSS sesedemikian rupa sehingga menjadi sangat berbeda dari
yang asal nya hanya list .
berikut ini adalah
contoh menu dropdown yang akan kita buat .
membuat menu dropdown dengan css
untuk langkah awal
yang harus kita lakukan adalah membuat list atau daftar menu yang akan kita
buat . membuat list pada html sudah di jelaskan pada tutorial html membuat
list daftar dengan html .
berikut penulisan
pembuatan list menu :
syntax list menu
dalam membuat menu
dropdown kita akan membutuhkan css, kali ini kita akan menggunakan css dengan
external style css . tambahkan penghubung html ke css nya
penghubung html dengann css
syntax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<link
rel="stylesheet" href="style.css"
type="text/css">
</head>
<body>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">TUTORIAL</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JQUERY</a></li>
</ul>
<li><a href="#">DOWNLOAD</a></li>
<li class="logout"><a href="logout.php">LOG OUT</a></li>
</ul>
</nav>
</body>
|
save file html
tersebut dengan index.html atau terserah anda dan jalankan pada browser untuk
melihat hasil pembuatan list menu tadi .
menu list html
nah list dari menu
sudah tersedia. nah bagaimana selanjutnya ? kita hanya tinggall menambahkan css
atau tinggal memanipulasi tampilan dari menu list tersebut.
|
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
|
nav {
background:#0C9;
width:100%;
height:50px;
}
nav ul {
list-style:none;
width:100%;
height:50px;
padding-left:0.5px;
}
nav ul a {
text-decoration:none;
}
nav ul li ul {
display:none;
padding-left:0px;
width:150px;
}
nav ul li:hover ul {
display:block;
padding-top:20px;
}
nav ul li:hover {
background:#0CC;
}
nav ul li {
float:left;
width:125px;
height:35px;
background:#0C9;
text-align:center;
padding-top:15px;
}
nav a {
color:#FFF;
font-size:12px;
font-family:sans-serif;
}
.logout {
float:right;
}
|
syntax di atas adalah
penulisan css untuk mengolah tampilan list menu .
css menu list sederhana
pada contoh di atas
saya suah menambahkan comment untuk menjelaskan fungsi masing2 syntax css.
save dengan nama
style.css.
tan tampilan dari
dropdown sederhana akan seperti ini :
membuat menu dropdown dengan css
0 comments
Post a Comment