in

Cara membuat menu responsive tanpa javascript

Logo css 3

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

lalu kalian save dan lihat hasilnya

ukuran full
Kalo itu ukuran yang dekstopnya , kalo yang ukuran lebih kecil atau smartphonenya gini

smarthpohone atau lebih kecil

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 .

Written by Bago Cyber