Cara Membuat Menu Navigation Mobile dan Desktop Keren Di Viomagz

Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website Anda.

Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Biasanya, pada sebuah website, navigasi tertampil pada menu dan link yang terstruktur. Seringkali, saat kita membuka sebuah website, kita merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang ruwet dan tidak jelas.

Selain itu dapat diartikan, Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.

Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung dari situs tersebut.

Lanjut ke caranya...

Cara Membuat Menu Navigation Mobile dan Desktop Keren Di Viomagz

1. Pertama buka Tema dan Edit HTML.
2. Tekan CTRL + F lalu cari kode <!-- menu navigasi header start --> hapus kode ini.

3. Setelah itu ganti kode yang telah dihapus tadi dengan kode dibawah ini.

<ul itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <li><a href='#'>Home</a></li>
  <li class='pempro' itemprop='name'><a aria-label='kategori' class='pemproicon dropbawah' itemprop='url'>KATEGORI<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M7,10L12,15L17,10H7Z' fill='currentColor'/>
</svg></a>
<ul class='allsub dropdown-menu'>
<li class='Blogger' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu1</a></li>
<li class='android' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu2</a></li>
<li class='komputer' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu3</a></li>
<li class='Youtube' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu4</a></li>
<li class='Adsen' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu5</a></li>
<li class='bisnis' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu6</a></li>
<li class='games' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu7</a></li>
<li class='review' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu8</a></li>
<li class='info' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu9</a></li>
<li class='seo' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu10</a></li>
<li class='tkj' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Menu11</a></li>
</ul></li>
</ul>

4. Hapus kode dari /* NAV MENU */ hingga sebelum /* FOOTER */.

5. Lalu ganti kode tersebut dengan kode CSS 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:inline-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>i{margin-right:5px}#cssmenu>ul>li>a{padding:0 10px;line-height:48px;letter-spacing:.8px;text-decoration:none;text-transform:capitalize;color: #fff;}#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,.1);-webkit-transition:background .2s ease;-ms-transition:background .2s ease;transition:background .2s ease}#cssmenu ul ul li.has-sub>a::after{content:"\f0da"}
#cssmenu ul ul{
  height:auto;
  position:absolute;
  z-index:1;
  -webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.15);
  box-shadow:0 2px 8px 0 rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(-8em);
  transition:all 0.3s ease-in-out 0s;
  left:0;right:0;
  background:#d28213;
  border-top:3px solid #000;
  border-bottom:10px solid #fff;
  transform:translateY(-13em);
  transition:all 0.5s ease;
  opacity:0;
  padding:10px;
}
  #cssmenu li:hover>ul{opacity:1;transform:translateY(0%);transition-delay:0s,0s,0.3s}ul.allsub li.bulet>a{background:#000;border:2px solid #000;border-radius:20px}
#cssmenu ul ul li:hover{animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}#cssmenu ul ul ul{margin-left:100%;top:0}#cssmenu ul ul li a{font:400 15px Roboto,Arial,sans-serif;padding:0 17px;line-height:42px;max-width:100%;text-decoration:none;color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#000;border:1px solid #000;border-radius:20px}#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:rgba(31,34,39,.29)}
@media screen and (min-width:801px){#cssmenu ul{display:block!important}}
@media screen and (max-width:800px){
#cssmenu{float:none}#cssmenu ul{background:#fafafa;width:100%;display:none;height:auto;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.15);box-shadow:0 2px 8px 0 rgba(0,0,0,.15)}
#cssmenu>ul{
  transition-delay:2s;
  transition:width 4s ease;
  position:fixed;
  display:block;
  width:250px;
  left:-668px;
  margin:0;
  height:calc(100% - 45px);
  background-color:#d28214;
  z-index:999;
  overflow-y:auto;
  list-style-type:none;
}
  #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%}#cssmenu>ul>li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#d28214}#cssmenu>ul>li:hover>a,#cssmenu ul li.active a{background:#d28214}#cssmenu ul ul li a{padding:0 25px}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#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:700}.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:#fff;content:'';transition:all 0.2s}.mline1{top:2px}.mline2{top:7px}.mline3{top:12px}.button.menu-opened .mline1{background:#fff;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;background:#fff}.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);-o-transform:rotate(45deg)}#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;cursor:pointer}#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}}

6. Terakhir copy code Javascript (ambil disini) diatas </body>.
7. Setelah ditambahkan tekan save / simpan.