Blend.js

By

blend
Jack Moore’un  fade  in – fade out, hover ve mouse in-out özelliklerini kullanarak yapılmış bir jQuery uygulaması. Blend, sprite menüler yani arama motoru dostu menüler hazırlamanızı kolaylaştırıyor. Menü butonlarının bütün resimlerini tek bir resimde birleştirdikten sonra  style.css dosyasında butonlarınızın boyuna göre genişlik ve yükseklik değerleri verip Blend ile beraber kullanıyorsunuz. Menü örneğimizdeki butonlar da bu şekilde hazırlandığı için kendi sitenizin kategorilerine uygun butonlar tasarlayıp demoda kullanılan birleşik buton resmi gibi tek bir resim dosyasında birleştirmeniz gerekiyor.

Demoda  kullanılan resim :

blend

Kullanım

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

Js ve Css adresleri :

<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.blend.js"></script>

JavaScript :
<script>
	$(document).ready(function(){
		$("#example a").blend();
		$("#example2 a").blend();
	});
</script>

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

Html :

  • Demo 1 :

<div id="default">
	<a href="#" id="default_home">Home</a>
	<a href="#" id="default_blog">Blog</a>
	<a href="#" id="default_demo">Demo</a>
	<a href="#" id="default_about">About</a>
	<a href="#" id="default_services">Services</a>
	<a href="#" id="default_contact">Contact</a>
</div>

  •  Demo 2 :

<div id="example">
	<a href="#" id="example_home">Home</a>
	<a href="#" id="example_blog">Blog</a>
	<a href="#" id="example_demo">Demo</a>
	<a href="#" id="example_about">About</a>
	<a href="#" id="example_services">Services</a>
	<a href="#" id="example_contact">Contact</a>
</div>

  •  Demo 3 :

<div id="example2">
	<a href="#" id="example2_home">Home</a>
	<a href="#" id="example2_blog">Blog</a>
	<a href="#" id="example2_demo">Demo</a>
	<a href="#" id="example2_about">About</a>
	<a href="#" id="example2_services">Services</a>
	<a href="#" id="example2_contact">Contact</a>
</div>

 

  • Download


Leave a Comment

Your email address will not be published.

You may also like

Trend