ठाडो CSS मेनु: यो आफैलाई गरिरहेको

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

आधारभूत कदम

एक सरल बनाउन ठाडो मेनु CSS, तपाईं निम्न कदम आवश्यक:

1 पहिलो, मेनु हुनेछ को लिंक (कोड HTML प्रयोग), को सूची निर्धारण। तिनीहरूलाई एउटा नाम दिन, उदाहरणका लागि, निम्नानुसार छन्:

1. घर।
2. हाम्रो इतिहास।
3. मार्गदर्शन।
4. सेवाहरू।
5. सम्पर्क।

तपाईं CSS को मद्दतले इच्छा रूपमा 2. त्यसपछि लिंक शैली।

हामी लेख्न HTML कोड, my_Vmenu.html फाइल राख्न र यो ब्राउजरमा हेर्न कसरी हेर्नुहोस्:

यो आधार (कंकाल) हाम्रो मेनु को छ। # 1, # 2, आदि सन्दर्भ बदलिएको हुनुपर्छ। यो एक ब्राउजरमा कस्तो देखिन्छ हेर्नुहोस्। तस्विर तपाईंलाई रुचि छैन। अब हामी पूर्ण ठाडो CSS मेनू बनाउन, शैली को तत्व वर्णन गर्न सुरु गर्नुपर्छ।

विवरण शैलीहरू

तपाईं साइट को यस्तो महत्त्वपूर्ण तत्त्व को उपस्थिति सुधार गर्न चाहनुहुन्छ सबै सेट जो एक फाइल my_Vmenu.css, सिर्जना। यहाँ ठाडो CSS मेनू revitalize हुनेछ परिचय जो कोड छ। यो र नयाँ फाइल लेख्न, र त्यसपछि हामी नजिकको लाग्न दिइन्छ कि मुख्य लाइनहरु को अर्थ हेर्न छौँ।

विस्तृत वर्णन प्रयोग शैलीपाना

अब हाम्रो CSS ठाडो मेनु को विवरण विचार गर्नुहोस्:

सूची शैली प्रकार तपाईं मार्कर सूची हटाउन अनुमति दिन्छ। सूचीमा अतिरिक्त padding हटाउन "0" सेटिङ मार्जिन र गद्दी गर्न द्वारा। HTML कोड देखि देख्न सकिन्छ रूपमा, हाम्रो मेनु सूची छ, र शैलीहरू CSS प्रयोग परिभाषित छन्।

उल # my_Vmenu - सम्पूर्ण सूची तमाम शैली।

उल # my_Vmenu ली एक - ट्याग ली बीच शैली लिंक।

उल # my_Vmenu ली एक: माथी - एक मान्छे भन्दा Hovers गर्दा एक समयमा मेनु वस्तुहरूको विचार अन्तर्गत प्रकार को एक विवरण।

उल # my_Vmenu ली एक span - पाठ वर्णन (शीर्षक मेनु)।

कि my_Vmenu.css my_Vmenu.html फाइलहरू र एउटै निर्देशिका संरक्षित हुनुपर्छ सम्झना। तथापि, तिनीहरूले विभिन्न फोल्डरहरूमा स्थित हुन सक्छ, तर त्यसपछि यो my_Vmenu.css गर्न my_Vmenu.html फाइल पथ मा दर्ता गर्न महत्त्वपूर्ण छ। किनभने यो समस्या गर्न newcomers अक्सर सावधान रहनुहोस्।

शैली एक HTML-फाइल मा टाउको ट्याग बीच जडान हुनुपर्छ। menu_1.png र menu_2.png - यो चित्र मेनु वस्तु सामान्य राज्य र माथी मा लागि तस्वीर छ।

यो, चित्र लागि छुट्टै फोल्डर मा तस्बिरहरू सुरक्षित गर्न नाम my_images, तर त्यसपछि CSS कोड समायोजन राम्रो छ। जहाँ यी तस्बिरहरू देखाइएको छ लेख्न, तिनीहरूले यस निर्देशिका हो: URL (my_images / menu_1.png) र url (my_images / menu_2.png)।

सीएसएस कोड मा वर्णन गुण बाँकी मा, सजिलै बुझ्न। तिनीहरू हाम्रो मेनु को उपस्थिति परिभाषित। तपाईंले तिनीहरूलाई माउस hover गर्दा सजिलो वस्तुहरूको चौडाई तथा उचाइ सामान्य अवस्थामा नै आइटम लागि निर्दिष्ट याद छ, र। फन्ट आकार 18px, padding ठाउँ नाम विभिन्न पक्ष बाट इन्डेन्टेसन निर्दिष्ट गर्दछ। प्रदर्शन तपाईं चौडाई र padding सेट प्रदर्शन एकाइ सेट गर्न अनुमति दिन्छ।

हाम्रो ठाडो मेनु

तपाईं देख्न सक्नुहुन्छ रूपमा, सजिलै सिर्जना गर्न ठाडो CSS मेनू। ज्ञान को डाटा को आधार मा तपाईं यसलाई सुन्दर र आफ्नो वेब साइटमा पर्यटकहरूलाई आकर्षक बनाउन सक्षम हुनेछ! आफ्नो साइट पूरक आफ्नो कल्पना, र त्यसपछि एक स्टाइलिश मेनु प्रयोग गर्नुहोस्।