कैसे सीएसएस के साथ एक जैव ड्रॉपडाउन बॉक्स बनाने के लिए

इसके बाद मैंने रिहा कर दिया सबसे हाल का थीम लैब नया स्वरूप, मेरे पास मेरे नेविगेशन बार में “बायो ड्रॉपडाउन” बॉक्स पर कई टिप्पणियां थीं। मैंने इसे सीएसएस की कुछ पंक्तियों के साथ एक पृष्ठभूमि छवि के साथ कोडित किया.


इस सीएसएस टिप पोस्ट में, मैं इस पर जाऊंगा कि कैसे आप अपनी खुद की साइटों पर एक समान होवर प्रभाव डाल सकते हैं.

उदाहरण

इस उदाहरण में, मैं किसी पाठ विजेट का उपयोग नहीं करूंगा बिस ग्यारह थीम, वर्डप्रेस 3.2 के रूप में नया डिफ़ॉल्ट.

मूल रूप से, एक बार जब आप उस div पर होवर करते हैं जिसमें विजेट होता है, तो एक “हिडन” div दिखाई देगा जो हमारा बायो ड्रॉपडाउन बॉक्स होगा.

बाईं ओर के चित्र में ध्यान दें, ग्रे बायो बॉक्स तब तक दिखाई नहीं देगा जब तक कि आप “बायो होवर” हेडिंग वाले div को हॉवर न करें.

चयनकर्ता

यह महत्वपूर्ण नहीं है कि आप अपने बायो ड्रापडाउन बॉक्स को जिस डीवा में डालना चाहते हैं, उसे स्टाइल करने के लिए एक अनोखा सीएसएस सेलेक्टर होना चाहिए। मूल रूप से ऐसा इसलिए है क्योंकि अगर आपके पास उस डिव में साथ में मार्कअप नहीं है, तो आगे होने की स्थिति में कुछ भी दिखाई नहीं देगा। एक मंडराना राज्य.

यद्यपि ट्वेंटी इलेवन के मामले में, हम “अलग” वर्ग की स्टाइल के साथ दूर हो सकते हैं, संभावना है कि आप केवल अपने किसी भी विभाग में बायो ड्रॉपडाउन बॉक्स चाहते हैं, इसलिए हम अधिक विशिष्ट होंगे.

सौभाग्य से वर्डप्रेस के साथ, यह आपके द्वारा उपयोग किए जा सकने वाले अद्वितीय सीएसएस चयनकर्ताओं के एक टन को बाहर करता है। इस उदाहरण में, यह # परीक्षण -3 का उपयोग करता है, जिसका उपयोग हम अभी से करेंगे.

ध्यान दें: यह आपके वर्डप्रेस इंस्टॉलेशन के आधार पर भिन्न हो सकता है। चयनकर्ता को आसानी से खोजने के लिए Chrome डेवलपर टूल जैसी किसी चीज़ का उपयोग करें.

HTML मार्कअप

इस उदाहरण में, HTML मार्कअप को सीधे वर्डप्रेस टेक्स्ट विजेट में रखा जा सकता है। यह आप में डाल दिया है:

लेलैंड!

हैलो। मैं लेलैंड फिएगेल हूं और मैं थीम लैब का निर्माता और संस्थापक हूं। मुझे कोड लिखना पसंद है, विशेष रूप से HTML, CSS और वर्डप्रेस के लिए.

जब तक आप मेरी पहचान नहीं चुराना चाहते, तब तक आप शायद तस्वीर को खुद की तस्वीर के साथ बदलना चाहते हैं। आप इसे वैकल्पिक रूप से हटा भी सकते हैं.

चूंकि हम एक वर्डप्रेस विजेट का उपयोग कर रहे हैं, इसलिए हमारे लिए पहले से ही मौजूद मार्कअप तैयार है। यह वह है जो कुल में है.

बायो होवर

लेलैंड!

हैलो। मैं लेलैंड फिएगेल हूं और मैं थीम लैब का निर्माता और संस्थापक हूं। मुझे कोड लिखना पसंद है, विशेष रूप से HTML, CSS और वर्डप्रेस के लिए.

यदि आप कच्चे HTML साइट पर ऐसा कर रहे हैं, तो आपको बायो ड्रापडाउन के लिए इसमें किसी और चीज के साथ किसी प्रकार के आवरण (जैसे एक तरफ) की आवश्यकता होगी, अन्यथा नीचे गिराने के लिए हॉवर करने के लिए कुछ भी नहीं है।.

वास्तविक जीवन का उदाहरण: मेरा जैव ड्रॉपडाउन डिव मेरे नेविगेशन मेनू में ली टैग के अंदर है.

सीएसएस की पहली दो लाइनें

पहले दो पंक्तियों ने वास्तव में इसे स्थापित किया था, इसलिए मैंने इसे अपने स्वयं के खंड में रखा.

# पाठ -3 {स्थिति: रिश्तेदार; }
.जैव-ड्रॉपडाउन {प्रदर्शन: कोई नहीं; }

