24 Mayıs 2015 Pazar

jQuery & Css Açılır(Dropdown) Menü


   CSS ve jQuery kullanılarak nasıl açılır menü yapılacağını anlatmaya çalışacağım. Göreceksiniz ki bu kısacık işlem için hiç internetten kod araştırması yapmanıza dahi gerek yok. Mantığı çok basit. Burada anlatacağım mantık kullanılarak istediğiniz şekilde hoş açılır menüler oluşturabilirsiniz.
<ul id="nav">
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a>
        <ul>
            <li><a href="#">Biz Kimiz</a></li>
            <li><a href="#">Neden Biz</a></li>
            <li><a href="#">Daha Fazlası</a>
                <ul>
                    <li><a href="#">Daha Fazlası 1</a></li>
                    <li><a href="#">Daha Fazlası 2</a></li>
                    <li><a href="#">Daha Fazlası 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">İşelem Sonrası Hizmet</a></li>
    <li><a href="#">Ürün Kategorisi</a>
        <ul>
            <li><a href="#">Beyaz Eşya</a></li>
            <li><a href="#">Bilgisayar</a>
                <ul>
                    <li><a href="#">Tablet</a></li>
                    <li><a href="#">Diz Üstü</a></li>
                    <li><a href="#">Masa Üstü</a></li>
                </ul>
            </li>
            <li><a href="#">Cep Telefonları</a></li>
        </ul>
    </li>
    <li><a href="#">İletişim</a></li>
</ul>
Yukarıda standart liste çeklinde yapımızı oluşturuyoruz. Oluşturduğumuz yapı içindeki
tagının içine bir ul yapısı daha oluşturuyoruz. Yukarıdaki yapı HTML için. İlk sayfa yüklendiğinde direk görünecek. Ancak ilk içindeki yapısı ilk etapta görünmeyecek. Ürünlerin içinde bulunduğu tagı üzerine geldiğimizde jquery ile basit bir efekt yapıp göstericez. Hemen Css kodunu verelim.
</pre>
body {
 font-family: helvetica, arial, sans-serif;
 font-size:12px;
 background: #e3e3e3;
 text-align: center;
}
 
/* MENU */
 
#nav {
 background: #e5e5e5;
 float: left;
 margin: 0; padding: 0;
 border: 1px solid white;
 border-bottom: none;
}
 
#nav li a, #nav li {
 float: left;
}
 
#nav li {
 list-style: none;
 position: relative;
}
 
#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
 background: #6F6C75;
 background: -moz-linear-gradient(top, black, #919191 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #919191), to(#6F6C75));
 border-right: 1px solid #919191;
 border-left: 1px solid #6F6C75;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}
 
#nav li a:hover {
 background: #88A2EA;
 background: -moz-linear-gradient(top, #78A7DF, #88A2EA);
 background: -webkit-gradient(linear, left top, left bottom, from(#78A7DF), to(#88A2EA));
}
/* Submenu */
 
.hasChildren {
 position: absolute;
 width: 5px; height: 5px;
 background: black;
 right : 0;
 bottom: 0;
}
 
#nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
}
 
#nav li:hover > ul {
 display: block;
}
 
#nav li ul li, #nav li ul li a {
 float: none;
}
 
#nav li ul li {
 _display: inline; /* for IE6 */
}
 
#nav li ul li a {
 width: 150px;
 display: block;
}
 
/* SUBSUB Menu */
 
#nav li ul li ul {
 display: none;
}
 
#nav li ul li:hover ul {
 left: 100%;
 top: 0;
}
#nav li ul
<pre>
Yukarıdaki CSS çok ince ayarlı bişey değil. Sadece temel yapı oluşturuldu. Siz kullanırken Background rengi position ayarlamalarını yapabilirsiniz. Takıldığınız bir husus olursa konu altından yazarsanız yardımcı olurum. Son olarak Ürünler başlığı üstüne gelince alt menünün animasyon ile açılmasını sağlayacak jQuery kodunu yazalım ve bitirelim.
var site = function() {
    this.navLi = $('#nav li').children('ul').hide().end();
    this.init();
};
 
site.prototype = {
 
    init : function() {
        this.setMenu();
    },
 
    // Enables the slidedown menu, and adds support for IE6
 
    setMenu : function() {
 
    $.each(this.navLi, function() {
        if ( $(this).children('ul')[0] ) {
            $(this)
                .append('<span />')
                .children('span')
                    .addClass('hasChildren')
        }
    });
 
        this.navLi.hover(function() {
            // mouseover
            $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
        }, function() {
            // mouseout
            $(this).find('> ul').stop(true, true).hide();
        });
 
    }
 
}
 
new site();
Şimdi sonuç olarak yukarıda ki anlattığım konuyu toparlarsak böyle bir sonuç karşımıza çıkıyor.




Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
Gönderen zaman:
Etiketler:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)