Desain dan
Pemrograman Web 1
PG110 – 3 SKS
© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur
Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260
Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 1

PERTEMUAN 09
MENU BERBASIS CSS
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 2

Menu dengan CSS
 Buat file
baru
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 3

Menu dengan CSS
 Layout > Insert Div Tag
 Nama ID = menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 4

Menu dengan CSS
 Buat daftar menu (enter untuk item menu)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 5

Menu dengan CSS
 Ubah daftar menu menjadi List
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 6

Menu dengan CSS
 Ubah masing-masing item menu menjadi link
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 7

Menu dengan CSS
 Aktifkan object DIV menu (1) dan buat CSS baru (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 8

Menu dengan CSS
 Buat aturan CSS baru, CSS disimpan di dokumen baru
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 9

Menu dengan CSS
 Simpan file CSS
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 10

Menu dengan CSS
 Atur warna background menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 11

Menu dengan CSS
 Atur lebar box menu (2) dan padding (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 12

Menu dengan CSS
 Hasil sementara (box menu berwarna biru)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 13

Menu dengan CSS
 Sorot object <ul> (1) dan buat CSS baru (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 14

Menu dengan CSS
 Selector = #menu ul (2) dan definisikan CSS di
style.css (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 15

Menu dengan CSS
 Ubah type list menjadi none (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 16

Menu dengan CSS
 Atur padding (2), margin (3) box menu item
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 17

Menu dengan CSS
 Item menu menjadi agak renggang dan bullet hilang
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 18

Menu dengan CSS
 Sorot object <a> (1) dan buat aturan CSS baru untuk
mengatur masing2 item menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 19

Menu dengan CSS
 Selector = #menu a (2) dan define di file style.css (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 20

Menu dengan CSS
 Atur font (2), ukuran (3), warna (4) dan hilangkan garis
bawah menu (5)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 21

Menu dengan CSS
 Atur warna background item menu (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 22

Menu dengan CSS
 Atur display menu menjadi “Block” (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 23

Menu dengan CSS
 Atur padding (2) item menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 24

Menu dengan CSS
 Hasil sementara
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 25

Menu dengan CSS
 Buat aturan CSS baru. Selector = #menu a:hover untuk
mengatur CSS saat menu di-hover
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 26

Menu dengan CSS
 Atur warna tulisan (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 27

Menu dengan CSS
 Atur background item menu (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 28

Menu dengan CSS
 Hasil akhir
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 29

Menu dengan CSS
 Artikel lengkap : Membuat Menu CSS dengan
Dreamweaver
 Kembangkan untuk tampilan menu yang lebih
menarik
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 30

Contoh Menu
 Listamatic
http://css.maxdesign.com.au/listamatic
 CSS Based Menu
http://www.smashingmagazine.com/2007/03
/14/css-based-navigation-menus-modern-
solutions/
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 31

Terima Kasih
Fakultas Teknologi Informasi
Universitas Budi Luhur
http://fti.bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 32