Cara Membuat Menu Navigasi Responsive di Atas Header Blog

Cara Membuat Menu Navigasi Responsive di Atas Header Blog.

CB sudah beberapa kali share cara  membuat menu navigasi responsive di atas header blog. Jika menemukan topbar menu terbaru, apalagi terbaik, cb tes, coba, berhasil, dan share di sini.

Kali ini dari situs templat belajar CB selama ini, yaitu W3C Schools. Sudah dicoba dan berhasil. Menu navigasi atas header blog ini masih bisa dimodifikasi, terutama soal warna backgroundnya.

Ini penampakannya versi mobile dan desktop:

navigasi menu versi mobile
navigasi menu versi mobile

navigasi menu versi desktop
navigasi menu versi desktop


Cara Membuat Menu Navigasi Responsive

Cara memasang dan menerapkannya juga ada di laman demo.

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. Save Template!

Demikian  Cara Membuat Menu Navigasi Responsive di atas Header Blog. Model lainnya ada di Indeks Top Menu.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Labels: Desain Blog
6 Komentar untuk " Cara Membuat Menu Navigasi Responsive di Atas Header Blog"

makasihh gan infonya....akan dicobaa gann

supaya ada searchnya ada ngga gan?

kotak pencarian bikin aja di sidebar, biar fokus dan gak ribet di menu

Min, ditempat saya munculnya palah ada dibawah, bukan diatas...
minta solusinya min, ane pake blogspot

supaya ada ditengah gimana ya gan?

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *