membuat menu navigasi

Pernah melihat menu navigasi milik Mbah G (versi seluler)? Pastinya pernah lah ya. Menu navigasi geser kesamping (side Navigation) yang mirip gorden Warteg atau biasa saya sebut sebagai menu ciluk baa.

Seperti kita ketahui, banyak sekali model menu navigasi pada blog / web. Seperti menu dropdown, menu horizontal, menu laman, dan lainnya.

Untuk tutorial kali, saya ingin mencoba membuat menu navigasi slide samping dengan berbagai variasinya. Seperti efek buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan mirip seperti yang saya sebut di atas, hehehe...

Berikut ini, cara membuat menu navigasi slide samping di Blog. Dengan posisi tombol menu navigasi di atas header Blog.

Kode HTML
Tambahkan kode HTML berikut pada template Anda. Copy kode yang ditandai warna merah, kemudian letakkan sesuai pola di bawah.

Jika kesulitan atau tidak ada pola kode HTML seperti di bawah (pola kode HTML template Blogspot). Letakkan saja tepat di bawah kode <body>. Kemudian pasang kode penutup </div> di atas kode </body>.

<body>

.....

.....

  <div id='main-nav'>
    <div class='navisa' id='myNavix'>
      <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'>&amp;times;</a>
      <a href='#'>Tentang</a>
      <a href='#'>Layanan</a>
      <a href='#'>Kebijakan</a>
      <a href='#'>Kontak</a>
    </div>

    <div class='topnav'>
      <button class='tnav' onclick='openNav()'>&#8801;</button>
      <span class='thome'><a expr:href='data:blog.homepageUrl'>Home</a></span>
      <!-- tambahkan element lain di sini -->
    </div>
    <div class='content'>

.....

.....

    <!-- content -->
    </div>
    </div>
    <div class='content-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </div>
 </div>

.....

.....

</body>

Keterangan:

Baris kode pertama (<div class='main-nav'>) dan penutupnya (</div>) hanya berlaku jika Anda memilih untuk membuat menu navigasi push content.
Kode tersebut digunakan untuk mendorong semua element yang terbungkus di dalamnya.
Anda juga bisa menambahkan element lain di samping tombol navigasi. Sepeti kotak pencarian, tombol berbagi, judul Blog, atau yang lainnya.
Ganti kode # dengan url halaman Anda.

Pelajari juga:

Kode CSS
Tambahkan kode CSS berikut. Letakkan di atas kode ]]></b:skin> atau </style>.

/*Navigasi Samping*/

.navisa {
    position: absolute;
    height: 100%;
    width: 0;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;}

.topnav {
    overflow: hidden;
    margin: 0;
    width: 100%;
    padding: 4px 0 0 0;
    position: relative;
    height: 45px;
    line-height: 45px;
    background: #666666;}

.thome {
    font-size: 20px;
    padding: 5px;
    font-weight: 400;
    margin-left: 10px;}

.thome a {
    color: #ffffff;
    text-decoration: none;}

.tnav {
    color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 10px;
    border: none;
    border-radius: 20px;
    background: #888;
    margin-left: 10px;
    font-size: 25px;
    font-weight: 600;}

.navisa a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s}

.navisa a:hover, .offcanvas a:focus{
    color: #f1f1f1;}
 
.navisa .closebtn {
    top: 0;
    right: 25px;
    position: absolute;
    font-size: 36px;
    margin-left: 50px;}

#main-nav {
    transition: margin-left .5s;}

@media screen and (max-height: 450px) {
    .navisa a {font-size:18px;}
    .navisa {padding-top:15px;}}

@media screen and (max-width: 1024px) {
    .navisa {position: fixed;}}

Keterangan:

Kode CSS di atas digunakan untuk membuat menu navigasi berada di sisi kiri.
Jika Anda memilih untuk membuat menu navigasi di samping kanan, ganti semua kode CSS yang berbau left menjadi right dan right menjadi left.