Anasayfa » Web Programlama, Web Tasarım & Grafik

jQuery & CSS3 Menü: jSlickmenu

28 Temmuz 2009 Görüntülenme: 1.828 6 Yorum Yazar: Ahmet
Kötüİdare ederOrtaGüzelMükemmel (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.

HTML:
  1. <div id="menu">
  2. <ul>
  3. <li><a href="http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html">
  4. <img src="images/item-01.jpg" alt="A fancy Apple.com-style search suggestion" />
  5. </a></li>
  6. <li><a href="http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html">
  7. <img src="images/item-02.jpg" alt="Creating a polaroid photo viewer with CSS3 and jQuery" />
  8. </a></li>
  9. <li><a href="http://www.marcofolio.net/webdesign/the_iphone_contacts_app_with_css_and_jquery.html">
  10. <img src="images/item-03.jpg" alt="The iPhone Contacts App with CSS and jQuery" />
  11. </a></li>
  12. <li><a href="http://www.marcofolio.net/webdesign/20_wicked_proof_of_concepts_for_better_use_of_jquery_css.html">
  13. <img src="images/item-04.jpg" alt="20+ Wicked Proof of Concepts for Better use of jQuery/CSS" />
  14. </a></li>
  15. <li><a href="http://www.marcofolio.net/inspiration/the_very_best_from_the_behance_network.html">
  16. <img src="images/item-05.jpg" alt="The very best from the Behance Network" />
  17. </a></li>
  18. </ul>
  19. </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.

HTML:
  1. &lt;/li&gt;
  2. &lt;li&gt;&lt;a href="http://www.renkliteneke.com/"&gt;
  3. &lt;img src="images/resim.jpg" alt="web tasarım&amp;grafik ve web programlama blogu" /&gt;
  4. &lt;/a&gt;&lt;/li&gt;

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:
  • Google Bookmarks
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • MySpace
  • Netvibes
  • Live
  • FriendFeed
  • Technorati
  • StumbleUpon
  • Reddit
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:

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

  • Hyperend demiş ki:

    Teşekkür ederim.

  • ilhan demiş ki:

    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:

    @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:

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

  • klima servisi demiş ki:

    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.

Yorum ekleye bilir yada yazı için geri bildirim gönderebilirsiniz. Bu yazı için yorumlarına abone ol: subscribe to these comments

 

Yorum içerisinde kullanabileceğiniz Html tagları :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Yazıya yorum yazdığınızda yorumunuzun hemen yanında bir Gravatarınız yayınlanacaktır.
Hani benim Gravatarım? Gravatar'da neyin nesi?