Cara Mudah Membuat Menu Navigasi Pada Postingan

Cara Mudah Membuat Menu Navigasi Pada Postingan - Menu Navigasi identiknya terletak dalam wilayah selector elemen tag HEADER, sehingga cara membuat terbilang mudah, karena menu navigasi bisa dikatakan sebuah diagram tabel untuk menyimpan beberapa file blog, katakanlah seperti URL beranda dengan teks HOME, profil about me dan masih banyak lagi. Akan tetapi menu tersebut dapat kita pindahkan letaknya pada postingan, sehingga saat Anda melibatkan beberapa link dalam tulisan (Internal Link) dapat kita susun menjadi sebuah menu navigasi pada postingan blog Anda seperti tombol DEMO SHOW dibawah ini




DEMO SHOW


Seperti halnya navigasi breadcrumb label pada postingan, Elemen HTML pada kode-nya dibungkus dengan tag kondisional dengan pengaturan kelas-kelas CSS yang dapat kita ubah tampilan defaultnya, begitu juga dengan menu navigasi yang dapat kita pindahkan letaknya atau merubah tampilannya menjadi lebih berwarna seperti Cara Mudah Membuat Menu Navigasi Pada Postingan yang saya ilustrasikan seperti gambar dibawah ini

Menu Navigasi Sebelumnya -

Membuat Navigasi Menu Fixed Full RotateX

Seandainya SAHABAT BLOGGER 77 ingin memberi nuansa berbeda pada postingan Anda dengan membuat menu navigasi pada postingan, berikut CSS class elemen untuk kodenya

#popnav {
  width:130px;
  margin:-3.1em 0 -3em 0;
  background-color:#362C23;
  padding:7px 15px;
  font:normal normal 11px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#A1917B;
  position:relative;
  cursor:pointer;}

#popnav:after {
  content:"";
  width:0;
  height:0;
  border:5px solid transparent;
  border-bottom-color:white;
  position:absolute;
  top:6px;
  right:12px;}

#popnav.down:after {
  border:5px solid transparent;
  border-top-color:white;
  top:13px;}

#popnav ul {
  border-top:3px solid orange;
  width:170px;
  background-color:#201A16;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin:0 0;
  padding:0 0;
  display:none;}

#popnav li {list-style:none;margin:0 0;padding:0 0;}
#popnav li a {
  padding:10px 15px;
  display:block;
  text-decoration:none;
  color:#ccc;
  font-weight:bold;
  font-size:11px;}

#popnav li a:hover {background-color:#080;color:white;}
#popnav:hover ul.fallback {display:block}

Pembangun hover fallback Menu Navigasi
Tambahkan sedikit JavaScript berikut untuk memberi sedikit efek pada tombol menu navigasinya dengan slideToggle pada selector "ul"

$(function() {
    $('#popnav ul').removeClass('fallback');
    $('#popnav').click(function(e) {
        $(this).toggleClass('down');
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
    $(document).click(function() {
        $('#popnav ul:visible').slideUp();
        $('#popnav').removeClass('down');
    });
});

Tahap Terakhir Peletakan HTML

<nav id="popnav">Model Navigasi
<ul class="fallback">
<li><a href="...URL-Anda/">Menu Navigasi 5</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 4</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 3</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 2</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 1</a></li>
</ul>
</nav>

Semua kode pembangun CSS navigasi diatas tidak permanen, jadi Anda dapat mengubah letak dan warna sesuai nice blog Anda, Silahkan sesuaikan dimana letak yang Anda inginkan.