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)

Artikel Lainnya:

Cara Membuat Sticky Menu Di WordPress

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.

/*
 * cara membuat menu sticky di wordpress
 *
 */

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

/*
 * cara membuat menu sticky di wordpress
 *
 */

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

/*
 * cara membuat menu sticky di wordpress
 * 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

Cara membuat menu sticky di 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.

/*
 * cara membuat menu sticky di 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
}

/*
 * cara membuat menu sticky di wordpress
 *
 */

.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;
	}
}