टैब्स के बिना CSS में स्लाइडिंग दरवाजे का उपयोग कैसे करें

कैस्केडिंग स्टाइल शीट्स एक प्रकार की स्टाइल शीट भाषा है जो एक मार्कअप भाषा में XML, HTML या XHTML जैसी वेब सामग्री में शैली जोड़ती है। CSS में स्लाइडिंग दरवाजे की तकनीक दो अलग-अलग पृष्ठभूमि छवियों का उपयोग करके एक गतिशील प्रभाव बनाने के बारे में है। नीचे की छवि को पूरा किए बिना भ्रम पैदा करने के लिए शीर्ष छवि नीचे की छवि पर रहती है। टैब के बिना स्लाइडिंग डोर तकनीक को लागू करने की चाल सीएसएस के साथ डिज़ाइन की गई सूचियों का उपयोग करके पाठ-आधारित नेविगेशन तत्वों को उत्पन्न करना है।

1।

"DIV" टैग में संलग्न अपने नेविगेशन तत्वों की एक अनियंत्रित सूची बनाकर शुरू करें। उदाहरण के लिए:

मुखपृष्ठ
उत्पाद और सेवाएं
हमसे संपर्क करें

इस उदाहरण में, सूची में एंकर और स्पैन टैग शामिल हैं। एंकर टैग नेविगेशन तत्वों के विशिष्ट स्थान से लिंक करने के लिए "href" विशेषता का उपयोग करते हैं। यह नेविगेशन तत्वों के भीतर पाठ की शैली को नियंत्रित करने के लिए टैग का भी उपयोग करता है।

2।

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

3।

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