jQuery Eğimli Menü

23-06-2010, 13:03:32

Siyaz

Kimlik doğrulama veya yönetimden onay bekliyor.

jQuery Sosyal Medya Menüsünden kastım, demoda Sosyal Medya iconlarının bulundığu bir menü olmasıdır.. Asıl adıyla jStackMenu isimli Plugin, Mouse ile herhangi bir nesnenin üzerine tıklanıldığında animasyon şeklinde fakat dün olarak değil hafiften bir yay görünümü alan Sosyal medya ikonlarına sahip bir menü açılımıdır..
Plugin jQueryUI scriptleri kullanılarak hazırlanmış yine de güzel görünümlü, WordPress içerisinde de kullanabileceğiniz hoş bir eklentidir..

Eklentiyi kurabilmek için, indirdiğiniz sıkıştırılmış dosyaların tümünü çıkarın.. Daha sonra bunları tek bir klasörde toplayarak index.html dosyasında gerekli düzenlemeyi yapınız. index.html dosyası içerisindeki css kodları plugin ile alakadar değildir, sadece sayfa görünümünden kaynakların.. Sizin kullanacağınız şeyler, jQuery dosyaları ve jstackmenu.css dosyasıdır.. Zaten içerisini incelediğiniz vakit hangi nesnede ne gibi script ya da style özellikleri kullanılmış göreceksiniz..
Wordpress temanıza uyarlamak istiyorsanız; Wordpres temanızın header.php dosyasındaki <head> etiketleri arasına index.html dosyasında verilen head … /head tagları arasındaki kodları aynen kullanınız. Daha sonra hangi bölüme koymak istiyorsanız wordpress temanızın o sayfasını bir metin editörüyle açtıktan sonra “stack” id’li bir katman (div) oluşturun ve içerisine menü listenizi girin.. Örnek için aşağıdaki kod ya da index.html dosyasını inceleyebilirsiniz;

<div id="stack">
				<div class="trigger"><img src="icons/heart-64x64.png" alt="share" /></div>
				<ul>
					<li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="icons/twitter-32x32.png" alt="Twitter"></a></li>

					<li><a href="http://digg.com/"><span class="title">Digg</span><img src="icons/digg-32x32.png" alt="Digg"></a></li>
					<li><a href="http://www.facebook.com/"><span class="title">Facebook</span><img src="icons/facebook-32x32.png" alt="Facebook"></a></li>
					<li><a href="http://reddit.com/"><span class="title">Reddit</span><img src="icons/reddit-32x32.png" alt="Reddit"></a></li>
					<li><a href="http://stumbleupon.com/"><span class="title">StumbleUpon</span><img src="icons/stumbleupon-32x32.png" alt="StumbleUpon"></a></li>
					<li><a href="http://delicious.com/"><span class="title">Delicious</span><img src="icons/delicious-32x32.png" alt="Delicious"></a></li>
					<li><a href="http://flickr.com/"><span class="title">Flickr</span><img src="icons/flickr-32x32.png" alt="Flickr"></a></li>

				</ul>

			</div>

25-06-2010, 03:27:12

#2