कार्यक्षेत्र सीएसएस मेनू: यह अपने आप कर रही

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

बुनियादी कदम

एक सरल बनाने के लिए खड़ी मेनू सीएसएस, तो आप निम्न चरणों की आवश्यकता है:

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

1. होम।
2. हमारे इतिहास।
3. गाइड।
4. सेवाएं।
5. संपर्क।

2. फिर लिंक स्टाइलिंग के रूप में आप सीएसएस की मदद से कामना करते हैं।

हम लिखने एचटीएमएल कोड, my_Vmenu.html फाइल में रखने के लिए और यह ब्राउज़र में कैसा दिखाई देगा,:

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

विवरण शैलियों

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

विस्तृत विवरण के लिए इस्तेमाल किया स्टाइलशीट

अब हमारी सीएसएस ऊर्ध्वाधर मेनू के विवरण पर विचार करें:

सूची-शैली-प्रकार आप मार्कर की सूची को हटाने के लिए अनुमति देता है। मार्जिन और गद्दी के लिए "0" की स्थापना करके सूची में अतिरिक्त गद्दी को हटा दें। एचटीएमएल कोड से देखा जा सकता है, हमारे मेनू एक सूची है, और शैलियों सीएसएस का उपयोग कर परिभाषित कर रहे हैं।

उल # my_Vmenu - पूरी सूची के समग्र शैली।

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

उल # my_Vmenu ली एक: मंडराना - एक समय था जब एक लोगों पर घूमता पर मेनू आइटम के विचाराधीन प्रकार का विवरण।

उल # my_Vmenu ली अंतराल - पाठ वर्णन (शीर्षक मेनू)।

याद रखें कि my_Vmenu.css my_Vmenu.html फ़ाइलें और एक ही निर्देशिका में संरक्षित किया जाना चाहिए। हालांकि, वे भिन्न फ़ोल्डर में स्थित हो सकता है, लेकिन फिर यह my_Vmenu.css को my_Vmenu.html फ़ाइल पथ में रजिस्टर करने के लिए महत्वपूर्ण है। सावधान रहें, क्योंकि इस समस्या का नए चेहरे अक्सर।

शैली एक एचटीएमएल फ़ाइल में हेड टैग के बीच कनेक्ट होना चाहिए। menu_1.png और menu_2.png - यह सामान्य राज्य और मंडराना में चित्र मेनू आइटम के लिए तस्वीर है।

यह छवियों के लिए एक अलग फ़ोल्डर में छवियों को बचाने के नाम यह my_images, लेकिन फिर सीएसएस कोड को समायोजित करने के लिए बेहतर है। लिखें जहां इन चित्रों में दिखाए जाते हैं, वे इस निर्देशिका में होते हैं: url (my_images / menu_1.png) और यूआरएल (my_images / menu_2.png)।

सीएसएस कोड में वर्णित गुण के बाकी हिस्सों में, आसानी से समझने के लिए। वे हमारे मेनू की उपस्थिति को परिभाषित। ऐसा नहीं है कि चौड़ाई और मदों की ऊंचाई सामान्य स्थिति में एक ही आइटम के लिए निर्दिष्ट सूचना के लिए आसान है, और जब आप पर माउस को हॉवर। फ़ॉन्ट आकार 18px, गद्दी स्थानों के नाम के विभिन्न पक्षों से खरोज निर्दिष्ट करता है। प्रदर्शन आप चौड़ाई और गद्दी स्थापित करने के लिए प्रदर्शन इकाई सेट करने देता है।

हमारे ऊर्ध्वाधर मेनू

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