Cara Membuat Menu Navigasi samping di Viomagz - Susah Tidur

Cara Membuat Menu Navigasi samping di Viomagz

Cara membuat Menu navigasi samping di Viomagz
Cara Membuat Menu Navigasi samping di Viomagz - SusahTidur - Halo selamat datang kembali. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat menu navigasi samping di Viomagz.

Mempunyai tampilan template yang bagus dan unik itu menjadi daya tarik sendiri untuk para blogger. Dengan begini banyak dari mereka yang hampir setiap harinya mengubah mengotak atik tema mereka. Mulai dari font, warna, menu navigasi dan lainnya masih banyak sekali.

Biasanya keseringan memodifikasi template itu terjadi saat kita memulai blog atau bisa juga saat mengikuti trend. Bicara soal trend yang lagi ngetrend di dunia blog sekarang ya membuat mode malam di blog dan membuat navigasi side menu mobile ala igniel. Hal itu memang keren, namun pasti ada dari kalian yang cukup suka saja namun tidak mengikuti gaya tersebut.

Nah untuk sobat yang ingin membuat menu navigasi  sendiri tanpa ngikutin gaya yang lain kamu bisa menggunakan opsi ini membuat menu navigasi samping sebagai dasar menu navigasi mobile di blog kamu. Dan untuk selebihnya nanti bisa sobat modif sesuai selera masingmasing. 

Kode Menu navigasi samping ini hanya berlaku di tampilan mobile atau di tampilan seluler saja. Dan lagi kode ini saya bagikan hanya untuk pengguna template Viomagz, untuk yang lain mungkin bisa mencobanya sendiri siapa tahu cocok. Cara ini cukup simple hanya menggganti CSS yang lama dengan CSS yang menu navigasi samping. Baik mari simak caranya dibawah ini

