मेनू निर्माण शायद साइटों और कार्यक्रमों के विकास में मुख्य बिंदुओं में से एक है। इसके अलावा, इस तरह के मेनू का एक अच्छा विस्तार और तार्किक डिजाइन साइट या किसी कार्यक्रम का चेहरा है। उदाहरण के लिए, आइए माइक्रोसॉफ्ट और विंडोज 7 ऑपरेटिंग सिस्टम को लें।विंडोज 7 के रिलीज होने के बाद, माइक्रोसॉफ्ट ने बहुत सारी आलोचनाएं सुनीं जो खुद के लिए चापलूसी नहीं थी। कई आलोचनाएं हुई हैं, लेकिन अक्सर असुविधाजनक रूप से स्थित मेनू आइटम। सीएसएस और एक्सप्रेशन वेब के साथ एक क्षैतिज ड्रॉपडाउन मेनू बनाने के तरीके पर इस ट्यूटोरियल को ध्यान से पढ़ें। मेनू बनाने के लिए टैग शैलियाँ बदल जाएँगी
निर्देश
चरण 1
मैनेज स्टाइल्स पर जाएं और फिर न्यू स्टाइल बटन पर क्लिक करें। आपके द्वारा अभी-अभी बनाई गई नई शैली को Selector ul li नाम दें। यह भी सुनिश्चित करें कि नई शैली को drop-down.css फ़ाइल में परिभाषित किया जाना चाहिए।
चरण 2
एक क्षैतिज मेनू को फैलाने के लिए, आपको मेनू आइटम को बताना होगा कि यह क्षैतिज होगा। इसके बाद, आपको प्रत्येक मेनू आइटम की चौड़ाई निर्धारित करने और सभी सूची आइटम के सामने सभी अनावश्यक बिंदुओं को हटाने की आवश्यकता है।
चरण 3
क्षैतिज संरेखण के लिए लेआउट पर जाएं और प्रदर्शन विशेषता को इनलाइन पर सेट करें। फ्लोट विशेषता को बाईं ओर सेट करें। अप्लाई बटन पर क्लिक करें। सभी सूची आइटम एक पंक्ति पर सेट होने चाहिए। उनके लिए एक-दूसरे को ओवरलैप न करने के लिए, आपको निम्न कार्य करने होंगे: चौड़ाई विशेषता का स्थिति मान 150px पर सेट करें। अब इसे जांचें। सूची के सभी तत्वों का आकार समान होना चाहिए।
चरण 4
अब हमें सूची आइटम के सामने के बिंदुओं को हटाने का प्रयास करने की आवश्यकता है। ऐसा करने के लिए, सूची पर जाएं और सूची-शैली-प्रकार विशेषता को किसी पर भी सेट करें।
चरण 5
सभी परिवर्तनों को स्वीकार करने के लिए ठीक क्लिक करें।
चरण 6
उल ली शैली के लिए फ़ॉन्ट आकार समायोजित करने के लिए, आपको निम्नलिखित कार्य करने होंगे। शैलियाँ प्रबंधित करें में, उल ली शैली पर राइट क्लिक करें जिसे आपको संशोधित शैली का चयन करने की आवश्यकता है। विशेषताओं को जोड़ने या बदलने के लिए परिचित संवाद बॉक्स खुल जाएगा। फ़ॉन्ट श्रेणी में जाएं और फ़ॉन्ट-पारिवारिक विशेषता को एरियल, हेल्वेटिका, सैन्स-सेरिफ़ पर सेट करें। इसके बाद, फ़ॉन्ट-आकार विशेषता पर जाएं और इसे 0.9em पर सेट करें। उसके बाद, टेक्स्ट-ट्रांसफ़ॉर्म विशेषता सेट करें, इसके लिए मान को अपरकेस पर सेट करें।
चरण 7
बनाए गए मेनू में आइटम की ऊंचाई को स्थिति श्रेणी में समायोजित किया जा सकता है। ऊंचाई विशेषता को 30px पर सेट करें।
चरण 8
इसके बाद, आपको menu.html फाइल को सेव करना होगा। ऐसा करने के लिए, एक्सप्रेशन वेब फ़ाइल को सहेजने के लिए आवश्यक एम्बेडेड फ़ाइलें सहेजें विंडो खोलेगा। drop-down.css फ़ाइल में सहेजें। सेव करने के लिए ओके पर क्लिक करें।
चरण 9
अब अपना रिजल्ट चेक करें। विश्वसनीयता के लिए, विभिन्न ब्राउज़रों में इसका परीक्षण करना बेहतर है। डिफ़ॉल्ट ब्राउज़र में प्राप्त परिणाम की जांच करने के लिए, आपको अपने कीबोर्ड पर F12 कुंजी दबानी होगी।
