Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

VIDEO TUTORIAL MIKROTIK VIDEO + MODUL TRAINING ORDER BISA VIA TOKOPEDIA KLIK LINK GAMBAR

VIDEO TUTORIAL MIKROTIK  VIDEO + MODUL TRAINING ORDER BISA  VIA TOKOPEDIA KLIK LINK GAMBAR
Update Video Tutorial > Lebih dari 350 Video Tutorial MIkrotik

Jadwal Training Mikrotik Running Setiap Awal dan Akhir Bulan

Excel Fundamental, Excel Advanced, Dan Excel Programming VBA

IT TRAINING CENTER CONTACT : 0812-1451-8859 / 081-1219-8859

Langkah Mudah Membuat Drop Down Menu 3 Level dengan CSS Menggunakan Editor Dreamweaver CS 6


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>

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


Share

Artikel Lainnya :



1 comment:

  1. Makasih kang ane udah terapin di blog ane dan work. mau nyoba buat ngembangin ke web design :)

    ReplyDelete

Training Bulan ini

Padepokan IT Course

Lokasi Training
Jl. H.Gofur Komplek Graha Bukit Raya 1 Blok G3 No 16 Lantai 3, Cilame, Bandung Barat

Telp : 081214518859 (WhatsApp)
E-Mail : padepokanit.course@gmail.com
Instagram : @padepokanit
Website : www.padepokanit.com

Info Site

User Online Padepokan-IT Course

IT Tutorial, Training & IT Solution