मेनू का उपयोग साइट पर अनुभागों के माध्यम से उपयोगकर्ता नेविगेशन की सुविधा के लिए किया जाता है। आगंतुक का ध्यान आकर्षित करने के लिए, मेनू कार्यात्मक, उपयोग में आसान होना चाहिए और साथ ही साथ पूरे संसाधन के डिजाइन के साथ जोड़ा जाना चाहिए।
निर्देश
चरण 1
मेनू बनाने से पहले, इसके प्रकार पर निर्णय लें। आप एक ड्रॉप-डाउन क्षैतिज या लंबवत बॉक्स बना सकते हैं जो उपयोगकर्ता को तब दिखाया जाएगा जब उपयोगकर्ता माउस कर्सर के साथ उस पर होवर करेगा। एक विशेष मेनू चुनते समय, आपको निर्देशित किया जा सकता है कि आगंतुकों के लिए इसका उपयोग करना कितना सुविधाजनक होगा और इसे डिजाइन के साथ कैसे जोड़ा जाएगा।
चरण 2
मेनू प्रकार चुनने के बाद, HTML संपादित करने के लिए आप जिस भी टेक्स्ट एडिटर का उपयोग करते हैं, उसका उपयोग करके अपनी पेज फ़ाइल खोलें। कोड के वांछित अनुभाग पर नेविगेट करें जहाँ आप अपना इंटरफ़ेस तत्व सम्मिलित करना चाहते हैं।
चरण 3
उसके बाद, एक ब्लॉक बनाकर और उसे दी गई आईडी के साथ एक क्रमांकित सूची बनाकर विकल्पों की एक सूची बनाएं। उदाहरण के लिए:
- लिंक १
- लिंक २
- लिंक 3
इस उदाहरण में, मैंने तीन तत्वों की एक बुलेटेड सूची बनाई और इसे आईडी पैनल आईडी के साथ एक डिव लेयर में रखा।
चरण 4
अपने पेज के सेक्शन ब्लॉक में जाएं और उपयुक्त कैस्केडिंग स्टाइल शीट मेन्यू बनाएं। यदि आप एक क्षैतिज मेनू बनाना चाहते हैं, तो आप परिणामी सूची के लिए इनलाइन विशेषता शामिल कर सकते हैं:
#पैनल उल ली {डिस्प्ले: इनलाइन; }
चरण 5
पृष्ठ की पूरी लंबाई के साथ एक क्षैतिज रेखा बनाने के लिए, आप निम्न कोड का उपयोग कर सकते हैं:
# पैनल उल {मार्जिन-बाएं: 0; पैडिंग: 2px 0; }
चरण 6
फिर आप दृश्य विभाजन को आयतों में कर सकते हैं:
#पैनल उल ली ए {मार्जिन-लेफ्ट: 3px; सीमा: 1px; पैडिंग: 2px 3px; पृष्ठभूमि: नीला; }
यह कोड मार्जिन-बाएं और पैडिंग विशेषताओं के माध्यम से सीमा तत्वों से टेक्स्ट इंडेंट सेट करता है, और प्रत्येक सूची आइटम के लिए पृष्ठभूमि रंग भी सेट करता है। इस उदाहरण में, रंग नीला है, लेकिन आप इसे अपने विवेक से बदल सकते हैं।
चरण 7
टैब में चयनित वर्तमान पृष्ठ पर आइटम को इंगित करने के लिए, उपयुक्त पैरामीटर को ओपन क्लास में सेट करें:
#मेनू उल ली ए # खुला {पृष्ठभूमि: लाल; सीमा-नीचे: 1px; }
पैनल में चयनित वर्तमान पृष्ठ अब लाल रंग में प्रदर्शित होगा।
चरण 8
फ़ाइल में परिवर्तन सहेजें और एक ब्राउज़र के माध्यम से अपना पृष्ठ खोलकर लिखित कोड की कार्यक्षमता की जाँच करें। अतिरिक्त प्रदर्शन विकल्प सेट करने के लिए, आप ऑब्जेक्ट की उपस्थिति को बढ़ाने के लिए हमेशा CSS या HTML जोड़ सकते हैं।
