Cara Membuat Mega menu Desktop Dan Vertical Slide Menu Mobile




Cara Membuat Mega menu Desktop Dan Vertical Slide Menu Mobile
Cara Membuat Mega menu Desktop Dan Vertical Slide Menu Mobile: Kembali lagi saya membagikan tutorial dengan pembahasan yang berbeda pula, mungkin beberapa hari ini saya update terus untuk membuat artikel, karena cuti kerja saya luman lama juga. Berhubung tidak ada kegiatan lain mending saya membuat artkel saja, agar bisa share ilmu sedikit kepada rekan-rekan blogger yang sedang ingin mengedit blog atau mencoba utak atik menu blog mereka tersebut. Nah sedikit penjelasan dibawah ini ya. Jika anda suka bisa anda ikuti terus penjelasan di bawah ini,
Demo tampilan PC atau Laptop
Mungkin di antara kalian ada yang ingin menggantikan menu navigasi mode biasa ke mode mega menu, silahkan anda pelajari cara penerapannya ya, karena jika anda masih newbie dan baru mengenal dunia blogger  barang kali akan mengalami kesulitan dalam penerapan kode- kode di bawah ini. 

Jadi bisa anda baca baik-baik lah langkah di bawah ini.
Menu yang dipakai tersebut merupakan gabungan 2 menu yaitu megamenu dan slide vertical menu. Megamenu sendiri ditampilkan pada tampilan desktop sedangkan slide vertical menu ditampilkan pada tampilan mobile atau ukuran device 800px ke bawah.

Untuk Demo tampilan mobile seperti video gambar gif di bawah ini

