Cara Membuat Side Menu Navigation Responsive Pada Blogger

Cara Membuat Side Menu Navigation Responsive Pada Blogger


Pelajar Design - Pada kesempatan ini saya akan membagikan tutorial tentang Cara Membuat Side Menu Navigation Responsive Pada Blogger. Pada umumnya Navigation pada Template Blogger muncul dari atas ke bawah.

Namun menurut saya pribadi kurang menarik. Maka saya cari tutorial tentang Cara Membuat Side Menu Navigation Responsive Pada Blogger, dan saya menemukan tutorial ini pada salah satu blog bernama Jejakdzgn.com.

Disini saya akan membagikan kembali tutorial tersebut dengan langkah-langkah yang mudah dipahami.


# Apa Itu Side Navigation ?

Side Navigation adalah sebuah menu Navigation uang muncul dari sebelah kanan atau kiri. Pada umumnya sebuah Navigation itu muncul dari atas ke bawah, namun menurut saya pribadi tampilan tersebut kurang menarik. Sekarang sudah banyak Website Atau Blog yang menggunakan Side Navigation ini.


Cara Membuat Side Menu Navigation Responsive Pada Blogger

1. Masuk ke Blogger.com.
2. Masuk pada menu TEMA > Edit HTML.
3. Kemudian cari kode /* NAV MENU */ ( Gunakan CTRL + F ).

/* 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
}
}

4. Silahkan kalian HAPUS kode tersebut 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}}

5. Simpan dan lihat hasilnya.



Silahkan ganti transition: all 0.7s ease; menjadi transition: all 0.3s ease; agar menjadi slid menjadi lebih smooth. Untuk tutorial ini sudah saya coba pada Template Viomagz dan berfungsi 100%. Berikut Gambarnya.

Hasil Side Nav Navigation

Bagaimana artikel tentang Cara Membuat Side Menu Navigation Responsive Pada Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.


Referensi : https://www.jejakdzgn.com/2020/04/cara-membuat-side-menu-navigation.html

You may like these posts