×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Side Menu Navigasi di Tampilan Mobile

Jagoan Redesign - kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Side Menu Navigasi di Tampilan Mobile Dengan menggunakan CSS untuk template Viomagz, untuk kamu pengguna template selain viomagz kamu bisa mengembangkan sendiri dengan menggunakan CSS tersebut.

Cara Membuat Side Menu Navigasi di Tampilan Mobile De

Apa Itu Side Navigation ?

Side Navigation adalah sebuah navigasi yang muncul disebelah kiri maupun dari arah sebelah kanan, Nah sebenarnya navigasi ini tidak jauh berbeda dengan navigasi dari atas kebawah hanya saja kebanyakan orang memiliki menggunakan side ini agar terlihat lebih enak di pandang dari pada atas ke bawah.

Cara Membuat Side Menu Navigasi di Tampilan Mobile Dengan CSS

1. Silahkan kamu login ke blogger dengan menggunakan Gmail kamu
2. Masuk ke menu TEMA > klik Edit HTML.
3. Selanjutnya, Silahkan kamu cari kode berikut ini /* NAV MENU */ untuk kodenya kamu bisa melihat 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 >gt; 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. Selanjutnya silahkan kamu ganti kode diatas dengan kode CSS dibawah ini.

/* NAV MENU by Jagoan Redesign*/
#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. kalau sudah silahkan SIMPAN dan Selesai.

Nah, itu adalah tutorial Cara Membuat Side Menu Navigasi di Tampilan Mobile, apabila kamu memiliki pertanyaan silahkan tanya di kolom komentar dibawah artikel ini.

First
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel