<div class="zeynep">
  <ul>
	<li>
	  <a href="#">Home</a>
	</li>

	<li class="has-submenu">
	  <a href="#" data-submenu="stores">Stores</a>

	  <div id="stores" class="submenu">
		<div class="submenu-header">
		  <a href="#" data-submenu-close="stores">Main Menu</a>
		</div>

		<label>Stores</label>

		<ul>
		  <li>
			<a href="#">Istanbul</a>
		  </li>

		  <li>
			<a href="#">Mardin</a>
		  </li>

		  <li>
			<a href="#">Amed</a>
		  </li>
		</ul>
	  </div>
	</li>

	<li class="has-submenu">
		<a href="#" data-submenu="categories">Categories</a>

		<div id="categories" class="submenu">
		  <div class="submenu-header">
			<a href="#" data-submenu-close="categories">Main Menu</a>
		  </div>

		  <label>Categories</label>

		  <ul>
			<li class="has-submenu">
			  <a href="#" data-submenu="electronics">Electronics</a>

			  <div id="electronics" class="submenu">
				<div class="submenu-header">
				  <a href="#" data-submenu-close="electronics">Categories</a>
				</div>
	  
				<label>Electronics</label>
	  
				<ul>
				  <li>
					<a href="#">Camera & Photo</a>
				  </li>
	  
				  <li>
					<a href="#">Home Audio</a>
				  </li>
	  
				  <li>
					<a href="#">Tv & Video</a>
				  </li>

				  <li>
					<a href="#">Computers & Accessories</a>
				  </li>

				  <li>
					<a href="#">Car & Vehicle Electronics</a>
				  </li>

				  <li>
					<a href="#">Portable Audio & Video</a>
				  </li>

				  <li>
					<a href="#">Headphones</a>
				  </li>

				  <li>
					<a href="#">Accessories & Supplies</a>
				  </li>

				  <li>
					<a href="#">Video Projectors</a>
				  </li>

				  <li>
					<a href="#">Office Electronics</a>
				  </li>

				  <li>
					<a href="#">Wearable Technology</a>
				  </li>

				  <li>
					<a href="#">Service Plans</a>
				  </li>
				</ul>
			  </div>
			</li>

			<li>
			  <a href="#">Books</a>
			</li>

			<li>
			  <a href="#">Video Games</a>
			</li>

			<li>
			  <a href="#">Computers</a>
			</li>
		  </ul>
		</div>
	  </li>

	<li>
	  <a href="#">Contact</a>
	</li>

	<li>
	  <a href="#">About</a>
	</li>
  </ul>
</div>

<main>
  <h1>
	zeynep<span>js</span>
  </h1>

  <p class="lead">A lightweight multi-level jQuery side menu plugin.</p>

  <button type="button" class="btn-open first">Open!</button>
</main>

<div class="zeynep-overlay"></div>
/*
  check github repository for more examples:
  https://github.com/hsynlms/zeynepjs
*/
// zeynepjs initialization for demo
$(function() {

  var zeynep = $('.zeynep').zeynep({
    opened: function () {
      console.log('the side menu is opened')
    }
  })

  // dynamically bind 'closing' event
  zeynep.on('closing', function () {
    console.log('this event is dynamically binded')
  })

  // handle zeynepjs overlay click
  $('.zeynep-overlay').on('click', function () {
    zeynep.close()
  })

  // open zeynepjs side menu
  $('.btn-open').on('click', function () {
    zeynep.open()
  })

})

External CSS

  1. https://raw.githack.com/hsynlms/zeynepjs/master/dist/zeynep.min.css
  2. https://raw.githack.com/hsynlms/zeynepjs/master/examples/css/base.css
  3. https://raw.githack.com/hsynlms/zeynepjs/master/examples/css/left.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://raw.githack.com/hsynlms/zeynepjs/master/dist/zeynep.min.js