Jquery ile Alt Kategorili Menü

11 Ağu 2010 Çar 9 yorum

Üzerine gelindiğinde alt menüler açılan bu çalışma basit ve oldukça şık görünüyor.

Sitenize çok basit bir şekilde üst menü hazırlayabilirsiniz.

 

Kurulum:

Aşağıdaki dosyaları sitenizin kök klasörüne kopyalayın.

  • jquery-1.4.2.min.js
  • stil.css
  • topnav_stretch.gif

 

Kullanımı:

Sayfanızın <head></head> etiketleri arasına aşağıdaki kodları ekleyin.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    
$("ul#topnav li").hover(function() {
    $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'});
    $(this).find("span").show();
} , function() {
    $(this).css({ 'background' : 'none'});
    $(this).find("span").hide();
});
    
});
</script>
<link href="stil.css" rel="stylesheet" type="text/css" />

 

HTML Dosyası İçeriği:

Sayfanızdaki <body></body> etiketleri arasına, menüyü kullanmak istediğiniz yere göre aşağıdaki kodları ekleyin.

<ul id="topnav">
    <li><a href="#">Anasayfa</a></li>
    <li>
        <a href="#">Haberler</a>
        <span>
            <a href="#">Yazılım</a> |
            <a href="#">Donanım</a> |
            <a href="#">Fırsatlar</a>
        </span>
    </li>
    <li><a href="#">Ahmet Soyarslan</a></li>
</ul>

 

Burada görülen Haberler bir menü iken Yazılım, Donanım ve Fırsatlar alt kategoriler oluyor. Bu örnekteki linkleri istediğiniz şekilde çoğaltabilirsiniz.

Örneği incelemek için buraya, projeyi indirmek için ise buraya tıklayın.

16752 kez okundu.

9 Yorum Var

  1. asari demiş ki

    tmm hocam tşk ederim.

  2. asari demiş ki

    merhaba hocam iyi geceler bu menude active gif dosyası eksik bu sorunu giderir misiniz?

    • Ahmet Soyarslan demiş ki

      Menüler üzerine gelindiğinde arkaplanda gözükecek resmi belirtiyor o dosya. Ben sadece renk değişimi vs. olarak yaptım. Dilerseniz resim de kullanabilirsiniz.

  3. Cenani demiş ki

    kullanıcı girişini sağda duyuruların üstünde oluşturmayı düşünüyorum

  4. Ahmet Soyarslan demiş ki

    Siteyi inceledim. Sanırım tüm içerik statik, yani HTML. Birkaç sorum olacak.
    Hangi noktada kullanıcı girişi oluşturmayı planlıyorsunuz? Sitenin bulunduğu sunucu PHP/MYSQL desteğine sahip mi? PHP ve veritabanları konusunda bilgiye sahip misiniz?

  5. Cenani demiş ki

    kusura bakmayın bilgisayarım çok yavaş. o yüzden geç cevap yazıyorum. siteyi dreamweaver da html yaptım. adres ; www.sesankara.org

  6. Ahmet Soyarslan demiş ki

    Öncelikle sitenizi hangi dili kullanarak hazırladığınızı ve programlama konusundaki bilgi düzeyinizi öğrenebilir miyim? Şayet siteniz yayında ise bağlantı adresini de yazabilirsiniz.

  7. Cenani demiş ki

    sevinirim. umarım siteye adapte edebilirim:))

  8. Ahmet Soyarslan demiş ki

    Düşünceleriniz için teşekkür ederim. PHP tabanlı MYSQL veritabanını kullanan basit bir üyelik sisteminin anlatımına yer verebilirim.

  9. Cenani demiş ki

    selam. beyninize, gözlerinize, elleriniz sağlık. sitenizden 2 indirme yaptım. teşekkürler. bu arada okul sitenizde çok başarılı. kutlarım. benim yaptığım bir siteye üyelik modülü ihtiyacım var. yapamadım gitti.sizi izleyeceğim bundan sonra. belki üyelik içinde bir çalışma yayınlarsınız :)



Yorum Yazın