CSS MENU DROP DOWN

1
Pertemuan 7

• CSS MENU DROP DOWN

2
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.

3
Contoh

• .test
• background-color ffffcc
• -moz-border-radius 10px
• border 1px solid 000
• padding 10px

4

• CSS Menu Drop Down

5
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.

6
Buat file menu.css

• navMenu
• margin0 padding0
• navMenu ul
• margin0 padding0
• line-height30px
• navMenu li
• margin0 padding0
• list-stylenone floatleft
• positionrelative
• background url(menu9.gif)
• navMenu ul li a
• text-aligncenter
• font-familyArial, Helvetica, sans-serif
• text-decorationnone line-height30px
• width150px displayblock
• colorblack border1px solid fff

• navMenu ul ul
• positionabsolute visibilityhidden
• top32px
• navMenu ul lihover ul
• visibilityvisible
• navMenu li ahover
• background-coloryellow
• navMenu ul lihover ul li ahover
• backgroundyellow colorred
• .clearfloat
• clearboth margin0 padding0

7
Buat File cssdrop.html

• lthtmlgt
• ltheadgt
• lttitlegtLatihan Buat Menult/titlegt
• ltlink relstylesheet href"menu.css"
  type"text/css"gt
• lt/headgt
• ltbodygt
• ltdiv id"wrapper"gt
• ltdiv id"navMenu"gt
• ltulgt
• ltligtlta href""gtHomelt/agt
• lt/ligt
• lt/ulgt
• ltulgt
• ltligtlta href""gtProduklt/agt
• ltulgt
• ltligtlta href""gtBajult/agtlt/ligt
• ltligtlta href""gtSepatult/agtlt/ligt
• ltligtlta href""gtAksesorislt/agtlt/ligt

• ltulgt
• ltligtlta href""gtGalerilt/agt
• lt/ligt
• lt/ulgt
• ltulgt
• ltligtlta href""gtMemberlt/agt
• lt/ligt
• lt/ulgt
• ltbr class"clearfloat" /gt
• lt/divgt
• lt/divgt
• lt/bodygt
• lt/htmlgt

8
Hasil menu Drop Down