Bagaimana tampilan mega menu seperti di atas bagus atau tidak. jika Anda ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini. Namun jika tidak ingin mencobanya. silahkan di lihat-lihat saja ya mega menunya..hehe

 Mega menu Desktop Dan Vertical Slide Menu Mobile

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Silahkan simpan style kode CSS di bawah ini di atas kode </head>
<style type='text/css'>
/*<![CDATA[*/
/* Mega Menu */
.mega_menu{margin:0;padding:0;}
.megamenu *{margin:0;padding:0;font-family:inherit;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
ul.megamenu{list-style:none;line-height:1;overflow:visible!important}
ul.megamenu:after{margin:0;padding:0;content:"";display:block;height:0;clear:both}
ul.megamenu li{float:left;display:inline;padding:0;}
ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}
ul.megamenu li a{display:block;line-height:40px;padding:0 20px;text-decoration:none;color:#333;font-size:14px;font-weight:500}
ul.megamenu li a:hover,ul.megamenu li a.hover-menu{background:#333;color:#fff}
ul.megamenu ul{position:absolute;display:none;top:100%}
ul.megamenu li a.hover-menu>ul{display:block}
ul.megamenu ul.leftmenulist li{z-index:72;width:100%;float:none;position:relative;}
ul.megamenu ul.rightmenulist li{z-index:72;width:25%;float:none;}
ul.megamenu ul li a{text-transform:none;font-weight:400}
ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:0 0;color:#fff}
ul.megamenu ul ul{display:none;left:100%;top:0}
ul.megamenuid li div.megasubmenu{background:#333;position:absolute;width:100%;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,.1);transition:all .3s ease-in-out;display:none}
ul.megamenuid li a.hover-menu~div.megasubmenu{visibility:visible;opacity:1;display:block;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
ul.megamenuid ul,ul.megamenuid ul li{display:block!important;border:0!important;margin:0!important;padding:0!important}
ul.megamenuid ul li{background:0 0!important;float:left!important}
ul.megamenuid ul.leftmenulist{position:absolute;width:15%;left:0;top:0;bottom:0;background:0 0}
ul.megamenuid ul.leftmenulist a{border-left:none!important;color:#ccc;font-weight:500;font-size:12px}
ul.megamenuid ul.rightmenulist{position:relative;display:block;width:85%;float:right;margin:0!important;background:0 0}
ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;height:100%;padding:20px 20px 20px 0!important}
ul.megamenuid ul.rightmenulist li .thumb-container{width:100%;height:100%;position:relative;overflow:hidden;font-size:0;display:inline}
ul.megamenuid ul.rightmenulist li .thumb-container img{width:100%;height:130px;margin-bottom:10px}
ul.megamenuid ul.rightmenulist li a{display:block;border-left:none!important;padding:0!important;line-height:1.1;color:#ccc;font-weight:500;font-size:12px}
ul.megamenuid ul.rightmenulist li a:hover{color:#fff;background:0 0}
ul.megamenu li.has-submenu,ul.megamenu li.has-sub a{position:relative;}
ul.megamenu li.has-submenu .rightmenulist,ul.megamenu li.mega-label .leftmenulist,ul.megamenu li.has-submenu .menu-icon{display:none!important;}
ul.megamenu li.has-submenu .leftmenulist,ul.megamenu li.mega-label .rightmenulist{width:100%;}
ul.megamenu li.has-submenu .megasubmenu{min-width:180px;min-height:100%;overflow:visible;}
ul.megamenu li.has-submenu>a,ul.megamenu li.has-sub>a{padding:0 25px 0 20px;}
ul.megamenu li.has-submenu>a:after,ul.megamenu li.has-sub>a:after{content:"";width:0;height:0;position:absolute;margin-top:3px;top:50%;right:10px;border:4px solid transparent;border-top-color:#333;margin-top:-4px;transition:all .4s ease-in-out}
ul.megamenu li.has-submenu>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-sub>a.hover-menu:after{border-top-color:#fff;}
ul.megamenu li.has-submenu .leftmenulist li{background:#333!important}
ul.megamenu li.has-submenu .leftmenulist li .loading-icon{display:none}
ul.megamenu li.mega-label .megasubmenu{padding:0 0 0 20px!important}
ul.megamenu li.mega-label ul.rightmenulist li .thumb-container img{height:160px}
ul.megamenu li.mega-label ul.rightmenulist li a{font-size:14px}
ul.megamenuid .loading-icon{background:url(http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif) no-repeat;background-size:16px 16px;width:16px;height:16px;position:absolute;top:50%;margin-top:-8px;right:20px}
ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:20px;top:50%;width:0}
#megamenuid h5:after,#megamenuid h5:before{content:"";position:absolute;left:50%;border-left:2px solid #888;border-right:2px solid #888}
#megamenuid{background:#efefef;height:40px;width:100%;position:relative;margin:0 auto 10px;padding:0;}
#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}
#megamenuid h5:before{top:50px;width:5px;height:2px;margin-left:-4px}
#megamenuid h5:after{top:55px;width:10px;height:5px;margin-left:-7px;border-top:2px solid #888;border-radius:8px 8px 0 0}
.menupage_mobile_icon,.menu_mobile_burger,#search-label3,#mega_menu h2,.cssmenu>ul>li.home{display:none}

@media screen and (max-width:800px){
/* CSS mobile Menu */
.menu_mobile_burger,.menupage_mobile_icon{position:absolute;top:0;width:41px;text-align:left;padding:0;color:#666;font-size:36px;font-weight:500;line-height:47px;cursor:pointer;z-index:9999;display:block}
.menu_mobile_burger{right:41px}
.menupage_mobile_icon{left:0}
.menupage_mobile_icon svg,.menu_mobile_burger svg,#search-label3 svg{width:30px;height:30px;vertical-align:-7%}
.menupage_mobile_icon svg path,.menu_mobile_burger svg path,#search-label3 svg path{fill:#333}
ul.megamenu li.has-sub>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-submenu>a:hover:after{border-top-color:transparent}
ul.megamenu li.has-submenu>a, ul.megamenu li.has-sub>a{padding:0 15px;}
#css-menu,.cssmenu{height:calc(100% + 2px);width:100%;bottom:-2px}
#css-menu{position:fixed;top:0;right:100%;z-index:100000;background:#2C2C2D;transition:all .4s ease-in-out;display:block}
.cssmenu,.cssmenu a,.cssmenu li,.cssmenu ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;font-size:16px;position:relative;display:block;float:none}
.cssmenu{overflow-x:hidden;overflow-y:visible}
.cssmenu a{line-height:1.3;padding:12px 15px}
.cssmenu>ul>li{cursor:pointer;background:#2C2C2D;border-top:1px solid #3d3d3d;border-bottom:1px solid #161616;display:block;float:none;}
.cssmenu>ul>li:first-child{border-top:none;background:#fff;padding-left:15px;cursor:default}
.cssmenu>ul>li:first-child a{display:inline-block;background:#fff!important;padding:0;line-height:47px}
.cssmenu>ul>li:last-child{border-bottom:1px solid #3d3d3d}
ul.megamenu:after{border-top:1px solid #3d3d3d}
.cssmenu>ul>li:last-child.active{border-bottom:1px solid #c9c9c9}
.cssmenu>ul>li:last-child>a{border-bottom:1px solid #161616}
.cssmenu>ul>li>a{font-size:14px;font-weight:500;display:block;color:#fff;text-shadow:0 1px 1px #000;background:#2C2C2D;padding:0 15px;}
.cssmenu>ul>li>a:hover{text-decoration:none;background:#3d3d3d}
.cssmenu>ul>li.active{font-weight:700}
.cssmenu>ul>li.search_icon{display:none;}
.cssmenu>ul>li.home{display:block;}
.cssmenu>ul>li.home .close-menu{background:#fff;color:#333;font-size:30px;font-weight:700;padding:0 15px;line-height:47px;display:inline-block;float:right;cursor:pointer;}
.cssmenu>ul>li.has-sub>a:after,.cssmenu>ul>li.has-submenu>a:after{content:"";position:absolute;top:15px;right:10px;border:5px solid transparent;border-left:5px solid #fff}
.cssmenu>ul>li.has-sub.active>a:after,.cssmenu>ul>li.has-submenu.active>a:after{right:14px;top:17px;border:5px solid transparent;border-top:5px solid #fff}
.cssmenu ul ul{position:relative;top:0;}
.cssmenu ul ul a{background:#efefef;display:block;color:#797979;font-size:14px;font-weight:400;line-height:1;padding:12px 15px;}
.cssmenu ul ul a:hover{color:#000!important}
.cssmenu ul ul li{border-bottom:1px solid #c9c9c9;display:block;float:none}
.cssmenu ul ul li.even a{background:#efefef}
.cssmenu ul ul li.odd a{background:#e5e5e5}
.cssmenu ul ul li:last-child{border:none}
.flow{overflow:hidden;position:relative}
.cssmenu>ul>li.home .title_blog{width:200px;margin:0;display:inline-block;vertical-align:middle;line-height:47px}
.cssmenu>ul>li.home .title_blog img{width:100%;height:auto;display:block;max-height:32px;}
}
/*]]>*/
</style>
4. Selanjutnya anda simpan javascriptdi bawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/master/megamenu.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
5. Dan  simpan kode widget ini di bawah header blog Anda untuk menampilkan megamenu, atau di atas header bisa juga
<b:section class='mega_menu' id='mega_menu' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML99' locked='true' title='' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;div class=&#39;menu_mobile_burger&#39; title=&#39;Menu&#39;&gt;
&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z&#39; fill=&#39;#000000&#39;/&gt;
&lt;/path&gt;&lt;/svg&gt;
&lt;/div&gt;

&lt;div class=&#39;cssmenu&#39; id=&#39;css-menu&#39;&gt;
&lt;ul class=&#39;megamenu&#39; id=&#39;megamenuid&#39;&gt;


  &lt;li class=&#39;home&#39;&gt;&lt;span class=&#39;close-menu&#39; title=&#39;Close&#39;&gt;&amp;times;&lt;/span&gt;&lt;a expr:href=&#39;data:blog.homepageUrl&#39; expr:title=&#39;data:blog.title&#39;&gt;&lt;span class=&#39;title_blog&#39;&gt;&lt;img expr:alt=&#39;data:blog.title&#39; expr:title=&#39;data:blog.title&#39; height=&#39;40&#39; src=&#39;https://4.bp.blogspot.com/-0YKnjllScQg/WoVeheNJDUI/AAAAAAAACyk/Fxz-Z7572V41DEea3FWOVP8xlWgS1M1rgCLcBGAs/s1600/mizi%2B-%2BCopy%2B%25282%2529.png&#39; width=&#39;255&#39;/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;


  &lt;li&gt;&lt;a href=&#39;/&#39;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;has-sub&#39;&gt;&lt;a class=&#39;menu-target&#39; href=&#39;javascript:viod(0)&#39;&gt;Blogging&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Blogging&#39; onclick=&#39;addURL(this)&#39;&gt;Blogging&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/widget&#39; onclick=&#39;addURL(this)&#39;&gt;widget&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/SEO&#39; onclick=&#39;addURL(this)&#39;&gt;SEO&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/menu%20navigasi&#39; onclick=&#39;addURL(this)&#39;&gt;  Navigasi&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&#39;last&#39;&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/adsense&#39; onclick=&#39;addURL(this)&#39;&gt;Adsense&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&#39;has-sub&#39;&gt;&lt;a class=&#39;menu-target&#39; href=&#39;javascript:viod(0)&#39;&gt;Tekno&lt;/a&gt;
    &lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Logo%20Design&#39;&gt;Logo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Webmaster&#39;&gt;Webmaster&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/WordPress&#39;&gt;WordPress&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&#39;last&#39;&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Scan%20File%20Hp&#39;&gt;Scan File&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Tips%20Computer&#39;&gt;Trik Computer&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;mega-label has-sub&#39;&gt;&lt;a href=&#39;javascript:viod(0)&#39;&gt;Kesehatan&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/info%20kesehatan&#39;&gt; info kesehatan&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&#39;has-submenu&#39;&gt;&lt;a class=&#39;menu-target&#39; href=&#39;javascript:viod(0)&#39;&gt;Group&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/search/label/Diskusi&#39;&gt;Diskusi&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;http://www.mizipedia.com/p/blog-page_18.html&#39;&gt;Sitemap &lt;/a&gt;&lt;/li&gt;
     
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
  </b:widget>
</b:section>

Dan pastikan di blog Anda sudah memasang jquery library berapa pun versinya.
6. Di dalam widget megamenu ada kode berikut seperti ddi bawah ini.
<div class='menu_mobile_burger' title='Menu'>
<svg viewbox='0 0 24 24'>
    <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='#000000'/>
</path></svg>
</div>
7. Kode tersebut adalah ikon Menu untuk tampilan mobile silahkan simpan di mana Anda ingin menampilkan ikon menu pada layar ukuran 800px ke bawah. Selanjutnya di dalam widget megamenu juga ada kode berikut
<li class='home'><span class='close-menu' title='Close'>&times;</span><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><span class='title_blog'><img expr:alt='data:blog.title' expr:title='data:blog.title' height='40' src='https://4.bp.blogspot.com/-0YKnjllScQg/WoVeheNJDUI/AAAAAAAACyk/Fxz-Z7572V41DEea3FWOVP8xlWgS1M1rgCLcBGAs/s1600/mizi%2B-%2BCopy%2B%25282%2529.png' width='255'/></span></a></li>
8. Nah langkah terakhir anda klik save template, jangan lupa berdoa untuk kesuksesan penerapanya. dan refresh blog anda.. Tara gagal atau berhasil ya?..hehe

Silahkan anda ganti URL image bewarna hijau tersebut dengan URL logo blog Anda.
Jangan Lupa Baca Juga Membuat Floating Menu di Samping Blog

Demikian penjelasan singkat saya pada sore ini, selamat mencoba dan semoga berhasil ya sist and bro. Jika kurang jelas jangan malu- malu untuk mintak bantuan atau bertanya, saya akan membantu anda. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect