Cascading
Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam.Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft
Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk
dapat digunakan bersama-sama dalam beberapa berkas File. Pada umumnya CSS
dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan
XHTML.
CSS dapat mengendalikan ukuran, gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Berikut
akan di jelaskan cara membuat dropdown menu pada halaman web menggunakan
dreamweaver. Langkahnya adlah sebagai berikut:
1.
Buka Aplikasi Dreamweaver, dan Buat dua File
Menu.html dan style.css
2.
Selanjutnya buatlah struktur HTML dari menu
yang ingin di gunakan, script seperti terlihat pada gambar dibawah ini
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">Summer 2013</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Winter 2013</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Summer 2014</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Winter 2014</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Summer 2015</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<body>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">Summer 2013</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Winter 2013</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Summer 2014</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Winter 2014</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
<li><a href="#">Summer 2015</a>
<ul>
<li><a href="#">Outdoor</a></li>
<li><a href="#">Combi</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<body>
</body>
</html>
3.
Selanjutnya Cek di Browser, Hasilnya Masih Belum
berbentuk Menu yang diinginkanTampak Biasa karena belum di Kombinasi dengan CSS,
seperti terlihat pada gambar dibawah ini
4.
Selanjutnya Buat Script CSS untuk Mempercantik
Menu Scriptnya Seperti Terlihat Dibawah
nav
ul ul {
display:
none;
}
nav
ul li:hover > ul {
display:
block;
}
nav
ul {
background:
#efefef;
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: 10px 22px;
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:
10px 22px;
color:
#fff;
}
nav
ul ul li a:hover {
background:
#4b545f;
}
nav
ul ul ul {
position:
absolute; left: 100%; top:0;
}
Berikut
penjelasan dari code css:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
Script ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di
tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.
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;
}
Script ini adalah styling untuk submenu. Product mempunyai submenu Summer 2013
dengan sub menu nya lagi Outdoor dan Combi,
5.
Jika sudah Cek di
Browser maka tampilan akhir dari code diatas adalah seperti ini:
Selamat Mencoba
Makasih kang ane udah terapin di blog ane dan work. mau nyoba buat ngembangin ke web design :)
ReplyDelete