Home » , » Cara mudah buat menu Navigasi Responsive diatas Header - garo-Blog

Cara mudah buat menu Navigasi Responsive diatas Header - garo-Blog

Assalamu'alaikum, selamaat siang sobat semuanya,kali ini saya akan berbagi tentang masalah blog yaitu tentang Cara mudah buat menu Navigasi Responsive diatas Header. Nah sobat semuanya didaalm sebuah blog perlu adanya suatu navigasi yang bagus dan bisa membuat si pengunjung bisa nyaman dan enak dilihatnya pada blog kita.

Dalam Hal ini sobat,  ada cara unik yang bisa membuat blog kita nyaman untuk dilihat visitor,

Cara memasang dan menerapkannya juga ada disini

1. KODE CSS
Pasang di atas kode ]]></b:skin>

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

2. KODE HTML

Pasang di bawah kode <body>

<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

3. KODE JAVASCRIPT

Pasang di atas kode </body>

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

4. Kemudian Simpan Template

Semoga bermanfaat yah sob.

Thanks for reading & sharing Gararoblog

Previous
« Prev Post

0 komentar:

Posting Komentar

Cari Blog Ini

Popular Post

Pengikut

Total Tayangan Halaman