एक साधारण HTML मेनू में सक्रिय आइटम को हाइलाइट करने के लिए उपकरण

लेआउट में डिजाइनर द्वारा तैयार किए गए लगभग प्रत्येक मेनू में वर्तमान मेनू आइटम के लिए थोड़ा अलग प्रदर्शन होता है, जिस पर उपयोगकर्ता वर्तमान में स्थित है। प्रयोज्य बढ़ाने के लिए ये मूल चाल हैं। अधिकतर, ऐसे सक्रिय मेनू आइटम किसी तरह से हाइलाइट करने का प्रयास करते हैं।



यह एक अव्यवस्थित सूची पर एक मेनू लागू करने के लिए प्रथागत है, और वर्तमान मेनू आइटम को सक्रिय बनाने के लिए, इसमें current active



कक्षाएं जोड़ें:

 <li class="current active"> <a href="#link">Current link</a> </li>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वास्तव में, यह दो मुख्य प्रकार के लिंक को अलग करने के लिए प्रथागत है, जिन्हें हाइलाइट करने की आवश्यकता है:

• वर्तमान लिंक (वर्तमान) - मेनू आइटम उपयोगकर्ता वर्तमान में है
• सक्रिय लिंक - सक्रिय मेनू आइटम जो वर्तमान मेनू आइटम के सापेक्ष माता-पिता हैं जो उपयोगकर्ता वर्तमान में है

बेशक, यदि आप सिम्फनी का उपयोग करते हैं - आपके पास KNPMenuBundle



का उपयोग करने का अवसर है, जहां आप सक्रिय आइटम के हाइलाइट को समायोजित कर सकते हैं, हालांकि यदि आप पहली बार ऐसा करते हैं - तो यह जटिल लग सकता है। लेकिन अगर आपके पास केवल एक साधारण HTML मेनू है जिसमें केवल नेस्टिंग के कई स्तर हैं और आप इसे KNPMenuBundle



जैसे OOP मेनू में स्थानांतरित करने के लिए बहुत आलसी हैं, तो मैं सुझाव देता हूं कि ActiveMenuItemBundle लाइब्रेरी जो आपको वर्तमान मेनू आइटम को हाइलाइट करने में मदद करेगी।



परियोजना खुला स्रोत है , एमआईटी लाइसेंस के तहत वितरित किया जाता है और डाउनलोड के लिए उपलब्ध है:

• GitHub
• Packagist

स्थापना

ActiveMenuItemBundle



का नवीनतम संस्करण स्थापित करने का सबसे आसान तरीका संगीतकार का उपयोग करके एक सिम्फनी परियोजना के लिए है :

 { "require": { "bw/active-menu-item-bundle": "1.1.*@dev" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और फिर बंडल को app/AppKernel.php



में पंजीकृत करें:

 public function registerBundles() { $bundles = array( // other bundles... new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(), );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

के उपयोग

अब आपके Twig टेम्पलेट्स में कई नए फ़िल्टर और फ़ंक्शन उपलब्ध हैं जो सक्रिय मेनू आइटम को निर्धारित करने में मदद करेंगे।



यह देखने के लिए कि क्या मेनू आइटम मार्ग वर्तमान मार्ग से मेल खाता है, is_active



फ़िल्टर का उपयोग करें।

उदाहरण 1:

 <li class="{{ 'route_name'|is_active }}"> <a href="{{ path('route_name') }}">Current link</a> </li>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि मार्ग मेल खाता है, तो फ़िल्टर स्ट्रिंग current active



लौटाएगा।



एक बहुस्तरीय मेनू के मूल आइटम के लिए, यह जांचने के लिए कि क्या वर्तमान मार्ग उसके बच्चे के is_active



के साथ मेल खाता है, is_active



फ़ंक्शन का उपयोग करें, पहले तर्क के साथ इसमें बाल मार्गों की एक सरणी को पास करना, और दूसरे तर्क के साथ दिए गए मेनू आइटम को रूट करें।

उदाहरण 2:

 <li class="{{ is_active(['child_route_1', 'child_route_2'], 'parent_route') }}"> <a href="{{ path('parent_route') }}">Parent link</a> <ul> <li class="{{ 'child_route_1'|is_active }}"> <a href="{{ path('child_route_1') }}">Child link</a> </li> <li class="{{ 'child_route_2'|is_active }}"> <a href="{{ path('child_route_2') }}">Current link</a> </li> </ul> </li>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि लिंक के लिए मार्ग child_route_2



Current link



child_route_2



, तो current active



कक्षाएं उसे सौंपी जाएंगी, और केवल active



वर्ग को उसके माता-पिता को पेरेंट_रूटे parent_route



साथ सौंपा जाएगा।



यदि आपको मार्गों के बजाय अनुरोध URI के साथ काम करने की आवश्यकता है, is_active_uri



फ़िल्टर और is_active_uri



फ़ंक्शन का उपयोग करें, जो ठीक उसी तरह से काम करते हैं, तो आपको उनके लिए एक अनुरोध URI पास करना होगा, जो कि सिम्फनी बॉक्स से दिए गए path



द्वारा उत्पन्न किया जा सकता है।

उदाहरण 3:

 <li class="{{ path('route_name')|is_active_uri }}"> <a href="{{ path('route_name') }}">Current link</a> </li>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

डेमो

डेमो उदाहरण देखने के लिए, आपको देव मोड के लिए app/config/routing_dev.yml



में रूटिंग आयात करने की आवश्यकता है:

 bw_active_menu_item: resource: "@BWActiveMenuItemBundle/Resources/config/routing.yml" prefix: /bw/demo/active-menu-item
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

फिर अंतर्निहित php app/console server:run



शुरू php app/console server:run



को देव मोड में php app/console server:run



और पते पर जाएं localhost:8000/bw/demo/active-menu-item/index



localhost:8000/bw/demo/active-menu-item/index



। यहाँ Twig टेम्पलेट के लिए डेमो कोड है ।

निष्कर्ष

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

कौन परवाह करता है - यहां वह कोड है जो फिल्टर और कार्यों के संचालन के लिए जिम्मेदार है ताकि वे लंबे समय तक न दिखें।



आपके ध्यान के लिए आप सभी का धन्यवाद और आपके काम का आनंद लेंगे!



पीएस मैं समझता हूं कि तीर को दबाया जाना आसान है, लेकिन अगर आप माइनस हैं, तो कृपया टिप्पणी में क्यों वर्णन करने के लिए परेशानी उठाएं।