Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/serpito/public_html/wp-content/plugins/amp-plus/amp-plus.php on line 200
jQuery Dropdown (Açılır) Menu | - Demo Uygulama - Serpito | www.serpito.com - AMP tarafı | Hızlandırılmış Mobil Sayfa

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

jQuery dropdown menu | Quelle: www.serpito.com
jQuery Dropdown (Açılır) Menu Posted on 11 Şubat 201007 Şubat 2013 by Atilla Akoğlu

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.
Baskı
Içerikten sorumlu:
www.serpito.com
AMP eklentisi aracılığıyla mobil sayfa:
amp-cloud.de
Gizlilik ve Kullanım Şartları:
www.serpito.com
AMP-Update:
07.06.2018 - 07:55:28