Cara Membuat Menu Dropdown Dengan HTML

Cara membuat Menu Dropdown dengan HTML & CSS

Menu dropdown adalah menu yang ketika di klik / ditunjuk akan menampilkan sub menu di

bawahnya, seperti terlihat pada gambar berikut:

Nah.., untuk membuatnya silahkan anda buat file html dengan nama menu.html, dan ketikkan kode

html berikut:

1. <html>2. <head>3. <title>Membuat Menu Dropdown dengan CSS</title>4. <link rel="stylesheet" href="menu.css" type="text/css"/>5. </head>6. <body>7. <div id='ddmenu'>8. <ul>9. <li class='active'><a href='index.html'>Home</a></li>10. <li class='has-sub'><a href='#'>Produk</a>11. <ul>12. <li><a href='#'>Produk 1</a></li>13. <li class='last'><a href='#'>Produk 2</a></li>14. </ul>15. </li>16. <li><a href='#'>Tentang Kami</a></li>17. <li class='last'><a href='#'>Hubungi Kami</a></li>18. </ul>19. </div>20. </body>21. </html>

http://dosen.unived.ac.id/hari/wp-content/uploads/sites/3/2013/03/menu.png

Selanjutnya buatlah file css pada folder yang sama dengan file html dengan nama menu.css, dan

ketik kode CSS berikut:

1. #ddmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }

2. #ddmenu > ul {list-style:inside none; padding:0; margin:0;} 3. #ddmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left;

display:block; position:relative;} 4. #ddmenu > ul > li > a{ outline:none; display:block; position:relative;

padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }

5. #ddmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 6. #ddmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px

solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 7. #ddmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 8. #ddmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px;

right:6px; border:5px solid transparent; border-top:5px solid #fff; } 9. #ddmenu > ul > li.has-sub:hover > a:before{top:19px;} 10. #ddmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f;

padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 11. #ddmenu ul li.has-sub:hover > ul, #ddmenu ul li.has-sub:hover >

div{display:block;} 12. #ddmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 13. #ddmenu ul li > ul, #ddmenu ul li > div{ display:none; width:auto;

position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }

14. #ddmenu ul li > ul{width:200px;} 15. #ddmenu ul li > ul li{display:block; list-style:inside none; padding:0;

margin:0; position:relative;} 16. #ddmenu ul li > ul li a{ outline:none; display:block; position:relative;

margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }

17. 18. 19. #ddmenu, #ddmenu > ul > li > ul > li a:hover{ background:#333333; background:-

moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }

20. #ddmenu{border-color:#000;} 21. #ddmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 22. #ddmenu > ul > li > a:after{border-color:#444;} 23. #ddmenu > ul > li > a:hover{background:#111;}

Anda juga bisa hanya dengan SATE (Salin Tempel) alias Copy Paste dari kode yang sudah ada

disini, silahkan dikembangkan pada website anda.

Cara Membuat Menu Dropdown Dengan HTML

Documents

Transcript of Cara Membuat Menu Dropdown Dengan HTML