कम्प्युटरहरूप्रोग्रामिंग

JQuery मा accordion को रूप मा साइट को लागि ठाडो मेनू

मेनु साइटको अभिन्न भाग हुन जान्छ। इन्टरनेट साधनको आकर्षक नेभिगेशन दर्शकहरूलाई रुचि राख्न सक्षम छ। यसको अतिरिक्त, कुनै पनि मेनुको एक महत्वपूर्ण सम्पत्ति यसको सम्झौता हो। एचटीएमएल र सीएसएस प्रयोग गरी साधारण ठाडो मेनु सजिलै सिर्जना गरिएको छ। तर हामी अगाडी जान्छौं: jQuery सँग एक accordion मेनु कसरी सिर्जना गर्न सिक्नुहोस्।

मेनु सिर्जना गर्नुहोस् - "accordion"

एक accordion को रूप मा ऊर्ध्वाधर मेनु के हो? यो यस्तो ड्रप-डाउन सूची हो जसले सुविधाजनक नेविगेशन सिर्जना गर्छ र साइटमा स्टाइलिश लगाउँछ। मेनु, यो फारममा क्रियान्वित गरिएको छ, तपाईंलाई धेरै उप-वस्तुहरू समावेश गर्न अनुमति दिन्छ। जब तपाइँ वांछित वस्तुमा क्लिक गर्नुहुन्छ तिनीहरूलाई पहुँच हुन्छ। कसैले भन्नेछ कि तपाई यो शैलीमा सरल मेनु बनाउन सक्नुहुन्छ जुन क्वेरी प्रयोग गरेर। हो, यो हो। तर यस्तो वस्तु ट्याब्लेट वा स्मार्टफोनको मालिकहरूको लागि धेरै उपयुक्त हुनेछैन। चौंरी मेनु सिर्जना गर्नुहोस्, सबैको लागि आकर्षक। त्यसपछि, यस्तो नेभिगेसनको रंग स्टाइल परिवर्तन गरेर, यो कुनै पनि साइटको लागि डिजाइन अनुकूलन गर्न सम्भव हुनेछ।

एचटीएमएल कोड

त्यसोभए, हाम्रो ऊर्ध्वाधर मेनु सिर्जना गर्न, तपाईंले पहिला HTML कोड टाइप गर्न आवश्यक छ, जुन निम्न लाइनहरू समावेश हुनेछ:

यस कोडलाई एक फाइलमा Accord_menu.html भनिन्छ।

तपाईले देख्न सक्नु भएको छ, हामीले एक अङ्कित सूची सिर्जना गरेका छौं। यसमा 3 मुख्य बिन्दुहरू छन्:

- फोटोहरू;

चलचित्रहरू;

पुस्तकहरू।

प्रत्येक वस्तुमा धेरै उप-वस्तुहरू छन्। त्यहाँ कहाँ छ, तपाईलाई लिङ्कहरू थप्न आवश्यक पर्दछ। अब शैलीहरू वर्णन गर्न महत्त्वपूर्ण छ। यो सबै निर्भर गर्दछ कि तपाईंको इन्टरनेट स्रोत कस्तो देखिन्छ? साइटको लागि ठाडो मेनु सामरिक रूपमा यसको डिजाइनमा फिट हुनुपर्छ।

CSS

शैलियों संग, तपाईंसँग कुनै कठिनाई छैन। हामी मात्र ध्यान दिनुहोस् कि यस उदाहरणमा ढाँचा भर्न प्रयोग गरिन्छ। यहाँ सीएसएस कसरी देखिन्छ?

सीएसएस फाइलले रंग, साइज निर्दिष्ट गर्दछ, मार्कर सूची वस्तुहरूको बायाँतिर हटाइन्छ। यो निर्धारण गरिएको छ कि तपाइँ यस माथि होभर गर्दा प्रत्येक बिन्दु र उप-मेन कसरी व्यवहार गर्नेछ। उदाहरणका लागि:

# E1fee2 उप - बिन्दुहरूका हल्का हरियो रंग हो ।

# C4f0f7 उप-बिन्दुहरूको सूक्ष्म ह्यु हो जब तपाइँ तिनीहरूलाई माथि हुर्नुहुन्छ।

डिस्प्ले सम्पत्ति आवश्यक इन्डेन्ट र साइज समायोजन गर्न ब्लक गर्न सेट गरिएको छ। रंग, साइज, फन्ट टाइप, स्थान - यो सबै सीएसएस फाइलमा वर्णन गर्दछ। यसलाई नाम दिनुहोस्, उदाहरणका लागि, accordionmenu_my1.css।

मेनू सुधारका लागि jQuery जोड्दै

तपाईँले सम्झँदा, हाम्रो लक्ष्य ठाडो jQuery मेनु सिर्जना गर्न हो। यदि तपाइँ यो प्रविधिमा नयाँ हुनुहुन्छ भने, निराश हुनुहोस्। गुगल भण्डार प्रयोग गर्नुहोस् र jQuery स्क्रिप्ट जोड्नुहोस्। यसले मेनु थप आकर्षक बनाउँछ। एचटीटीपीएल मार्कअप HTML र जाभास्क्रिप्टको अन्तरक्रियामा आधारित जाभास्क्रिप्ट जाभास्क्रिप्ट पुस्तकालय हो। JQuery ले तपाइँ सामग्रीहरू र तत्वहरूको विशेषताहरू पहुँच गर्न अनुमति दिन्छ।

त्यसोभए, हामी HTML-फाइलको शरीरमा आवश्यक स्क्रिप्ट जोड्दछौं र तत्वहरूको छलांग बाहेक 2 चरहरू भण्डारण गर्न नियमहरू सेट गर्दछौं। हामी कोड बनाउँछ जुन अन्य ट्याबहरू बन्द गर्दछ जब तपाइँले माउस क्लिक गर्नुहुँदा एक खोल्छ। यहाँ यो कसरी देखिन्छ:

सबै परिवर्तनहरू बचत गर्नुहोस्, हेर्नुहोस् कि कसरी मेनु ब्राउजरमा देखिन्छ। यहाँ कामको समग्र परिणाम हो: नतिजाको रूपमा, हामीसँग आकर्षक आकर्षक मेनु हुनेछ, जुन तपाईको प्राथमिकताहरूमा आधारित परिवर्तन हुन सक्छ। र jQuery, CSS को क्षेत्र मा नयाँ ज्ञान प्राप्त गरेर, तपाईं आफ्नो व्यावहारिक क्षमतामा सुधार, साइट को अद्वितीय तत्वहरू सिर्जना गर्नेछ।

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ne.delachieve.com. Theme powered by WordPress.