Pertemuan 7 CSS MENU DROP DOWN.

Slides:



Advertisements
Presentasi serupa
Desain web – pertemuan 10 CSS (Part 3).
Advertisements

PENGERTIAN CSS.
CSS.
HTML - CSS Cascading Style Sheet.
Cascading Style Sheet Oleh : Edy Mulyanto
Latihan CSS.
PERTEMUAN 6. .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px.
CSS Eksternal & Style Elemen
Abdul Haris, S.Kom. Pengertian CSS Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
IRAWATI, S.Kom.,MT. PEMROGRAMAN WEB
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
Modul Design & Pemrograman Web
Bahasa Style CSS L. Erawan.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
X/HTML - CSS - Javascript
Evaluasi Soal UTS.
Pemrograman Berbasis Web CSS
Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Pemrograman internet ABU SALAM, M.KOM.
Cascading Style Sheet (CSS)
PERTEMUAN CSS Pengenalan CSS.
CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS)
(Cascading Style Sheet)
Pemrograman Basis Data Berbasis Web
HTML CSS.
Cascading Style Sheets (CSS)
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
CASCADING STYLE SHEETS (CSS)
CASCADING STYLE SHEET.
Firman Wahyudhie Cascading STYLE SHEET.
Mengubah Text Case Dengan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya.
S1 Teknik Informatika - Unijoyo
PRIN STIANINGSIH TEACHER OF SMK NEGERI 1 PEKANBARU
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
Komponen property yang digunakan dalam css
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
(Cascading Stylesheet)
( Cascading Style Sheet) Bagian 2 (Model Kotak dan Menu)
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Cascading Style Sheet (CSS)
PERTEMUAN 5 CSS IMAGE.
Cascade Style Sheet (CSS)
PIBJ (PEMROGRAMAN INTERNET BERBASIS JAVA)
CSS.
( Cascading Style Sheet) Bagian 1
Komputer Aplikasi IT – 1.
Pemrograman Basis Data Berbasis Web
( Cascading style sheets)
Pemrograman Web HTML (5) Form CSS Andy Haryoko, ST
LAB ict Terpadu universitas budi luhur, lab Januari 2017
Triyanna Widiyaningtyas
Pemrograman Web I --CSS--
Dasar HTML Hypertext Markup Language Dasar HTML.
Cascading Style Sheet (CSS)
APLIKASI KOMPUTER “WEBSITE”
Cascading Style Sheet (CSS)
Perancangan & Pemrograman Web
Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: Inline CSS Embedded (memasang kode ke dalam bagian External.
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
Pertemuan 7 CSS MENU DROP DOWN.
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
List dan Image pada HTML
CSS Cascading Style Sheet
CSS - WEB.
Web Design CSS.
Transcript presentasi:

Pertemuan 7 CSS MENU DROP DOWN

Border Radius Memungkinkan kita untuk menentukan perbatasan bulat, bulat atau latar belakang jika tidak ada batas yang telah ditetapkan. Kurva setiap sudut didefinisikan menggunakan satu atau dua jari-jari, Mendefinisikan bentuknya: lingkaran atau elips.

Contoh : .test{ background-color: #ffffcc; -moz-border-radius: 10px; border: 1px solid #000; padding: 10px; }

CSS Menu Drop Down

Menu Drop Down Menu dropdown adalah menu yang ketika di klik / ditunjuk akan menampilkan sub menu di bawahnya Menu Drop dengan CSS. Dengan CSS maka load akan lebih ringan dengan tampilan yang cukup sederhana.

Buat file menu.css #navMenu { margin:0; padding:0; } #navMenu ul { line-height:30px; #navMenu li { list-style:none; float:left; position:relative; background: url(menu9.gif); #navMenu ul li a { text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:30px; width:150px; display:block; color:black; border:1px solid #fff; #navMenu ul ul { position:absolute; visibility:hidden; top:32px; } #navMenu ul li:hover ul { visibility:visible; #navMenu li a:hover { background-color:yellow; #navMenu ul li:hover ul li a:hover { background:yellow; color:red; .clearfloat { clear:both; margin:0; padding:0;

<li><a href="#">Galeri</a> </li> </ul> Buat File cssdrop.html <html> <head> <title>Latihan Buat Menu</title> <link rel=stylesheet href="menu.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="navMenu"> <ul> <li><a href="#">Home</a> </li> </ul> <li><a href="#">Produk</a> <li><a href="#">Baju</a></li> <li><a href="#">Sepatu</a></li> <li><a href="#">Aksesoris</a></li> <li><a href="#">Tas</a></li> <ul> <li><a href="#">Galeri</a> </li> </ul> <li><a href="#">Member</a> <br class="clearfloat" /> </div> </body> </html>

Hasil menu Drop Down