Cara membuat menu responsive tanpa javascript

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

Selamat datang kawan di blog saya yang sederhana ini . Sebelummnya saya mau tanya bagaimana kabarnya kawan ? mudah mudahan pada sehat , amin . Di artikel sebelumnya saya telah berbagi mengenai pengetian CWM ( ClockworkMod ) di android mau tau cwm apa baca sini . Di artikel sebelumnya juga saya telah berbagi mengenai game yang sulit yang ada di android , mau tau kesulitanya seperti apa download sini , atau ingin lihat lihat aja baca sini .

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 .

Silahkan kunjungi blog terbaru saya disini

Kokodean

Friday, April 8, 2016

Cara membuat menu responsive tanpa javascript

No comments:

Post a Comment

Labels