JQuery के शुरुआती फ्लोटिंग मेनू

यह लेख नौसिखिया jQuery डेवलपर्स की मदद करने के लिए है। मैं खुद एक शुरुआत हूं, इसलिए मैं अपने अनुभव को मेरे जैसे लोगों के साथ साझा करना चाहूंगा।

मेरा काम अगले ग्राहक की साइट पर एक "फ़्लोटिंग" मेनू बनाना था, क्योंकि सीएमएस परियोजना के लिए सबसे अच्छा नहीं था (जूमला 1.5), और एक पर्याप्त तैयार-किए गए मॉड्यूल को ढूंढना और इसे मेरी ज़रूरतों के अनुसार समायोजित करना एक अविश्वसनीय रूप से समय लेने वाला काम लग रहा था, यह मेरा अपना "प्लगइन" लिखने का फैसला किया गया था। "(उद्धरण चिह्नों में, परिणाम शायद ही एक प्लगइन कहा जा सकता है) एक अस्थायी मेनू के लिए।

कार्य का परिणाम बहुत अनुकूलित नहीं है, संभवतः अतार्किक कोड कहीं, लेकिन इसे स्वतंत्र रूप से विकसित किया गया था और मुझे आशा है कि, एक समान कार्य के साथ शुरुआती का सामना करने में मदद करेगा।

एक समाधान बनाया गया था जिसे बाद में लगभग किसी भी प्रणाली में बनाया जा सकता है।

इस विशेष मामले में मेनू का लेआउट है:

<div id="topMenu"> <div id="activeMenu" style="left: -999px; width: 0px;"></div> <ul> <li><a href="#" class="mainlevel" id="active_menu"> 1</a></li> <li><a href="#" class="mainlevel"> 2</a></li> <li><a href="#" class="mainlevel"> 3</a></li> <li><a href="#" class="mainlevel lastMenuItem"> 4</a></li> </ul> </div>​ 

सक्रियमेनु तत्व, वास्तव में, वही "फ्लोटिंग" तत्व है। JQuery कोड को ठीक करने के लिए मत भूलना, जबकि आपकी आवश्यकताओं को फिट करने के लिए मेनू का लेआउट बदला जा सकता है।

इस उदाहरण के लिए सीएसएस:

 #topMenu{ clear: both; position: relative; overflow: hidden; top: 23px; margin-left: 14px; } #topMenu a{ font-family: Arial; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #686868; text-decoration: none; display: block; float: left; height: 32px; vertical-align: middle; padding-top: 14px; padding-left: 20px; padding-right: 20px; border-left: 1px solid #ccc; z-index: 2; position: relative; } #topMenu a:hover{ text-decoration: none; color: #3d3d3d; } #topMenu a.lastMenuItem{ border-right: 1px solid #ccc; } #activeMenu{ position: absolute; width: 0px; height: 47px; left: -999px; background: #c0c0c0; z-index: 1; } 

खैर, वास्तव में, टिप्पणियों के साथ jQuery कोड:

 jQuery(document).ready(function(){ if(jQuery("#active_menu").length>0){ //     ,       var menuWidth = jQuery("#active_menu").outerWidth(); //      var menuLeft = jQuery("#active_menu").position().left; //       jQuery("#activeMenu").stop().animate({ //    left: menuLeft+'px', width: menuWidth+'px' }, 500, 'linear'); } jQuery("#topMenu a.mainlevel").mouseover(function(){ //         .   ,      ,      ,       var menuWidth = jQuery(this).outerWidth(); var menuLeft = jQuery(this).position().left; jQuery("#activeMenu").stop().animate({ left: menuLeft+'px', width: menuWidth+'px' }, 300, 'linear'); }); jQuery("#topMenu").mouseleave(function(){ //           (     ,    ) if(jQuery("#active_menu").length<=0){ //    ,       jQuery("#activeMenu").stop().animate({ left: '-999px', width: '0px' }, 500, 'linear'); } else{ // ,      –     var menuWidth = jQuery("#active_menu").outerWidth(); var menuLeft = jQuery("#active_menu").position().left; jQuery("#activeMenu").stop().animate({ left: menuLeft+'px', width: menuWidth+'px' }, 500, 'linear'); } }); });​ 

मैं आदर्श या यहां तक ​​कि लिखित कोड की सहिष्णुता का नाटक नहीं करता हूं, मुझे रचनात्मक आलोचना करने में खुशी होगी - यह मुझे और शुरुआती दोनों को मदद करेगा जो इस लेख को पढ़ते हैं।

आप यहां डेमो देख सकते हैं - jsfiddle.net/bYY6Y/7

Yurik417 से संपादन:

और रचनात्मक आलोचना के बारे में:
1. विभिन्न घटनाओं में आपके लिए एनीमेशन समान है, इसलिए, आपको केवल एक फ़ंक्शन लिखना चाहिए और आवश्यक होने पर कॉल करना चाहिए।
2. आप लगातार एक ही तत्वों को एक्सेस कर रहे हैं और आप लगातार DOM की खोज कर रहे हैं - यह गलत है। चर में इन तत्वों को कैश करें
3. खैर, घटना के बारे में पढ़ें। ()
jsfiddle.net/bYY6Y/71/