منوی کاملا ریسپانسیو سه بعدی

با استفاده از این پلاگین می توانید در سایت خود منوی کاملا ریسپانسیو داشته باشید

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<meta name="viewport" content="width=800, user-scalable=no">
<link rel="stylesheet" href="css/demo.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

2- کد html جهت استفاده پلاگین

<div class="meny">
	<h2>دنیای جی کوئری</h2>
	<ul>
		<li><a href="http://lab.hakim.se/avgrund/">یک</a></li>
		<li><a href="http://lab.hakim.se/radar/">دو</a></li>
		<li><a href="http://lab.hakim.se/forkit-js/">سه</a></li>
		<li><a href="http://lab.hakim.se/scroll-effects/">چهار</a></li>
		<li><a href="http://lab.hakim.se/zoom-js">پنج</a></li>
		<li><a href="http://lab.hakim.se/reveal-js">شش</a></li>
		<li><a href="http://itunes.apple.com/us/app/sinuous/id543097218">هفت</a></li>
		<li><a href="http://hakim.se/experiments/css/domtree/">هشت</a></li>
		<li><a href="http://hakim.se/experiments/css/holobox/">نه</a></li>
		<li><a href="http://hakim.se/experiments/html5/404/netmag.html">ده</a></li>
	</ul>
</div>
<div class="meny-arrow"></div>
<div class="contents">
		<h1 style="text-align:center;"><a href="http://www.ijquery.ir">دنیای جی کوئری</a></h1>
</div>
<script src="js/meny.js"></script>
<script>
	// Create an instance of Meny
	var meny = Meny.create({
	// The element that will be animated in from off screen
	menuElement: document.querySelector( '.meny' ),
	// The contents that gets pushed aside while Meny is active
	contentsElement: document.querySelector( '.contents' ),
	// [optional] The alignment of the menu (top/right/bottom/left)
	position: Meny.getQuery().p || 'left',
	// [optional] The height of the menu (when using top/bottom position)
	height: 200,
	// [optional] The width of the menu (when using left/right position)
        width: 260,
	// [optional] Distance from mouse (in pixels) when menu should open
	threshold: 40,
	// [optional] Use mouse movement to automatically open/close
	mouse: true,
	// [optional] Use touch swipe events to open/close
	touch: true
	});
	// API Methods:
	// meny.open();
	// meny.close();
	// meny.isOpen();
	// Events:
	// meny.addEventListener( 'open', function(){ console.log( 'open' ); } );
	// meny.addEventListener( 'close', function(){ console.log( 'close' ); } );
	// Embed an iframe if a URL is passed in
	if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
		var contents = document.querySelector( '.contents' );
		contents.style.padding = '0px';
		contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
	}
</script>