Skip to main content

follow us


www.azid.web.id - Cara Membuat Slide Sidebar Ala Kompiajaib dengan Menu Dropdown Pada Blog Non AMP. Pada kesempatan kali ini saya akan share kepada sobat semua, bagaimana cara untuk membuat menu slide sidebar dengan menu dorpdown pada blog non AMP. Sebenarnya tutorial menu slide sidebar pada blog non AMP sudah pernah dibuat oleh mas Adhy Suryadi "Membuat Slide Menu ala MP Sidebar pada Blog Non AMP" namun pada tutorial tersebut ketiga kita menambahkan menu dropdown didalamnya maka tidak akan tampil sebagaimana harapan kita yaitu agar terhidden dan saat kita mengklik menu dropdown teresebut akan muncul menu baru kebawah. Kenyataannya, ketika saat membuat menu dropdown ternyata hasilnya adalah tetap terlihat tepat berada dibawahnya dengan menjorok agak ke dalam.

BACA JUGA: Template Kompiajaib Non AMP gratis Fast Loading hingga 100

Hal tersebut tentunya membuat saya penasaran, mengapa demikian?, ternyata setelah saya cek pada slide sidebar yang dibuat oleh mas Adhy Suryadi menggunakan display block dan belum terdpat menucss untuk bisa dijadikan menu dropdown. Dengan sedikit eksperimen, akhirnya saya bisa memodifikasi slide menu sidebar seperti AMP sideber untuk blog Non AMP dengan menu dropdown. Bagaimana caranya?, bagi sobat yang menggunakan slide menu milik kompiajaib.com dan ingin menambahkan menu dropdown sobat bisa mengikuti langkah-langkahnya sebaaimana berikut ini;

Pertama, hal awal yang harus sobat lakukan adalah menuju menu edit HTML dan cari script css slide AMP sidebar buatan kompiajaib.com, setelah itu ganti script css didalamnya yang seperti ini


.ampsidebar nav ul{margin-top:30px}
.ampsidebar nav li:first-child{padding-top:0}
.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}
.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff}
.ampsidebar button{margin-left:20px}

Ganti dengan script css dibawah ini


