IhsAdke.com

HTML और CSS में एक निलंबित मेनू कैसे बनाएं

एक ड्रॉप-डाउन मेनू एक पृष्ठ के मुख्य भाग के स्पष्ट और अनुक्रमिक दृश्य प्रदान करता है और इसके उप-भाग उप-धारा को प्रदर्शित करने के लिए आपको जो कुछ करना चाहिए, वह मुख्य अनुभाग पर होवर करना है। आप केवल एचटीएमएल और सीएसएस प्रोग्रामिंग भाषाओं का उपयोग करके यह कर सकते हैं।

चरणों

भाग 1
HTML कोड को शेड्यूल करना

एचटीएमएल और सीएसएस चरण 1 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
1
नेविगेशन अनुभाग बनाएं आम तौर पर, लोग इसका इस्तेमाल करते हैं
  • एचटीएमएल और सीएसएस चरण 2 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    2
    प्रत्येक अनुभाग को एक क्लास विशेषता दें। सीएसएस का उपयोग करके इन तत्वों को स्टाइल करने के लिए हम बाद में क्लास विशेषता का उपयोग करेंगे। कंटेनर के लिए और मेनू के लिए अलग-अलग वर्ग विशेषताओं को दें।
    • वर्ग = "नव-आवरण">
  • एचटीएमएल और सीएसएस चरण 3 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    3
    मेनू आइटम की एक सूची जोड़ें एक अनोर्ड सूची (
      ) शीर्ष मेनू आइटम (सूची आइटम शामिल हैं
    • ), जिस पर उपयोगकर्ता ड्रॉप-डाउन मेनू पर होवर करते हैं सूची तत्व में "clearfix" वर्ग जोड़ता है (हम उसके बाद सीएसएस स्टाइल शीट में वापस जायेंगे)।
        • होम पेज
        • कर्मचारियों
        • हमसे संपर्क करें
  • एचटीएमएल और सीएसएस चरण 4 में एक ड्रॉपडाउन मेनू बनाएं शीर्षक वाला चित्र
    4
    लिंक दर्ज करें यदि शीर्ष-स्तरीय मेनू में आपके अपने पृष्ठों के लिंक भी हैं, तो उन्हें अभी डालें यदि उनके पास लिंक नहीं है, तो एक गैर-मौजूद पेज (जैसे "#!") के लिए एक बनाएँ ताकि उपयोगकर्ता के कर्सर में बदलाव दिखाई दे। इस उदाहरण में, "संपर्क" लिंक किसी भी पृष्ठ पर नहीं जाता, लेकिन अन्य दो मेनू आइटम करते हैं:
  • एचटीएमएल और सीएसएस चरण 5 में एक ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    5
    निलंबित वस्तुओं के लिए एक सब्बिलीट बनाएं स्टाइल समाप्त होने के बाद, ये सूचियां ड्रॉप-डाउन मेनू बन जाएंगी। इसे आइटम सूची में संग्रहीत करें जो कि उपयोगकर्ता माउस को स्थानांतरित करने जा रहा है। पहले की तरह, एक क्लास विशेषता और एक लिंक शामिल करें।



  • भाग 2
    सीएसएस कोड शेड्यूलिंग

    एचटीएमएल और सीएसएस चरण 6 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    1
    सीएसएस स्टाइल शीट खोलें। सीएसएस स्टाइल शीट को एचटीएमएल दस्तावेज़ के "सिर" खंड में लिंक करें यदि आपने पहले से ऐसा नहीं किया है यह आलेख सीएसएस प्रोग्रामिंग भाषा की मूल बातें नहीं सिखाता है, जैसे फ़ॉन्ट सेटिंग और पृष्ठभूमि रंग
  • एचटीएमएल और सीएसएस चरण 7 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    2
    "साफ़फिक्स" कोड जोड़ें "साफ़फिक्स" वर्ग को याद रखें जो आपने मेनू सूची में जोड़ा था? आमतौर पर, ड्रॉप-डाउन मेनू के तत्वों को एक पारदर्शी पृष्ठभूमि होती है और इसके चारों ओर अन्य तत्वों को दबदबा कर सकते हैं। एक छोटा सीएसएस कोड इस समस्या को ठीक कर सकता है। यह एक सरल और आसान समाधान है, लेकिन इंटरनेट एक्सप्लोरर 7 या इससे पहले समर्थित नहीं है:
    • .साफ़फ़िक्स: के बाद {
    • सामग्री: "" -
    • प्रदर्शन: टेबल-
    • }
  • एचटीएमएल और सीएसएस चरण 8 में एक ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    3
    मूल लेआउट बनाएं यह कोड पृष्ठ के शीर्ष पर स्थित मेनू को व्यवस्थित करता है और निलंबित तत्वों को छुपाता है। यह संगत कोड पर केंद्रित रहने के लिए कड़ाई से कार्यात्मक है - फिर आप अतिरिक्त सीएसएस गुणों जैसे कि भरण और मार्जिन के साथ इसे छिड़क सकते हैं।
    • .एनएवी-आवरण {
    • चौड़ाई: 100%
    • पृष्ठभूमि: # 999-
    • }
    • .नेवि-मेन्यू {
    • स्थिति: रिश्तेदार-
    • प्रदर्शन: इनलाइन-ब्लॉक-
    • }
    • .नेवि-मेन्यू ली {
    • प्रदर्शन: इनलाइन-
    • सूची-शैली-प्रकार: कोई नहीं-
    • }
    • .उप मेनू {
    • स्थिति: निरपेक्ष-
    • प्रदर्शन: कोई नहीं-
    • पृष्ठभूमि: # सीसीसी-
    • }
  • एचटीएमएल और सीएसएस चरण 9 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    4
    एक निलंबित वस्तु को उसके ऊपर घूमकर दिखाई दें। ड्रॉप-डाउन सूची में आइटम दिखाई नहीं दे रहे हैं यह सूची है कि जिस पर यह संबंधित है पर मंडराने के द्वारा एक पूरे सब्लिलिस्ट को बनाने का तरीका यहां है:
    • .नेवि-मेन्यू लि: हॉवर> उल {
    • प्रदर्शन: इनलाइन-ब्लॉक-
    • }
    • नोट: यदि ड्रॉप-डाउन मेनू आइटम अतिरिक्त मेनू (फ्लोटिंग कंट्रोल) तक ले जाते हैं, तो यहां जोड़े गए सभी गुण उन सभी को प्रभावित करेंगे। यदि आप केवल ड्रॉप-डाउन मेनू का पहला स्तर शैली चाहते हैं, तो ".nav-menu> ul" का उपयोग करें.
  • एचटीएमएल और सीएसएस चरण 10 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    5
    एक तीर के साथ ड्रॉप-डाउन मेनू प्रदर्शित करें। वेब डिज़ाइनर अक्सर यह इंगित करते हैं कि एक तत्व ड्रॉप डाउन मेनू खोलता है जिसमें तीर नीचे इंगित करती है। निम्न कोड प्रत्येक मेनू आइटम में यह तीर जोड़ता है:
    • .नेवि-मेन्यू> उल> ली: के बाद {
    • सामग्री: " 25BC" - / * नीचे इंगित करने वाले तीर के लिए यूनिकोड कोड * /
    • फ़ॉन्ट आकार: .5em-
    • प्रदर्शन: इनलाइन-
    • स्थिति: रिश्तेदार-
    • }
    • नोट: "शीर्ष" (ऊपर), "नीचे" (नीचे), "दाएं" या "बाएं" (बाएं) गुणों का उपयोग करके तीर की स्थिति में समायोजन करें।
    • नोट: अगर सभी मेनू आइटम निलंबित नहीं हैं, तो पूरे "नेवि-मेनू" वर्ग को शैली न दें। इसके बजाय, प्रत्येक HTML तत्व "ली" में दूसरे वर्ग (जैसे ड्रॉप-डाउन श्रेणी) को जोड़ें जहां आप तीर को स्थान देना चाहते हैं। ऊपर दिए गए कोड में, इस वर्ग का संदर्भ दें।
  • एचटीएमएल और सीएसएस चरण 11 में ड्रापडाउन मेनू बनाएं शीर्षक वाला चित्र
    6
    भरण, पृष्ठभूमि, और अन्य गुण समायोजित करें। मेनू अब कार्यात्मक होना चाहिए, लेकिन इसकी स्टाइल की आवश्यकता होगी। यदि आप मूल सीएसएस संपत्तियों से परिचित नहीं हैं, तो इंटरनेट पर कुछ मार्गदर्शिका देखें प्रत्येक तत्व वर्ग की उपस्थिति और नियुक्ति में परिवर्तन करने के लिए इन गुणों का उपयोग करें।
  • युक्तियाँ