jQuery Dropdown (Açılır) Menu | - Demo Uygulama - Serpito

jQuery dropdown menu | Quelle: www.serpito.com
2010-02-11T15:50:01+03:00
2019-03-21T04:36:26+0100
jQuery Dropdown (Açılır) Menu Posted on 11 Şubat 201007 Şubat 2013

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); 
This entry was posted in Demo Uygulama, jQuery and tagged , , , , , , , , , , . Bookmark the permalink.
Impressum
Verantwortlich für den Inhalt:
www.serpito.com
Mobile Seite per AMP Plugin:
amp-cloud.de
Datenschutz & Nutzungsbedingungen:
www.serpito.com
AMP-Update:
21.03.2019 - 04:43:43