व्याख्या

  • पहली पंक्ति: हम सापेक्ष स्थिति के लिए जैव ड्रॉपडाउन के आवरण को सेट करते हैं। इससे बायो ड्रापडाउन बॉक्स को मूल रैपर के बिल्कुल करीब लाने में आसानी होती है.
  • दूसरी पंक्ति: यह अनिवार्य रूप से डिफ़ॉल्ट रूप से जैव ड्रॉपडाउन बॉक्स को अदृश्य बनाता है। जब आप किसी चीज़ पर मँडराते हैं, तो उसे केवल दिखाना चाहिए, याद रखें?

ध्यान दें: यदि आप प्रदर्शन के प्रशंसक नहीं हैं: कोई नहीं; या ऐसा लगता है कि यह आपके एसईओ या कुछ को नुकसान पहुंचाता है, आप स्थिति की रेखाओं के साथ भी कुछ का उपयोग कर सकते हैं: निरपेक्ष; बायां: -100000em; जो मूल रूप से इसे पृष्ठ से दूर ले जाएगा, कोई भी इसे कभी भी नहीं देखेगा.

बाकी सीएसएस

निम्नलिखित सीएसएस कोड बायो ड्रॉपडाउन बॉक्स के लुक और फील को हैंडल करता है.

# पाठ -3: होवर .bio-dropdown {
प्रदर्शन क्षेत्र; z-index: 99;
स्थिति: निरपेक्ष; शीर्ष: 25 पीएक्स;
पृष्ठभूमि: #ccc; गद्दी: 10px 10px 0 10px;
फ़ॉन्ट-आकार: 11px; लाइन-ऊँचाई: 18 पीएक्स; रंग: # 666;
}

व्याख्या

यह वह जगह है जहाँ हम अंत में # पाठ -3 चयनकर्ता के साथ प्रयोग करते हैं: होवर स्यूडोसाल्स बनाने के लिए बायो ड्रॉपडाउन बॉक्स केवल तभी दिखाते हैं जब आप पाठ विजेट पर मंडराते हैं.

  • पहली पंक्ति: प्रदर्शन: ब्लॉक; जैव ड्रॉपडाउन बॉक्स को दृश्यमान बनाता है। जेड-इंडेक्स: 99; यह सुनिश्चित करता है कि बॉक्स को बिना किसी और चीज़ के प्रदर्शित किया जाएगा.
  • दूसरी पंक्ति: यह लगभग 25 पिक्सेल के नीचे स्थित बॉक्स को रखता है.
  • तीसरी पंक्ति: ये सिर्फ कुछ कॉस्मेटिक स्टाइल हैं, पृष्ठभूमि को सभ्य पैडिंग के साथ हल्के भूरे रंग में सेट करना.
  • चौथी पंक्ति: यह सभी स्व-व्याख्यात्मक टाइपोग्राफी है.

ध्यान दें: पहली पंक्ति के बारे में, यदि आप स्थिति का उपयोग कर रहे हैं: निरपेक्ष; बायां: -100000em; प्रदर्शन के बजाय तकनीक: कोई नहीं; जैसे मैंने ऊपर बताया, डिस्प्ले का उपयोग कर: यहाँ ब्लॉक आवश्यक नहीं होगा (क्योंकि डिव को पहले से ही ब्लॉक स्तर के तत्व माना जाता है)। इसके बजाय आपको बाएं का उपयोग करना होगा: 0; पृष्ठ पर वापस जाने के लिए.

और छवि के लिए, बस एक साधारण फ्लोट और सही मार्जिन.

.जैव-ड्रॉपडाउन .photo {फ्लोट: बाएं; मार्जिन-राइट: 10px; }

वर्डप्रेस एकीकरण

मैं किसी चीज़ को छांटने के बिना डायनामिक वर्डप्रेस मेनू (wp_nav_menu) में इसे एकीकृत करने के लिए एक अच्छा तरीका नहीं सोच सकता। सबसे आसान तरीका हो सकता है हार्ड अपने नेविगेशन कोड और इसे खत्म हो (जो मैं अपनी सभी साइटों पर करता हूं).

यदि आपके पास वर्डप्रेस मेनू आइटम में मार्कअप सम्मिलित करने की कोई तकनीक है, जो इसके लिए आवश्यक है, तो मुझे टिप्पणियों में इसके बारे में सुनना पसंद नहीं है। मुझे यकीन है कि यह संभव है लेकिन यह सीएसएस टिप पोस्ट के दायरे से परे है.

निष्कर्ष

हां, मुझे लगता है कि आप शायद अपने साइडबार में बायो ड्रॉपडाउन नहीं करना चाहते हैं, आप इसे सीमित स्थान के साथ एक जगह पर रखते हैं, जिसके लिए पूरी तरह से प्रदर्शित होने के लिए जगह नहीं है (जैसे कि एक तंग नेविगेशन बार).

सौभाग्य से, आप इस टेकनीक का उपयोग कहीं भी कर सकते हैं। मैं बस एक मूल तकनीक पर जाना चाहता था कि कैसे होवर पर एक संपूर्ण डिव को प्रदर्शित किया जाए.

यह बहुत जटिल नहीं है और आपको इसे करने के लिए किसी भी फैंसी जावास्क्रिप्ट सामान की आवश्यकता नहीं है, हालांकि यदि आप कुछ उच्च तकनीक लुप्त होती प्रभाव चाहते हैं, तो शायद आपको कुछ जावास्क्रिप्ट का उपयोग करना होगा.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map