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.

Download

Demo

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>