स्लाइडिंग मेनू कैसे बनाएं

विषयसूची:

स्लाइडिंग मेनू कैसे बनाएं
स्लाइडिंग मेनू कैसे बनाएं

वीडियो: स्लाइडिंग मेनू कैसे बनाएं

वीडियो: स्लाइडिंग मेनू कैसे बनाएं
वीडियो: स्लाइड आउट नेविगेशन | एचटीएमएल, सीएसएस और जावास्क्रिप्ट 2024, मई
Anonim

वेबसाइट और सॉफ्टवेयर विकास के सबसे महत्वपूर्ण पहलुओं में से एक मेनू निर्माण है। एक सुंदर स्लाइडिंग मेनू कई वेबसाइट स्वामियों और प्रोग्रामर्स के लिए एक बेंचमार्क बना हुआ है। यह सीएसएस और एक्सप्रेशन वेब टूल्स का उपयोग करके किया जा सकता है।

स्लाइडिंग मेनू कैसे बनाएं
स्लाइडिंग मेनू कैसे बनाएं

अनुदेश

चरण 1

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

चरण दो

लेआउट विकल्प चलाएँ और प्रदर्शन विशेषता सेट करें। स्क्रीन पर संरेखित करने के लिए इसे एक उपयुक्त इनलाइन मान दें। फ्लोट एट्रिब्यूट को लेफ्ट पर सेट करें और अप्लाई की दबाएं। सूची के सभी तत्वों को एक पंक्ति में सेट करें। उन्हें साफ-सुथरा रखने के लिए और ओवरलैप नहीं करने के लिए, चौड़ाई विशेषता को 150 px के रूप में स्थिति पर सेट करें। सुनिश्चित करें कि सूची में सभी आइटम समान आकार के हैं। सूची विशेषता पर जाकर और सूची शैली-प्रकार को कोई नहीं पर सेट करके प्रत्येक तत्व के सामने के बिंदुओं को हटा दें। परिवर्तनों को स्वीकार करने और प्रभावी होने के लिए "ओके" पर क्लिक करें।

चरण 3

उल ली के लिए शैली और फ़ॉन्ट आकार समायोजित करें। मैनेज स्टाइल्स पर जाएं और मॉडिफाई स्टाइल का चयन करते हुए उल ली पर राइट क्लिक करें। आप पहले से ही परिचित संवाद मेनू देखेंगे। फ़ॉन्ट पर जाएं, फ़ॉन्ट-परिवार का चयन करें और इस विशेषता को हेल्वेटिका, एरियल, सैन्स-सेरिफ़ पर सेट करें। फ़ॉन्ट आकार समायोजित करें और इसे 0, 9 पर सेट करें। टेक्स्ट-ट्रांसफ़ॉर्म विशेषता को अपरकेस पर सेट करें। ऊँचाई - स्थिति विशेषता में, मान को 30 px पर सेट करके मेनू आइटम की सटीक ऊँचाई निर्दिष्ट करें।

चरण 4

सभी सुधारात्मक कार्रवाइयाँ पूर्ण होने पर फ़ाइल को menu.html के रूप में सहेजें। यह देखने के लिए कि क्या यह काम करता है, विभिन्न अनुप्रयोगों और ब्राउज़रों में आपके द्वारा अभी बनाए गए मेनू का परीक्षण करें। जैसा कि आप देख सकते हैं, ऐसा मेनू बनाना मुश्किल नहीं है।

सिफारिश की: