×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Membuat Menu Viomagz Side Navigation diTampilan Mobile (CSS)


Ditutorial saya kali ini saya membuat khusus tutorial untuk template Viomagz, namun bagi kalian yang memiliki template yang struktur kodenya mirip mirip dengan template Viomagz, mungkin kalian bisa coba cara yang saya bagikan ini, jika pun ada kesalahan sedikit pada kodenya untuk yang bukan Viomagz mungkin bisa kalian kembangkan sendiri.

Side navigation merupakan navigasi yang muncul dari sebelah kiri ataupun sebelah kanan, sebenarnya side navigation tidaklah berbeda dengan navigasi yang muncul dari atas kebawah, hanya saja melihat menu yang muncul dari sebelah kiri atau kanan jauh lebih enak dilihat ketimbang dari atas kebawah.

Side Navigation yang saya bagikan ini hanya untuk Tampilan Mobile, khususnya template viomagz, untuk template lain yang memiliki struktur kodenya mirip mirip dengan viomagz ya tinggal dikembangin aja. Berikut ini cara membuat side navigation hanya dengan CSS.

Cara Membuat Menu Viomagz Side Navigation
  1. Login dulu ke Blogger,
  2. Pada dashboard Blogger pilih Tema > Edit HTML,
  3. Kemudian cari kode CSS ini /* NAV MENU */, isi kodenya seperti dibawah ini,
    /* 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: 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 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: 3px;
    width: 22px;
    background: #ffffff;
    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: #ffffff;
    -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: #ffffff;
    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: "";
    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
    }
    }
    Kemudian ganti dengan kode CSS ini
    /* 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: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.2s;}
    .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}}
  4. Terakhir simpan/save template
Sekian tutorial membuat side navigasi pada template viomagz ditampilan mobile hanya dengan CSS. Sebenarnya tidak perlu menghapus semua kodenya hanya perlu menambah dan mengedit beberapa kode CSS aja, namun karna itu menurut saya hanya membuat lama, jadi saya sarankan dihapus aja biar cepat :v, Ingat!! hanya untuk tampilan mobile :)

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

4 Responses to "Membuat Menu Viomagz Side Navigation diTampilan Mobile (CSS)"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With