21'C 흐림
서울 강남구
A lightweight multi-level jQuery side menu plugin.
https://freefrontend.com/jquery-menus/
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://raw.githack.com/hsynlms/zeynepjs/master/dist/zeynep.min.css'>
<link rel='stylesheet' href='https://raw.githack.com/hsynlms/zeynepjs/master/examples/css/base.css'>
<link rel='stylesheet' href='https://raw.githack.com/hsynlms/zeynepjs/master/examples/css/left.css'>
<!-- partial:index.partial.html -->
<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>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://raw.githack.com/hsynlms/zeynepjs/master/dist/zeynep.min.js'></script>
CSS
/*
check github repository for more examples:
https://github.com/hsynlms/zeynepjs
*/
JAVASCRIPT
// 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()
})
})