serkandaglioglu.com

İndir Demo

Bu makalemizde Css ve Jquery ile açılır menü yapacağız. Amacım yeni başlayan arkadaşlara ulaşmak olduğu için çok basit bir menü yaptım. İlk olarak Html kodlarımızı yazıyoruz.

<ul id="menu">
    <li><a href="#">Menü 1</a></li>

    <li><a href="#">Menü 2</a></li>

    <li><a href="#">Menü 3</a>
        <ul>
            <li><a href="#">Alt Menü 1</a></li>
            <li><a href="#">Alt Menü 2</a>
                <ul>
                    <li><a href="#">Alt Menü 2-1</a></li>
                    <li><a href="#">Alt Menü 2-2</a></li>
                </ul>
            </li>

            <li><a href="#">Alt Menü 3</a>
                <ul>
                    <li><a href="#">Alt Menü 3-1</a></li>
                    <li><a href="#">Alt Menü 3-2</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li><a href="#">Menü 4</a></li>
</ul>

Html kodlarımızın ardından şöyle bir görüntü oluştu.

Şimdi listemizin imgelerini ve satır boşluklarını kaldırmak için aşağıdaki css kodlarımızı sayfamıza ekliyoruz.

ul {
    /*Satır boşluklarını kaldır*/
    margin: 0px;
    padding: 0px;
    /*imgeleri kaldır*/
    list-style: none;
}

Css kodumuzu eklediğimizde menümüz aşağıdaki hale geldi.

menu id'li ul'mizin uzunluk ve arka plan renklerini belirlemek için css kodlarını ekliyoruz.

#menu {
    width: 420px;
    height: 42px;
    background-color: #000000;
    position: relative;
}

Şimdi ise menu id'li ul'mizin içindeki li'lerin özelliklerini belirleyen ve alt menüleri görünmez özelliğini veren Css kodlarımızı sayfamıza ekleyelim.

#menu li{
      float: left;
      line-height: 42px;
}
#menu li a{
      width: 100px;
      display: block;
      text-decoration: none;
      padding-left: 5px;
      color: #FFFFFF;
}
#menu li a:hover{
     background-color: #FFFFFF;
     color: #000000;
}
#menu li ul{
    background-color: #000000;
    visibility: hidden;
    position: absolute;
}

Son eklediğimiz Css kodlarımız hakkında biraz açıklama yapalım. float: left ile li'lerimizin sola dayalı bir şekilde sıralanmasını sağladık. Linklerimizn genişliğini 100px olarak belirledik ama display:block özelliğini eklemediğiniz zaman göreceksinizki linklerimizin genişliği ne yaparsanız yapın değişmeyecek. Çünkü linkler default olarak display:inline olarak ayarlanmıştır ve width özelliğini uygulamamız için linklerimizi display:block özelliği ekliyoruz. visibility: hidden ile alt menülerin görünmemesini sağlıyoruz. Buraya kadarki kısımda menümüz şu hali aldı. 

Gizlediğimiz alt menülere ait Css kodumuzu sayfamıza ekleyelim.

#menu li ul li{
    float: none;
    line-height: 24px;
    position:relative;
}
#menu li ul li ul{
    left: 100%;
    top:0px;
}

Daha önce yazdığımız Css kodlarını incelerseniz li'lerimizin yanyana görünmesi için #menu li' ye ait float: left özelliği eklemiştik. Alt menülerimizin alt alta görünmesini sağlamak için float: none özelliğini ekleyerek float:left özelliğini kaldırıyoruz. İkinci açılan alt menülerimiz pozisyon olarak ilk açılan menü ile aynı hizada olması için position:relative, sağında olması içince left: 100% özelliğini atıyoruz. Geriye sadece jquery kodumuzu eklemek kaldı.

$(document).ready(function(){
    //menu id'li tag'in içindeki ul tag'ına sahip li'leri bul
    $('#menu').find('li:has(ul)').hover(
        function(){
            //Üzerine gelinen ul'lerden ilkini görünür yap
            $(this).find('ul:eq(0)').css('visibility','visible');
        }
        ,function(){
            //Üzerinde gelmediğim ul'leri görünmez yap
            $(this).find('ul').css('visibility','hidden');
        }
    );
});

Css kodlarını değiştirerek menüyü istediğiniz görünümde yapmak sizin elinizde. İyi çalışmalar .

İndir Demo