Cara Memodifikasi Slide Menu Sidebar Non AMP Ala Kompi Ajaib dengan Menu Dropdown

www.azid45.web.id - Cara Memodifikasi Slide Menu Sidebar Non AMP Ala Kompi Ajaib dengan Menu Dropdown. Assalamualaikum.Wr, Wb. Alhamdulillah saya masih diberikan kesehatan oleh Allah SWT untuk terus memberikan wawasan kepada pengunjung semua. Pada kesempatan kali ini saya akan share cara memodifikasi slide sidebar Non AMP yang dibuat oleh kang Adhy Suryadi kompiajaib.com sehingga digunakan untuk menu drowpdown.

Slide sidebar Non AMP buatan kang Adhy Suryadi sendiri bagi saya sudah sangat responsive dan flexible, tanpa menu dropdown pun bisa digunakan untuk banyak kategori karena pada script css yang dibuat oleh kang Adhy Suryadi bisa untuk scroll kebawah jika tingginya melebihi layar. Akan tetapi bagi sebagian pengguna blogger seperti saya kadang kala butuh menu dropdown untuk sub kategori atau label. Sebagaiamana salah satu fungsi menu dropdown yang saya sebutkan tadi tentunya masih terdapat fungsi lainnya seperti agar blog tidak terlalu ramai karena kebanyakan kategori yang dimunculkan. Oleh karena itulah, saya mencoba untuk menambahkan script css dan html dari kekurangan script slide sidebar yang dibuat oleh kang Adhy Suryadi.

Bagi teman-teman yang belum membuat menu slide sidebar milik kompi ajaib saya sarankan untuk membuatnya. Teman-teman jika ingin membuatnya bisa baca artikel berikut;

Baca Juga: Cara membuat Slide Sidebar untuk Blog Non AMP Buatan Kompiajaib.com

Dan bagi teman-teman yang sudah menggunakan slide sidebar buatan kompiajaib.com ini dan ingin menambahkan menu dropdown, teman-teman bisa mengikuti langkah-langkah berikut;

Pertama, teman-teman terlebih dahulu harus masuk blogger dan menuju pada menu edit HTML. Setelah itu carilah script css dari kompiajaib.com yang sudah teman-teman gunakan. Jika sudah ketemu maka carilah kode css berikut 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}

Jika sudah ketemu, maka teman-teman bisa menghapusnya dan ganti dengan kode css berikut 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}

Kedua, Jika langkah pertama sudah selesai, maka langkah selanjutnya adalah teman-teman menuju script html untuk memunculkan sidebarnya. Carilah kode seperti berikut dan tambahkan tag id='menu' didalamnya

<ul class='p0 liststyle0'>

hasilnya akan seperti ini 

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

Ketiga, langkah terakhir adalah untuk memunculkan menu dropdown, teman-teman bisa menggunakan script html dibawah ini, jika sudah selesai langkah terakhir adalah Save Template teamn-teman.

<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>

Demikianlah artikel saya tentang Cara Memodifikasi Slide Menu Sidebar Non AMP Ala Kompi Ajaib dengan Menu Dropdown. Semoga artikel ini bermanfaat. Amin