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
Tidak ada komentar:
Posting Komentar