in

Cara Membuat Menu Sticky Di WordPress eCommerce

TokoDaring.Com – Cara Membuat Menu Sticky Di WordPress. Ini adalah tutorial dari artikel yang kami tulis sebelumnya. Yaitu cara membuat menu tetap pada posisinya atau beken di sebut sticky menu.

Di artikel sebelumnya kami memaparkan cara membuat sticky menu di website eCommerce WordPress untuk mengoptimalkan transaksi dan pendapatan online. Baik dari peluang potensi transaksi penjualan, atau peningkatan pendapatan iklan.

Cara membuat menu sticky di WordPress (HTML dan CSS)

Pada artikel ini kami paparkan langkah-langkah bagaimana membuat sticky menu. Secara umum (dan sederhana) ini adalah script HTML dan CSS untuk membuat menu navigasi dan membuatnya menjadi sticky.

<div class="menu-baru-sticky">
	<div class="dropdown">
		<button class="dropbtn">Menu Utama 1 »</button>
		<div class="dropdown-content">
			<a href="">Sub Menu Utama 1-1</a>
			<a href="">Sub Menu Utama 1-2</a>
			<a href="">Sub Menu Utama 1-3</a>
		</div>
		<div class="dropdown1">
			<button class="dropbtn1">Menu Utama 2 »</button>
			<div class="dropdown-content1">
				<a href="">Sub Menu Utama 2-1</a>
				<a href="">Sub Menu Utama 2-2</a>
				<a href="">Sub Menu Utama 2-3</a>
			</div>
		</div>
		<div class="dropdown2">
			<button class="dropbtn2">Menu Utama 3 »</button>
			<div class="dropdown-content2">
				<a href="">Sub Menu Utama 3-1</a>
				<a href="">Sub Menu Utama 3-2</a>
				<a href="">Sub Menu Utama 3-3</a>
			</div>
		</div>
	</div>
</div>
.menu-baru-sticky, .dropdown-content, .dropdown-content1, .dropdown-content2 {
	box-shadow:0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
}

/* div-menu-baru-utama */
.menu-baru-sticky {
	display:block;
	position:fixed;
	top:0;
	width:100%;
	padding-bottom:0;
	background-position:50%;
}

/* menu baru utama */
.dropdown, .dropdown1, .dropdown2 {
	display:inline-block;
	margin-bottom:0.617924em;
}

/* menu-utama */ 
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a,
.dropbtn, .dropbtn1, .dropbtn2 {
	padding:1em .875em;
}

/* menu-utama-hover */
.menu-baru-sticky,
.dropdown-content, .dropdown-content1, .dropdown-content2,
.dropbtn, .dropbtn1, .dropbtn2,
.dropdown:hover .dropbtn, .dropdown1:hover .dropbtn1, .dropdown2:hover .dropbtn2,
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a {
	background-color:#fff;
	color:#000;
}

/* z-index-sticky-menu */
.menu-baru-sticky, .dropdown-content, .dropdown-content1, .dropdown-content2 {
	z-index: 1;
}

/* sub-menu */
.dropdown-content, .dropdown-content1, .dropdown-content2 {
  display: none;
  position: absolute;
	min-width: 160px;
}

/* sub-menu-hover */
.dropdown:hover .dropdown-content, .dropdown1:hover .dropdown-content1, .dropdown2:hover .dropdown-content2,
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a {
	display:block;
}

Membuat sticky header di WordPress (tema website storefront)

Website eCommerce WordPress anda pasti di buat menggunakan tema yang sudah jadi bukan ? Dan mungkin tema yang anda gunakan tidak mendukung fitur sticky yang sedang kita bahas.

Ini adalah script CSS sederhana untuk membuat sticky header menggunakan tema website storefront WooCommerce. Selector di tema website yang anda gunakan mungkin saja berbeda.

Tema WooCommerce storefront memiliki header yang luas dan memiliki dua lokasi menu, primary dan secondary). Kode CSS berikut akan membuat bagian header menjadi sticky.

/* membuat sticky header storefront WooCommerce */

#masthead {
	position: fixed;
	top: 0;
	width: 100%;
}

