Ali @mintik
21 Mart 2021 20:52

Blend.js

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

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla