jQuery Dropdown Menu

Yapılmışı varken sıfırdan yapmak pek mantıklı olmasa da, piyasada bulunan pluginlerin çıkarttığı sorunlar yüzünden (eski tarayıcılarda kıçının başının oynaması vs.) kendim olabildiğince basite indirgenmiş bir plugin yazdım.
Sadece menü olarak değil, farklı şekillerde de kullanmak mümkün. Demo sayfasından inceleyebilirsiniz.

jQuery fonksiyon:

// drop-down menu
(function( $ ) {

    $.fn.dropdown_menu = function(o){

        var settings = $.extend({
            'auto_hide'      : false,
            'save_state'     : true,
            'sub_menu_class' : 'sub',
            'ico_down_class' : 'ico_down',
            'ico_left_class' : 'ico_left'
        }, o);

        $(this).each(function(){

            var menu_ul = $(this);
            var sub_menus = menu_ul.find('.' + settings.sub_menu_class);

            sub_menus.hide();

            sub_menus.each(function(){

                var that = $(this);
                var menu_id = menu_ul.attr('id');

                $(this).parent().find('a:first').addClass('ico_left').click(function(){

                    var siblings = $(this).parent().parent().find('li');

                    if(settings.auto_hide) {
                        sub_menus.slideUp();
                        menu_ul.find('.' + settings.ico_down_class)
						       .removeClass(settings.ico_down_class)
							   .addClass(settings.ico_left_class);
                    }

                    if(settings.save_state) {

                        if (!that.is(':visible')) {
                            $.cookie('menu_order_div', menu_id, {path: '/'});
                            $.cookie('menu_order', siblings.index($(this).parent()), {path: '/'});
                        } else {
                            $.cookie('menu_order_div', '', {path: '/'});
                            $.cookie('menu_order', '', {path: '/'});
                        }

                    }

                    if (that.is(':visible')) {
                        that.slideUp();
                        $(this).removeClass(settings.ico_down_class)
						       .addClass(settings.ico_left_class);
                    } else {
                        that.slideDown();
                        $(this).removeClass(settings.ico_left_class)
						       .addClass(settings.ico_down_class);
                    }
                    return false;
                });
            });

        });

        if(settings.save_state && $.cookie('menu_order') && $.cookie('menu_order_div')) {
            var li_items = $('#' + $.cookie('menu_order_div')).find('li');
            var active_li = li_items[$.cookie('menu_order')];
            $(active_li).find('.' + settings.sub_menu_class)
                        .show()
                        .parent()
                        .find('a:first')
                        .removeClass(settings.ico_left_class)
                        .addClass(settings.ico_down_class);
        }

    }

})( jQuery );

Örnek html:

<ul id="left_menu_1" class="left_menu">
	<li class="title">Main Title</li>
	<li>
		<a href="#">Title</a>
		<ul class="sub">
			<li><a href="#">Sub menu 1</a></li>
			<li><a href="#">Sub menu 2</a></li>
			<li><a href="#">Sub menu 3</a></li>
			<li><a href="#">Sub menu 4</a></li>
		</ul>
	</li>
	<li><a href="#">Title 2</a></li>
	<li>
		<a href="#">Title 3</a>
		<ul class="sub">
			<li><a href="#">Sub menu 1</a></li>
			<li><a href="#">Sub menu 2</a></li>
			<li><a href="#">Sub menu 3</a></li>
			<li><a href="#">Sub menu 4</a></li>
		</ul>
	</li>
	<li><a href="#">Title 4</a></li>
</ul>

<script type="text/javascript">
$(document).ready(function() {
    $('.left_menu').dropdown_menu();
    //$('.left_menu').dropdown_menu({auto_hide:true, save_state:false});
});
</script>

Demo: http://www.rterzi.com/blog/demo/jquery.dropdownmenu/dropdownmenu.html
Download: http://www.rterzi.com/blog/demo/jquery.dropdownmenu/jquery.dropdownmenu.zip

22 Haziran 2012 - This entry was posted in jQuery and tagged , , . Bookmark the permalink.

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

HTML tags are not allowed.