Cara membuat menu navigasi samping di Viomagz

  1. Seperti biasa silahkan masuk dashboard blogger sobat
  2. Masuk menu Tema > edit HTML
  3. Kemudian cari kode CSS ini, kalau bingung cari /* NAV MENU */ saja, itupun  kalau template viomagz sobat masih ori dari sana pasti ketemu kode tersebut kalau tidak ya cari kode tersebut sampai penutupnya.
    /* NAV MENU */
    #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
     border: 0;
     list-style: none;
     line-height: 1;
     display: block;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
    }
    #cssmenu ul li a {
     position: relative;
    }
    #cssmenu #head-mobile {
     position: relative;
    }
    #cssmenu {
     text-align: left;
    }
    #cssmenu ul {
     margin: 0;
     display: block;
     height: 48px;
    }
    #cssmenu #head-mobile {
     display: none;
     position: relative;
    }
    #cssmenu > ul > li {
     float: left;
     margin: 0;
    }
    #cssmenu > ul > li > a {
     padding: 0 17px;
     font: $(navmenu.font);
        line-height: 48px;
     letter-spacing: 0.8px;
     text-decoration: none;
     text-transform: uppercase;
     color: $(navmenu.font.color);
    }
    #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
     color: $(navmenu.font.hover.color);
    }
    #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
     background: rgba(64,64,64,0.1);
     -webkit-transition: background .2s ease;
     -ms-transition: background .2s ease;
     transition: background .2s ease;
    }
    #cssmenu ul li.has-sub {
     position: relative;
    }
    #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after {
        content: "\f0d7"; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        margin-left: 10px;
    }
    #cssmenu ul ul li.has-sub > a::after {
        content: "\f0da"; 
    }
    #cssmenu > ul > li.has-sub:hover > a::after {
        content: "\f0d8"; 
    }
    #cssmenu ul ul {
        height: auto;
     position: absolute;
     left: -9999px;
     z-index: 1;
     -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
        opacity: 0;
        transform: translateY(-2em);
        transition: all 0.3s ease-in-out 0s;
    }
    #cssmenu li:hover > ul {
     left: auto;
        opacity: 1;
        transform: translateY(0%);
        transition-delay: 0s, 0s, 0.3s; 
    }
    #cssmenu ul ul li {
     background: $(navsubmenu.font.background);
     margin: 0;
    }
    #cssmenu ul ul li:hover {
     background: $(navsubmenu.hover);
    }
     #cssmenu ul ul ul{
     margin-left: 100%;
     top: 0
    }
    #cssmenu ul ul li a {
        font: $(navsubmenu.font);
        border-bottom: 1px solid rgba(150,150,150,0.15);
        padding: 0 17px;
        line-height: 42px;
        max-width: 100%;
        text-decoration: none;
        color: $(navsubmenu.font.color);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
     border-bottom: 0
    }
    
    #cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {
     background: $(navsubmenu.hover);
    }
    
    @media screen and (min-width:801px){
     #cssmenu ul {
      display: block !important;
     }
    }
    @media screen and (max-width:800px){
     #cssmenu {
      float: none;
     }
     #cssmenu ul {
      background: $(navsubmenu.font.background);
      width: 100%;
      display: none;
      height: auto;
      -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
     }
     #cssmenu > ul {
      max-height: calc(100vh - 48px);
      overflow-y: auto;
     }
     #cssmenu ul ul {
      -webkit-box-shadow: none;
      box-shadow: none;
      display:none;
            opacity: 1;
            transform: translateY(0%);
            transition: unset;
     }
        #cssmenu li:hover > ul {
            transition-delay: 0s, 0s, 0s; 
        }
     #cssmenu ul li {
      width: 100%;
      border-top: 1px solid rgba(150,150,150,0.15);
      background: $(navsubmenu.font.background);
     }
        #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
            background: $(navsubmenu.hover);
        }
        #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
            color: $(navsubmenu.font.color);
        }
        #cssmenu ul ul li a {
            padding: 0 25px;
        }
     #cssmenu ul li a, #cssmenu ul ul li a {
      width: 100%;
      border-bottom: 0;
      color: $(navsubmenu.font.color);
     }
     #cssmenu > ul > li {
      float: none;
      position: relative;
     }
     #cssmenu ul ul li.has-sub ul li a {
      padding-left: 35px
     }
     #cssmenu ul ul, #cssmenu ul ul ul {
      position: relative;
      left: 0;
      width: 100%;
      margin: 0;
      text-align: left
     }
     #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul > li.has-sub > a::after {
      display: none
     }
     #cssmenu #head-mobile {
      display: block;
      padding: 24px;
      color: #fff;
      font-size: 12px;
      font-weight: bold
     }
     .button {
      width: 25px;
      height: 20px;
      position: absolute;
      right: 0;
      top: 14px;
      cursor: pointer;
      z-index: 2;
      outline: none;
     }
    .mline1, .mline2, .mline3 {
     position: absolute;
     left: 0;
     display: block;
     height: 3px;
     width: 22px;
     background: $(search.icon.color);
     content:'';
     border-radius: 5px;
     transition: all 0.2s;
    }
    .mline1 {
     top: 0;
    }
    .mline2 {
     top: 7px;
    }
    .mline3 {
     top: 14px;
    }
    .button.menu-opened .mline1 {
     top: 8px;
     border: 0;
     height: 3px;
     width: 22px;
     background: $(navmenu.font.color);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg)
    }
    .button.menu-opened .mline2 {
     top: 8px;
     background: $(navmenu.font.color);
     width: 22px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg)
    }
    .button.menu-opened .mline3 {
            display: none;
            height:0;
        }
     #cssmenu .submenu-button {
      position: absolute;
      z-index: 99;
      right: 0;
      top: 0;
      cursor: pointer;
     }
     #cssmenu .submenu-button::after {
            content: "\f0d7"; 
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            margin: 0 20px;
            color: $(navsubmenu.font.color);
            line-height: 42px;
     }
     #cssmenu .submenu-opened::after {
            content: "\f0d8"; 
        }
     #cssmenu ul ul .submenu-button::after {
      line-height: 36px;
     }
     #cssmenu ul ul ul li.active a{
      border-left: none
     }
     #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
      border-top: none
     }
    }
  4. Kemudian silahkan ganti semua kode CSS diatas dengan kode CSS dibawah ini
    /* Menu Navigasi samping By Susahtidur.my.id */
    #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
    border: 0;list-style: none;line-height: 1;display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    #cssmenu ul li a {position: relative;}
    #cssmenu #head-mobile {position: relative;}
    #cssmenu {text-align: left;}
    #cssmenu ul {margin: 0;display: block;height: 48px;}
    #cssmenu #head-mobile {display: none;position: relative;}
    #cssmenu > ul > li:first-child{border-left:none}
    #cssmenu > ul > li:last-child{border-right:none}
    #cssmenu > ul > li {float: left;margin: 0;}
    #cssmenu > ul > li > a {padding: 0 17px;font: bold 12px Helvetica, Arial, sans-serif;line-height: 48px;letter-spacing: 0.8px;text-decoration: none;text-transform: uppercase;color: #ffffff;}
    #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #ffffff;}
    #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {background: rgba(64,64,64,0.1);-webkit-transition: background .2s ease;-ms-transition: background .2s ease;transition: background .2s ease;}
    #cssmenu ul li.has-sub {position: relative;}
    #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after {content: "";border-color: #ffffff transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin-left: 6px;margin-bottom: -2px;}
    #cssmenu ul ul li.has-sub > a::after {content: "";border-color: transparent transparent transparent #595959;margin-bottom: 0px;}
    #cssmenu ul ul {height: auto;position: absolute;left: -9999px;z-index: 1;-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);opacity: 0;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s;}
    #cssmenu li:hover > ul {left: auto;opacity: 1;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;}
    #cssmenu ul ul li {background: #f8f8f8;margin: 0;}
    #cssmenu ul ul li:hover {background: #eaeaea;}
    #cssmenu ul ul ul{margin-left: 100%;top: 0}
    #cssmenu ul ul li a {font: 400 12px Helvetica, Arial, sans-serif;border-bottom: 1px solid rgba(150,150,150,0.15);padding: 0 17px;line-height: 36px;max-width: 100%;text-decoration: none;color: #595959;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {border-bottom: 0}
    #cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {background: #eaeaea;}
    @media screen and (min-width:801px){#cssmenu ul {display: block !important;}}
    @media screen and (max-width:800px){
    #cssmenu {float: none;}
    #cssmenu ul {background: #f8f8f8;width: 100%;display: none;height: auto;-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);}
    #cssmenu > ul {max-height: calc(100vh - 48px);overflow-y: auto;}
    #cssmenu ul.open {transform:translateX(0px);}
    #cssmenu > ul {max-height: calc(100vh - 48px);overflow-y: auto;width: 300px;transition: all 0.7s ease;position: fixed;height: calc(100% - 45px);transform: translate(-300px, 0px);}
    #cssmenu ul ul {-webkit-box-shadow: none;box-shadow: none;display:none;opacity: 1;transform: translateY(0%);transition: unset;}
    #cssmenu li:hover > ul {transition-delay: 0s, 0s, 0s;}
    #cssmenu ul li {width: 100%;border-top: 1px solid rgba(150,150,150,0.15);background: #f8f8f8;}
    #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {background: #eaeaea;}
    #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #595959;}
    #cssmenu ul ul li a {padding: 0 25px;}
    #cssmenu ul li a, #cssmenu ul ul li a {width: 100%;border-bottom: 0;color: #595959;}
    #cssmenu > ul > li {float: none;position: relative;}
    #cssmenu ul ul li.has-sub ul li a {padding-left: 35px}
    #cssmenu ul ul, #cssmenu ul ul ul {position: relative;left: 0;width: 100%;margin: 0;text-align: left}
    #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul > li.has-sub > a::after {display: none}
    #cssmenu #head-mobile {display: block;padding: 24px;color: #fff;font-size: 12px;font-weight: bold}
    .button {width: 25px;height: 20px;position: absolute;right: 0;top: 14px;cursor: pointer;z-index: 2;outline: none;}
    .mline1, .mline2, .mline3 {position: absolute;left: 0;display: block;height: 2px;width: 18px;background: #ffffff;content: '';transition: all 0.5s;}
    .mline1 {top: 1px;}
    .mline2 {top: 7px;}
    .mline3 {top: 13px;}
    .button.menu-opened .mline1 {background: #ffffff;top: 3px;border: 0;width: 13px;-webkit-transform: rotate(-45deg);-o-transform: rotate(45deg);-o-transform: rotate(-45deg);-o-transform: rotate(45deg);transform: rotate(-45deg);}
    .button.menu-opened .mline2 {top: 7px;left: 2px;width: 19px;}
    .button.menu-opened .mline3 {top: 11px;height: 2px;width: 13px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);}
    #cssmenu .submenu-button {position: absolute;z-index: 99;right: 0;top: 0;cursor: pointer;}
    #cssmenu .submenu-button::after {content: "";border-color: #595959 transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin: 20px 20px 14px;}
    #cssmenu ul ul .submenu-button::after {margin: 16px 20px 12px;}
    #cssmenu ul ul ul li.active a{border-left: none}
    #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top: none}}
  5. Kemudian Save/Simpan Template

Baik selesai sudah tutorial cara membuat menu navigasi samping di Viomagz. Jika masih bingung silahkan bertanya di kolom komentar. Sekian dan terimakasih telah berkunjung di blog saya.
"Cara Membuat Menu Navigasi samping di Viomagz"
Tampilkan Komentar
Sembunyikan Komentar

9 Komentar untuk "Cara Membuat Menu Navigasi samping di Viomagz"

  1. Om, gimana ya biar navigasinya gak ikut ke angkat saat di geser ke atas.

    BalasHapus
    Balasan
    1. komentar yang bagus, namun maaf mas saya juga lagi otak atik biar ga ikut geser. Kalau udah dapat nanti saya kasih tahu.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. Iya nih, belum ketemu juga solusinya. Menurut saya sih kurang nyaman saja karena saat side navbar di geser ke atas sampai mentok, bagian bawahnya terputus. Walaupun nantinya bagian yang terputus terisi kembali oleh elemennya.

      Beberapa waktu lalu saya cek dibeberapa blog dan website ternyata kebanyakan memang seperti itu, termasuk sidenav punya Mbah Google.

      Saya coba tanya dibeberapa forum, ada yang merekomendasikan memakai CSS materialize. Kira-kira materialize cocok gak mas untuk template blogger.

      Ini link tutorialnya >

      https://materializecss.com/navbar.html#!

      Hapus
    4. Oke mas, setelah belajar inspeksi elemen akhirnya berhasil. Terimakasih banyak sudah share kode navbarnya.

      Hapus
    5. masama mas saya jg lg tahap belajar, apalagi jg bukan lulusan skolah coding. belajar dari inspect HP ga punya PC hehe.

      btw boleh dong di share biar ga ngikut atas bawah nav menu nya, penambahan CSS doang kah?

      kemarin iseng² inspect punya mbak Igniel dan mau eksperimen jg, trus ga jadi lanjut bikin postingan lagi haha

      Hapus
    6. Wah, saya juga pakai hp nih mas. Sebetulnya ada laptop, tapi cuma bisa dipakai internet tengah malam. Soalnya tempat saya susah sinyal.

      Untuk mengatasi masalah yang kemarin, saya cuma ubah nilai ukuranya menjadi seperti ini :

      #cssmenu > ul {
      height: calc(100% + 60px);

      Supaya bagian bawah nav bar lebih panjang.

      Kalau salah tolong dikoreksi ya mas, soal nya walaupun cara itu berhasil tapi belum tahu juga apakah mempengaruhi elemen lain.

      Screenshot permasalahan :
      Link Screenshot

      Setelah diperbaiki :
      Link Screenshot

      Berhubung baru belajar, jadi belum berani rombak semua. Saya juga butuh kode lagi nih mas, supaya menu side nya bisa di buka tutup dengan cara di geser ke kanan/kiri. Kalau ada, tolong di share ya.

      Hapus
    7. terimakasih ilmunya mas,

      baik ditunggu postingan kedepannya mas, kalau belum ada ya belum dapat hahaha

      terimakasih sudah mampir 😁

      Hapus
  2. Kalau supaya menu icon garis tiganya ada disebelah kanan gimana, min?

    BalasHapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel