Serpito

jQuery Dropdown (Açılır) Menu

Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz.

Menü aşağıdaki biçimde açılıyor

Demo

HTML kodlarımız


<ul class="xbreadcrumbs" id="breadcrumbs-2">
<li>
<a href="#" class="home">Ana Sayfa</a>

<ul>
<li><a href="http://www.serpito.com/kategori/ajax/" target="_blank">AJAX ile jQuery Kullanıcıa></a></li>
<li><a href="http://www.serpito.com/etiket/htaccess" target="_blank">.htaccess-subdomain'i </a></li>
<li><a href="http://www.serpito.com/kategori/jquery" target="_blank">Jquery Form Validator</a></li>
<li><a href="#" target="_blank">Advertise With Us</a></li>

</ul>
</li>

<li>
<a href="#">PHP</a>
<ul>
<li><a href="http://www.serpito.com/php-dersleri/" target="_blank">Php ile Random Sayı Üretme</a></li>
<li><a href="http://www.serpito.com/jquery-tab-uygulamasi/" target="_blank">Jquery Tab Uygulaması</a></li>
<li><a href="http://www.serpito.com/pop-up-sayfa/" target="_blank">Pop-up Sayfa</a></li>
<li><a href="http://www.serpito.com/phpde-xml-olusturma/" target="_blank">Php'de XML Oluşturma</a></li>
</ul>
</li>
<li>
<a href="#">MYSQL</a>
<ul>

<li><a href="http://www.serpito.com/mysql-lower-ve-upper-komutu/" target="_blank">Mysql Lower ve Upper Komutu</a></li>
<li><a href="http://www.serpito.com/mysql-andve-ve-orveya-komutu/" target="_blank">Mysql AND(ve) ve OR(veya) Komutu</a></li>
<li><a href="http://www.serpito.com/mysqlde-distict-komutu/" target="_blank">Mysql'de Distinct Komutu</a></li>
<li><a href="http://www.serpito.com/kategori/mysql-dersleri/" target="_blank">Mysql Join</a></li>
</ul>

</li>
<li>
<a href="#">Dost Siteler</a>
<ul>
<li><a href="http://www.serpito.com/">Serpito</a></li>
</ul>

</li>
<li class="current"><a href="#">Serpito.Com Site İçeriği</a></li>
</ul>

Javascript kodalarımız

/*
xBreadcrumbs (Extended Breadcrums) jQuery Plugin
© 2009 ajaxBlender.com
For any questions please visit www.ajaxblender.com
or email us at support@ajaxblender.com
*/

;(function($){
/* Variables */
$.fn.xBreadcrumbs = function(settings){
var element = $(this);
var

settings = $.extend({}, $.fn.xBreadcrumbs.defaults, settings);

function _build(){
if(settings.collapsible){
var sz = element.children('LI').length;
element.children('LI').children('A').css('white-space', 'nowrap').css('float', 'left');
element.children('LI').children('A').each(function(i, el){
if(i != sz - 1){
$(this).css('overflow', 'hidden');
$(this).attr('init-width', $(this).width());
$(this).width(settings.collapsedWidth);
}
});
}

element.children('LI').mouseenter(function(){
if($(this).hasClass('hover')){ return; }

_hideAllSubLevels();
if(!_subLevelExists($(this))){ return; }

// Show sub-level
var subLevel = $(this).children('UL');
_showHideSubLevel(subLevel, true);

if(settings.collapsible &amp;&amp; !$(this).hasClass('current')){
var initWidth = $(this).children('A').attr('init-width');
$(this).children('A').animate({width: initWidth}, 'normal');
}
});

element.children('LI').mouseleave(function(){
var subLevel = $(this).children('UL');
_showHideSubLevel(subLevel, false);

if(settings.collapsible &amp;&amp; !$(this).hasClass('current')){
$(this).children('A').animate({width: settings.collapsedWidth}, 'fast');
}
});
};

function _hideAllSubLevels(){
element.children('LI').children('UL').each(function(){
$(this).hide();
$(this).parent().removeClass('hover');
});
};

function _showHideSubLevel(subLevel, isShow){
if(isShow){
subLevel.parent().addClass('hover');
if($.browser.msie){
var pos = subLevel.parent().position();
subLevel.css('left', parseInt(pos['left']));
}
if(settings.showSpeed != ''){ subLevel.fadeIn( settings.showSpeed ); }
else { subLevel.show(); }
} else {
subLevel.parent().removeClass('hover');
if(settings.hideSpeed != ''){ subLevel.fadeOut( settings.hideSpeed ); }
else { subLevel.hide(); }
}
};

function _subLevelExists(obj){
return obj.children('UL').length &gt; 0;
};

// Entry point
_build();
};

/* Default Settings */
$.fn.xBreadcrumbs.defaults = {
showSpeed: 'fast',
hideSpeed: '',
collapsible: false,
collapsedWidth: 10
};
})(jQuery);