Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang membuat dropdown menu. Tentu teman sudah seringkan membuka website di internet. Ketika teman – teman membuka website tentu yang dituju pertama kali adalah menu websitenya. Ketika kursor (petunjuk dalam monitor) laptop atau computer teman – teman berada tepat di atas menu tiba muncul menu dari bawah. Tentu teman – teman bertanya kok bisa gitunya? Itulah yang dinamakan drop down menu. jadi drop down menu adalah menu yang menurun kebawah dengan ketentuan sub menunya tergantung pada si pembuatnya. Pada umumnya hanya satu sub kerena kalau terlalu anyak kurang efektif juga.
Oke langsung saja kita praktekkan saja.
- Pertama buka text editor teman – teman. lalu copy paste script, simpan dengan nama bebas .
<p><!DOCTYPE html></p><p><html></p><p><head></p><p> <title></title></p><p></head></p><p><body></p><p> <menu></p><p> <ul></p><p> <li><a href=""> home</a></li></p><p> <li><a href=""> about</a> </li></p><p> <li><a href=""> contact</a></p><p> <ul></p><p> <li><a href="">contact 1</a></li></p><p> <li><a href="">contact 2</a></p><p> <ul></p><p> <li><a href="">contact 1</a></li></p><p> <li><a href="">contact 2</a></li></p><p> <li><a href="">contact 3</a></li></p><p> <li><a href="">contact 4</a></li></p><p> </ul></p><p> </li></p><p> <li><a href="">contact 3</a></li></p><p> <li><a href="">contact 4</a></li></p><p> </ul></p><p> </li></p><p> <li><a href=""> blog </a></li></p><p> <li><a href=""> service</a></li></p><p> </ul></p><p></menu></p><p></body></p><p></html></p><p> </p><ul><li>Lalu save dan lihat pada browsernya.</li><li>Berikutnya copy paste script css berikut.</li></ul><p><style type="text/css"></p><p> *{</p><p> margin:0;</p><p> padding: 0;</p><p> }</p><p> menu> ul> li { float: left;}</p><p> menu li {</p><p> position: relative; list-style: none; width: 100px;</p><p> }</p><p> menu li a{</p><p> text-decoration: none;</p><p> line-height: 40px;</p><p> background:pink;</p><p> display: block;</p><p> padding-left:5px;</p><p> }</p><p> </p><p> menu a:hover{</p><p> background:yellow;</p><p> }</p><p> </p><p> menu li> ul{</p><p> display: none; position: absolute;</p><p> }</p><p>menu li:hover ul{</p><p> display: block;</p><p>}</p><p> </p><p>menu ul ul li> ul {</p><p> left: 100%;top: 0px;</p><p>}</p><p> </p><p> </style></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
- Kalau sudah save lagi dan lihat pada browser maka hasilnya akan seperti dibawah ini ;
Oke itulah sedikit ilmu dari saya tentang cara membuat drop down menu dari saya, semoga dapat bermanfaat bagi teman – teman semua.