Nah, kami pikir anda sudah memahami logika pemrogramannya. Menu navigasi atau bagian apapun bisa di buat menjadi sticky secara sederhana hanya menggunakan kode CSS dengan memberikan nilai properties position: fixed;.

Dan itu bisa di lakukan pada tema website apapun yang anda gunakan. Anda hanya perlu untuk mengetahui selector dari section yang ingin di buat sticky.

Keunggulan membuat menu sticky hanya dengan HTML dan CSS adalah tidak memberatkan kerja website anda.

Namun jika anda menginginkan menu sticky dengan sedikit animasi

Membuat sticky menu WordPress tanpa plugin (on scroll + jQuery)

Kami pikir ini adalah bagian yang paling menarik dari artikel ini. Kami memiliki cara alternatif untuk membuat sticky menu tanpa plugin.

Masih menggunakan tema website storefront WooCommerce yang memiliki dua menu (primary dan secondary). Yang dalam kondisi ‘apa adanya’ kedua menu tersebut sama-sama tidak sticky.

Dan kami ingin hanya menu primary yang menjadi sticky ketika user sudah mulai melakukan scroll kebawah.

Untuk membuat menu sticky hanya setelah user melakukan scroll, kami menambahkan kode javascript seperti berikut ke dalam plugin editor.

Dan juga dengan sedikit animasi agar ketika user melakukan akses, maka proses transisi akan terlihat lebih smooth. Untuk animasi kami menambahkan kode CSS berikut.

// membuat sticky menu wordpress

add_action ('wp_footer','tdr_sticky_menu', 1);
function tdr_sticky_menu() { ?>
<script>
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if($(window).scrollTop() > 100) {
            $('.storefront-primary-navigation').addClass('sticky');
        }else{
            $('.storefront-primary-navigation').removeClass('sticky');
        }
    });
});
</script>
<?php
}
/* membuat sticky menu tanpa plugin */

.primary-navigation .menu-hide {
	display:none;
}

.storefront-primary-navigation.sticky {
	position:fixed;
	top:0;
	width:100%;
	background-color:#fff;
}

.storefront-primary-navigation.sticky .primary-navigation .menu-hide {
	display:inline-block;
}

.storefront-primary-navigation.sticky, .storefront-primary-navigation.sticky .primary-navigation .menu-hide {
	animation-name:slideInDown;
	animation-duration:.5s;
}



/* css sticky on scroll mobile */
@media only screen and (max-width:767px) {
	.sticky #site-navigation {
		text-align:center;
		clear:both;
		padding-bottom:4px;
	}
	
	.sticky #site-navigation button {
		float:none;
		margin-top:4px;
	}
	
	.sticky #site-navigation .handheld-navigation {
		text-align:left;
	}
}

Tentang TokoDaring [impresum]

TokoDaring.Com adalah ‘media online’ dengan artikel-artikel yang praktis di bidang ecommerce. Kami menulis dengan bahasa yang menyenangkan dan mudah di pahami. Mulai dari teknologi, platform dan update, hingga secara teknis bagaimana mendesain dan memaksimalkan website ecommerce untuk dapat membantu orang-orang yang baru memulai atau sudah ada pada bisnis online.

Unit usaha TokoDaring.Com adalah sebagai penyuplai bahan makanan untuk usaha kuliner (daging, sayur, buah, bumbu & rempah) yang melayani pembelian kebutuhan suplai b2b kerjasama antar usaha (restoran/kafe/hotel/katering/kuliner/rumah sakit). Produk pesanan akan di antarkan langsung ke dapur produksi usaha tanpa ada biaya pengiriman (gratis ongkir).

Divisi kreatif TokoDaring.Com melayani order pembuatan website, cetak digital, food & video photography. Hingga platform untuk promosi bisnis via halaman business listing.

Written by TokoDaring

TokoDaring.Com - 'Majalah' online (online publishing),  sumber dan referensi teknis untuk membangun dan memaksimalkan performa bisnis toko online. Optimizing your store!

cara membuat sticky menu di wordpress

Cara Membuat Sticky Menu Di WordPress

mengganti tombol add to cart woocommerce

Mengganti Tombol Add To Cart WooCommerce