Cara membuat menu responsive tanpa javascript

Cara membuat menu responsive tanpa javascript
Di Posting Oleh : wandi
Kategori : Pelajaran Pemprograman web

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

<!DOCTYPE html><html><head><style>*{  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;  } } </style></head><body><label for="menu-tampil"class="menu-tampil">MENU</label><input type="checkbox"id="menu-tampil"/><div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">artikel</a></li>
<li><a href="#">ilmu</a>  <ul class="hidden">
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
</ul>
</div>
</body></html>

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 .

Mau liat atau download source code aplikasi premium bisa disini.

Cara membuat menu responsive tanpa javascript

0 Komentar