Meny.js

Hakim El Hattab tarafından geliştirilmiş çok kullanışlı bir JavaScript kütüphanesi.   Meny.js  web sayfanıza Css3  3D efekt eklemenize  yarıyor.  Css3 3D efektler  ile beraber hazırlanmış olan bu mini JavaScript kütüphanesi  ile  websayfanızı hafif  bir mouse hareketi  ile 3 boyutlu  bir halde görünmesini  sağlayabilirsiniz.

Demo  sayfasına ilk baktığınızda sadece linkler göründüğü  için  neye benzediği  pekte  belli olmayan bir  eklenti.  Sol tarafta bulunan  ok işaretine dikkat ederseniz eklentinin  orada gizli olduğunu anlayabilirsiniz. Tek  yapmanız  gereken mouseyi  sol tarafa kaydırıp olacakları  izlemek.

Mouseniz  sol tarafa  gelir gelmez  sayfa 3D  bir görünüme  geçiyor ve sol taraftan menü  görünüyor.  Meny.js  için eklemiş olduğum resim demo sayfasının tam boy resmidir. Mouse  sol tarafa  geldiğinde  sayfanın nasıl bir hale geldiğini  resimdede görebiliyorsunuz.  Ayrıca dokunmatik cihazlarda sayfanın sol tarafına tıkladığınızda  yine menü efekti aynı şekilde 3D  olarak çalışıyor.  Meny.js’yi  en iyi webkit tarayıcıları üzerinde inceleyebilirsiniz.

Böyle  bir uygulamayı  menü örneklerinde  değilde  fotoğraf galerilerinde kullanırsanız  web sayfanız  için mükemmel  bir görüntü elde  edebilirsiniz.

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Meni.js ve Css dosya adresleri :

<link rel="stylesheet" href="css/demo.css">
<script src="js/meny.min.js"></script>

JavaScript :

		<script src="js/meny.min.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
			});

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

Body etiketleri arasına eklemeniz gereken bölüm.

Sol tarafta gizli duran menü html kodu :

		<div class="meny">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
				<li><a href="#">Link 6</a></li>
				<li><a href="#">Link 7</a></li>
			</ul>
		</div>
		<div class="meny-arrow"></div>

Üç boyutlu görünecek olan  bölüm kodu :

<div class="contents">
Bu kısma  istediğiniz herhangi bir içeriği ekleyebilirsiniz.
</div>