jQuery Dropdown (Açılır) Menu

jQuery dropdown 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);

4 thoughts on “jQuery Dropdown (Açılır) Menu

  • Örneğimizde sadece Ana Sayfa menüsünde image bulunmakta,diğer menülerede image verebiliriz,menülerimizi birbirindne ayıran > şeklindeki imaga yerine bağla bir imaga kullanabiliriz veya css kodlarımızla oynayarak font size’ları, font color’ları değiştirebiliriz, linklerimize hover verebiliriz.

  • Örnek Haricinde, Şu Şu Kodlar Temada CSS Kısmına, Şu Kodlar Arasında da Linkleriniz Diye Belirtmeniz Kullanıcılara Kolaylık Olur. Kodlardan Çok Fazla Anlamıyorum Anlasam da Ben vBulletin Sisteminde Kullanacağım İçin Karışık Oluyor

Bir Cevap Yazın

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