Oke kali ini saya akan berbagi mengenai cara membuat menu responsive tanpa menggunakan javascript . Kebanyakan untuk membuat menu responsive perlu menggunakan javascript tetapi di kesempatan kali ini saya tidak akan menggunakan javascript jadi hanya css dan html saja yang di gunakan .
Sebelumnya saya membuat menunya sederhana saja yang penting kita belajar inti intinya saja . oke mari lanjut kita belajar
*{ max-width: 100% !important; font-family: sans-serif; font-size: 15px; margin:0; padding:0; } ul{ list-style-type:none; } ul li{ position: relative; float: left; width: 100px; height: 40px; line-height: 40px; padding-left: 5px; padding-right: 5px; background-color: #da334a; border-right: 1px solid #fff; } li a{ text-decoration:none; color: #fff; } li ul{ position: absolute; display: none; left:0%; padding-left:0; } li:hover ul{ display:block; } .menu-tampil{ display:none; } input[type=checkbox]{ display:none; } @media only screen and (max-width: 520px){ *{ min-width: 100%; } .menu-tampil{ display: block; background-color: #da3343; } #menu{ display:none; } input[type=checkbox]:checked ~ #menu{ display:block; } ul{ position:static; } ul li , li ul{ width:auto; padding-left:0; padding-right:0; } } MENU
- Homeabout meartikelilmu
- HTMLPHPJava
lalu kalian save dan lihat hasilnya
Kalo itu ukuran yang dekstopnya , kalo yang ukuran lebih kecil atau smartphonenya gini
Oke itu dia cara membuat menu responsive tanpa javascript sederhanakan,mudahkan saya harap sama kawan kawan di edit edit lagi agar lebih bagus dan juga menambahah ilmu . Semoga bermanfaat jangan lupa share artikel ini dan like fans page kami . Oke sampai jumpa di artikel yang lainnya tentunya yang lebih menarik lagi .