.ampsidebar nav ul{margin-top:0}
.ampsidebar nav li:first-child{padding-top:0}
.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}
.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff;background: linear-gradient(to right, #005a8f, #005a8f);-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);}
.ampsidebar nav li ul { display: none;}
.ampsidebar nav li ul li { display: block;float: none;}
.ampsidebar nav li ul li a { font-size:16px;padding:10px 20px;color:#efefef;margin-left:-30px;}
.ampsidebar nav ul li a:hover + .hidden, .hidden:hover { display: block;}
.ampsidebar nav .show-menu{font-size:20px;font-weight:700;text-transform:uppercase;height:54px; color:#fff;background:#005a8f;padding:2.5px 15px;display:none; text-align: right}
.ampsidebar nav input[type=checkbox]{display:none;-webkit-appearance:none}
.ampsidebar nav #menu{display:block}
.ampsidebar button{margin-left:20px}

Untuk lengkapnya akan menjadi seperti dibawah ini


<style>
.fontroboto{font-family:Roboto,sans-serif}
.fontweight500{font-weight:500;}
.btn-sidebaramp{background-image:url(&quot;data:image/svg+xml;charset=utf8,%3csvg viewBox=&#39;0 0 25 25&#39; width=&#39;34&#39; height=&#39;34&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39;%3e%3cg%3e%3cpath style=&#39;fill:%23ffffff&#39; d=&#39;M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z&#39;%3e%3c/path%3e%3c/g%3e%3c/svg%3e&quot;);background-repeat:no-repeat;background-size:34px 34px;background-position:center center;background-color:transparent;width:48px;height:70px;line-height:70px;border:none;position:fixed;top:-12px;right:3px;z-index:1001;cursor:pointer}
.ampsidebar{width:300px;background: linear-gradient(to right, #005a8f, #005a8f);-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);}
svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer}
.ampsidebar nav ul{margin-top:0}
.ampsidebar nav li:first-child{padding-top:0}
.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}
.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff;background: linear-gradient(to right, #005a8f, #005a8f);-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);}
.ampsidebar nav li ul { display: none;}
.ampsidebar nav li ul li { display: block;float: none;}
.ampsidebar nav li ul li a { font-size:16px;padding:10px 20px;color:#efefef;margin-left:-30px;}
.ampsidebar nav ul li a:hover + .hidden, .hidden:hover { display: block;}
.ampsidebar nav .show-menu{font-size:20px;font-weight:700;text-transform:uppercase;height:54px; color:#fff;background:#005a8f;padding:2.5px 15px;display:none; text-align: right}
.ampsidebar nav input[type=checkbox]{display:none;-webkit-appearance:none}
.ampsidebar nav #menu{display:block}
.ampsidebar button{margin-left:20px}
.social-follow,.follow_sidebar,.logo_sidebar{text-align:center}
.logo_sidebar{height:auto;margin:40px auto 0;font-size:24px;color:#fff;letter-spacing:-1px;word-spacing:-5px;line-height:1}
.follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;color:#fff;font-size:.94rem;padding-top:1.5rem}
.social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}
.social-follow li{display:inline-block;margin-right:0;}
.social-follow li .gp svg{vertical-align:4px}
svg:not(:root){overflow:hidden}
.ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#fff}
.liststyle0{list-style:none}
.p0{padding:0}
.m0{margin:0}
.p1{padding:.5rem}
.inline-block{display:inline-block}
.displayblock,.sidebar-mask.open{display:block}
:active,:focus{outline:0}
a{text-decoration:none}
.ampsidebar.p0.mystyle{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1),-webkit-transform 233ms cubic-bezier(0,0,.21,1)}
.ampsidebar.p0{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}
.ampsidebar{position:fixed;top:0;max-height:100vh;height:100vh;max-width:80vw;min-width:45px;outline:0;overflow-y:auto;z-index:2147483647;-webkit-overflow-scrolling:touch;will-change:transform}
.sidebar-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.2;background-image:none;background-color:#000;z-index:2147483646}
.flow{overflow:hidden;position:relative}
</style>

Dan jika sobat ingin menyembunyikan menud slide menu sidebarnya pada lebar layar tertentu maka sobat bisa menambahkan kode script css dibawah ini dan letakkan diatas </style>


@media only screen and (min-width:900px){.btn-sidebaramp{display:none}}

Ganti 900px dengan ukuran lebar minimal saat slide menu sidebar tidak ditampilkan.

Kedua, Setelah menambah script css langkah selanjutnya sobat juga harus mengambahkan script HTML pada kode script HTML yang sudah dibuat oleh mas Adhy Suryadi, caranya cari kode script HTML terlebih dahulu dan temukan kode seperti berikut ini


<ul class='p0 liststyle0'>

Setelah ketemu langkah selanjutnya dalah tambahkan id='menu' setelah kode liststyle0 kurang lebih hasilnya akan seperti berikut


<ul class='p0 liststyle0' id='menu'>

Jika sobat ingin menggunakan menu dropdownnya sobat bisa copas kode berikut


<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#'>menu &#9662;</a>
<ul class='hidden'>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='alamat url'>sub menu1</a></li>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='alamat url'>sub menu 2</a></li>
  </ul>
  </li>

Lebih lengkapnya sobat bisa lihat script HTML dibawah ini


<div class='ampsidebar fontroboto p0' id='side-bar'>
<svg aria-label='Close Sidebar' class='amp-close-image' height='20' onclick='myFunction1()' role='button' tabindex='0' viewBox='0 0 24 24' width='20'>
<path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#fff'/>
</svg>
<div class='logo_sidebar fontweight500 displayblock'>
HADITS21
</div>
<nav>
<ul class='p0 liststyle0' id='menu'>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/p/about.html' target='_blank'>About</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/p/contact-us.html' target='_blank'>Contact Us</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/p/sitemap.html' target='_blank'>Daftar Isi</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#hadits'>Kitab Hadits</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#download'>Download Kitab</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#artikel'>Artikel Unggulan</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Bulughul%20Maram'>Bulughul Maram</a></li>
  <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Riyadus%20Shalihin'>Riyadus Shalihin</a></li>
  <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Muwatta%27%20Malik'>Muwatta&#39;</a></li>
  <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='/'>Shahihaini &#9662;</a>
<ul class='hidden'>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/shahih%20bukhari'>Bukhari</a></li>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/shahih%20muslim'>Muslim</a></li>
  </ul>
  </li>
  <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='/'>Kitab Sunan &#9662;</a>
<ul class='hidden'>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Sunan%20Nasa%27i'>Nasa&#39;i</a></li>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Sunan%20Abu%20Daud'>Abu Daud</a></li>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Sunan%20Tirmidzi'>Tirmidzi</a></li>
  </ul>
  </li>
	<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Musnad%20Ahmad'>Musnad</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='https://www.hadits21.info/search/label/Download'>Download</a></li>
</ul>
</nav>
<h3 class='follow_sidebar fontroboto fontweight500 displayblock'>follow us</h3>
<ul class='social-follow m0 displayblock'>
<li class='p0'>
<a aria-label='Link to Facebook' class='inline-block p1' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 56 55' width='30' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'/></svg></a>
</li>
<li class='p0'>
<a aria-label='Link to Instagram' class='inline-block p1' href='https://www.instagram.com/azidzainuri' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 54 54' width='30' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path class='ampstart-icon ampstart-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'/></svg></a>
</li>
<li class='p0'>
<a aria-label='Link to Twitter' class='inline-block p1' href='https://twitter.com/azid_zainuri' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 53 49' width='30' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path class='ampstart-icon ampstart-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'/></svg></a>
</li>
<li class='p0'>
<a aria-label='Link to Google+' class='inline-block p1 gp' href='https://www.google.com/' rel='nofollow noopener' target='_blank'><svg height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><title>Google+</title><path class='ampstart-icon ampstart-icon-google' d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'/></svg></a>
</li>
</ul>
</div>

<div aria-label='Open' class='btn-sidebaramp p0' onclick='myFunction1()' role='button' tabindex='0'/>

<div class='sidebar-mask' hidden='' id='sidebar-mask' onclick='myFunction1()'/>
<script>
function myFunction1() {
   var element = document.getElementById(&quot;side-bar&quot;);
   element.classList.toggle(&quot;mystyle&quot;);
   var element = document.getElementById(&quot;sidebar-mask&quot;);
   element.classList.toggle(&quot;open&quot;);
  var body = document.body;
  body.classList.toggle(&quot;flow&quot;);
}
</script>

Demikialah Cara Membuat Slide Sidebar Ala Kompiajaib dengan Menu Dropdown Pada Blog Non AMP. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

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