Skip to main content

Simple menu responsive

Simple menu responsive
Daftar Isi [sembunyikan]
    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

    Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
    Buka Komentar
    Tutup Komentar