renkli teneke » jQuery & CSS3 Menü: jSlickmenu

internet çöplüğünden renkli kırıntılar…

Anasayfa » Web Programlama, Web Tasarım & Grafik

jQuery & CSS3 Menü: jSlickmenu

28 Temmuz 2009 Görüntülenme: 1.828 6 Yorum Yazar: Ahmet

(Değerlendir)

jQuery ile ilgili yazılara son zamanlarda iyice ağırlık verdiğimin farkındayım. Aynı zamanda Google'da renkli teneke şeklinde bir arama yaptığınızda karşınıza çıkan sonuçlarda yaptığım jQuery paylaşımlarının etkisini görebilirsiniz. jQuery oldukça faydalı, öğrenmenizi isterim. En azından hazır olan çalışmalarla birşeyler yapmayı deneyebilirsiniz.

Şimdi jQuery ve CSS3 kullanılarak hazırlanmış çok güzel bir menüden bahsedeceğim. MacroFolio blogunun sahibi olan Marco Kuiper tarafından hazırlanmış mükemmel bir çalışma. Birde dikkatimi ufak birşey çekti. Bu çalışmayı hazırlayan kişi oldukça genç. Yaşına göre iyi bir bilgi var gibi görünüyor, umarım öyledir de. Menü ise ayrı bir profesyonellikle hazırlanmış. Çok hoş görünümlü bir menü.

Menüyü direk olarak buradaki orjinal demo adresinden deneyebilirsiniz. Çalışmanın orjinal adresi yani yazarın menüyü tanıttığı kendi sayfası ise burası. Menüyü indirmek için ise bu adresi kullanabilirsiniz. Aynı zamanda yazının kendi adresinden de menünün demosuna ve download bağlantısına ulaşabilirsiniz. Bu bilgilerin hepsini verdikten sonra hemen menüyü nasıl kullanabileceğimizden bahsedelim.

Nasıl Kullanılır?

Çok basit bir şekilde kullanabiliyorsunuz bu menüyü. Yukarıda vermiş olduğum bağlantılar ile dosyaları indirin. İndireceğiniz dosyanın adı jslickmenu. Sıkıştırılmış dosyayı klasöre çıkartın ve dosya içerisinde bulunan default.html sayfasını herhangi bir HTML editöründe açın. Sayfa içerisinde aşağıdaki kodları bulun.

PLAIN TEXT

HTML:

<div id="menu">
<ul>
<li><a href="http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html">
<img src="images/item-01.jpg" alt="A fancy Apple.com-style search suggestion" />
</a></li>
<li><a href="http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html">
<img src="images/item-02.jpg" alt="Creating a polaroid photo viewer with CSS3 and jQuery" />
</a></li>
<li><a href="http://www.marcofolio.net/webdesign/the_iphone_contacts_app_with_css_and_jquery.html">
<img src="images/item-03.jpg" alt="The iPhone Contacts App with CSS and jQuery" />
</a></li>
<li><a href="http://www.marcofolio.net/webdesign/20_wicked_proof_of_concepts_for_better_use_of_jquery_css.html">
<img src="images/item-04.jpg" alt="20+ Wicked Proof of Concepts for Better use of jQuery/CSS" />
</a></li>
<li><a href="http://www.marcofolio.net/inspiration/the_very_best_from_the_behance_network.html">
<img src="images/item-05.jpg" alt="The very best from the Behance Network" />
</a></li>
</ul>
</div>

Yukarıdaki kodlar içerisinde <li> tagı içerisindeki yerlerdeki resim, açıklama ve bağlantı adresini değiştirerek kendi çalışmanıza uyarlayabilirsiniz. Örnek olması açısından aşağıdaki kodları deneyebilirsiniz.

PLAIN TEXT

HTML:

</li>
<li><a href="http://www.renkliteneke.com/">
<img src="images/resim.jpg" alt="web tasarım&grafik ve web programlama blogu" />
</a></li>

Umarım mantığını anlayabilmişsinizdir. Eğer herhangi bir sorun ile karşılaşırsanız aşağıdaki yorum alanını kullanarak bütün sorularını sorabilirsiniz.

Yazıyı beğendiysen başka yerlerde paylaşabilirsin:

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 28 Temmuz 2009" tarihinde yazılmış olan "jQuery & CSS3 Menü: jSlickmenu" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.

6 Yorum »

Ali demiş ki:

Tarih: 31 Temmuz 2009Saat: 18:21

JQuery paylaşımlarınızın devamını sabırsızlıkla bekliyorum

Hyperend demiş ki:

Tarih: 2 Ağustos 2009Saat: 06:17

Teşekkür ederim.

ilhan demiş ki:

Tarih: 5 Ağustos 2009Saat: 00:16

Ben pek bisey anlamayamadım ama tesekkür ederim :=) öğrenicem inş.. su css leri anlayamıyorum çalıstıramıyorum bi türlü

Ahmet (Admin Abi) demiş ki:

Tarih: 5 Ağustos 2009Saat: 00:24

@ilhan;
Eğer kodları anlayamayıp çalıştıramıyorsan (varsa) çalışmanın demosunun nasıl çalıştığını incele ardından da (yine varsa) dosyalarını indirip kodlarını incele. Bu senin için faydalı olacaktır.

kuflu demiş ki:

Tarih: 4 Kasım 2009Saat: 18:15

teşekkürler gerçekten çok güzel bir menü

klima servisi demiş ki:

Tarih: 13 Mart 2010Saat: 13:01

Menu güzel ama çok yer kaplıyor ve etrafı boş duruyor görsel ağırlıklı siteler için güzel bir menü ancak içerik sitelerinde çok kullanışlı oldupu söylenemez .

Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!

Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.