×

Owner / Author / Admin / etc

    Muhammad Puttra    

"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 Menggunakan CSS

Minggu, 14 Juni 2020   • 6 Komentar


NOTE!! Untuk melihat demo, silahkan cek menu saya yang dikiri

Demo gambar :



Pada kesempatan kali ini, saya akan memberi Tutorial Cara membuat menu VioMagz side navigation ditampilan mobile, karna judulnya menggunakan viomagz jadi cara ini hanya berlaku buat kalian yang memakai Template viomagz.
Tetapi jangan khawatir, untuk kalian yang memakai template yang struktur kode kodenya mirip dengan viomagz, kalian bisa mencoba tutorial ini. Jikapun ada kesalahan sedikit pada kodenya untuk yang menggunakan Viomagz mungkin bisa kalian kembangkan sendiri.

Untuk kalian yang tidak mengerti, apasih Side Navigation itu? Side navigation merupakan menu navigasi yang muncul dari sebelah kiri maupun sebelah kanan, sebenarnya side navigasi tidaklah berbeda dengan navigasi yang muncul dari atas kebawah, hanya saja melihat menu yang sering muncul dari sebelah kiri atau kanan jauh lebih bagus dan enak dilihat ketimbang dari atas kebawah.

Side navigation yang saya sedang bagikan ini hanya bisa untuk Tampilan Mobile saja, khususnya Viomagz. Berikut ini cara membuat side navigation hanya menggunakan  CSS.

Cara membuat Menu Navigation Side

1. Kalian harus login terlebih dahulu ke Blogger.com 
2. Pada tampilan Dashboard Blogger pilih Tema > Edit HTML
3. Kemudian cari kode 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
}
}

Hapus kode diatas, dan ganti dengan kode 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: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 kalian hanya tinggal save/simpan templatenya

Mungkin itu saja tutorial dari saya Membuat Menu Viomagz Side Navigation di Tampilan Mobile menggunakan CSS. Ingat!!! tutorial ini hanya berlaku untuk Tampilan mobile seperti Blog saya ini :)
Sampai jumpa di Artikel selanjutnya

Gunakan Media Sosial Dengan Benar Agar Bermanfaat :) Follow IG : puttra.id
Facebook Instagram Twitter
Show Comments!
Hide comments

6 Komentar untuk "Membuat Menu Viomagz Side Navigation diTampilan Mobile Menggunakan 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 Admin Sujud - All Rights Reserved Created With