Simple menu responsive

Simple menu responsive
Simple menu responsive
Simple menu responsive - Dalam sebuah wesite atau blog , menu sangatlah dibutuhkan untuk mempermudah visitor / pengujung dalam menjelajah website atau blog anda , anda bisa memberikan link link tertentu di dalam menu untuk mempermudah dalam mencari sesuatu di blog anda  , contoh nya saja , dalam blog INTERNET RECEH saya menggunakan menu untuk meletakkan tentang , Contact , Sitemap , dll . dengan tujuan untuk mempermudah pengunjung , dan lebih menarik lagi dalam sebuah website / blog memiliki menu yang responsive ( mendukung untuk device / perangkat lain ) .

kali ini saya akan membagikan tutorial cara membuat menu responsive , untuk kali ini saya hanya share yang simple saja , selanjutnya anda yang mengembangkan , langsung saja .




Silahkan login ke BLOGGER.COM > lalu ke menu Tema > Edit HTML > tambahkan code dibawah ini > Simpan Tema .

Keterangan :
HTML = untuk code HTML anda bisa meletakan sesua keinginan anda , dan biasanya di letakkan di header .

CSS = anda bisa menambahkan code CSS tepat diatas code ]]></b:skin>

Javascript = untuk JAVASCRIPT anda bisa menambahkan di atas code </body>
<div class="topnav" id="myTopnav">
  <a href="/">Home</a>
  <a href="#news">About</a>
  <a href="#contact">Disclaimer</a>
  <a href="#about">TOS</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="topNavResponsive()">&#9776;</a>
</div>
.topnav {
  overflow: hidden;
  background-color: #2c3e50;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight:bold
}
.topnav a:hover {
  background-color: #bdc3c7;
  color: black;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<script type="text/javascript">
function topNavResponsive() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Source : W3schools
KRITIK , SARAN , PERTANYAAN ? silahkan tinggalkan comentar

Berikan Komentar
Hide comments

0 Response to "Simple menu responsive"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel