JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<ul class="hidden-mobile" id="navigation" data-spring-plugin="slicknav" data-slicknav-prependto="#header"  data-slicknav-closeonclick="true" data-slicknav-duplicate="false">
    <li class="p1"><a href="#section-welcome">Welcome</a></li>
    <li class="p2"><a href="#collection-menu">Menu</a></li>
    <li class="p3"><a href="#section-the-live-laundry">The Live Laundry</a></li>
    <li class="p4"><a href="#section-slide-show">Slide Show</a></li>
    <li class="p5"><a href="#section-address">Address</a></li>
    <li class="p6 last"><a href="#section-contact-form">Contact</a></li>
</ul>

JavaScript

jQuery(document).ready(function($) {
	//look for plugin
	var plugin = $("*[data-spring-plugin='slicknav']");
	
	//defaults
	var pluginid = '#' + $(plugin).attr('id');
	var $prependTo = 'body';
	var $closeOnClick = false;
	var $label = 'MENU';
	var $allowParentLinks = true;
	var $duplicate = true;
    
    //custom settings
	if($(plugin).data('mobile-navigation-source')) {
		pluginid = '#' + $(plugin).data('mobile-navigation-source');
	}

	if($(plugin).data('slicknav-prependto')) {
		$prependTo = $(plugin).data('slicknav-prependto');
	}

	if($(plugin).data('slicknav-closeonclick') === true) {
		$closeOnClick = true;
	}

	if($(plugin).data('slicknav-label') === 'none' || $(plugin).data('slicknav-label') === '') {
		$label = '';
	} else if ($(plugin).data('slicknav-label')) {
		$label = $(plugin).data('slicknav-label');
	}
		
	if($(plugin).data('slicknav-allowparentlinks') === false) {
		$allowParentLinks = false;
	}

	if($(plugin).data('slicknav-duplicate') === false) {
		$duplicate = false;
	}

    alert($closeOnClick);
    
    //run plugin
	
});