Blend.js

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 :

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="https://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

Demo