ImageMenu Samuel Birch tarafından geliştirilen bir MooTools eklentisi. bu eklenti ile websitenizin üst kısmında manşet benzeri çok şık resim galeri tarzı menüler oluşturabilirsiniz. Eklentinin çalışma şekli biraz basit, mouseyi resimlerin üzerine getirdiğiniz an resim açılıyor ve diğer resimler üst üste sıkışıyor. Yani siz sadece resmi ekleyip resmin başlığını yazıp kullanamıyorsunuz. Resimlerinizi photoshop yardımı ile örnekte olduğu gibi kendinize göre hazırlamanız gerekiyor. Sonuç olarak işe çok yarayan eklentilerden biri. Resimleri değiştirmek için kendi düzenlediğiniz resimleri css dosyasına eklemeniz gerekiyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Mootools, ImageMenu ve css url adresleri :
<link href="imageMenu.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="imageMenu.js"></script>
JavaScript :
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2});
});
</script>
- Body etiketleri arasına eklenmesi gereken bölüm.
Html :
<div id="imageMenu"> <ul> <li class="landscapes"><a href="#">jQuery</a></li> <li class="people"><a href="#">Wordpress</a></li> <li class="nature"><a href="#">Theme</a></li> <li class="urban"><a href="#">Css</a></li> <li class="abstract"><a href="#">Photoshop</a></li> </ul> </div>
Örnek olarak <li class” people” ve diğer bölümler css içerisinde ayrı ayrı eleman olarak ayarlanmış. Her eleman için ayrı bir resim bulunuyor. Eğer Css ile fazla aranız yok ise bu kısımları değiştirmezseniz iyi olur. Yoksa hata ile karşılaşabilirsiniz.