बिट्रिक्स फिक्स बैनर साइडबार परिवर्तन php. दो-स्तंभ लेआउट (निश्चित साइडबार और द्रव सामग्री)। दाहिनी ओर एक साइडबार बनाना. एचटीएमएल और सीएसएस

HTML+CSS+JS में निश्चित फ़्लोटिंग साइडबार का सबसे सरल उदाहरण।

इसकी ख़ासियत क्या है - स्क्रॉल करते समय साइडबार विंडो के शीर्ष पर चिपक जाता है, लेकिन साथ ही जब साइडबार को फ़ुटर पर स्क्रॉल किया जाता है, तो यह स्क्रीन के शीर्ष से अनस्टक हो जाता है और अपना निचला भाग विंडो के ऊपर चिपक जाता है फ़ुटर, जिससे फ़ुटर ओवरलैप न हो (फ़ुटर ऊंचा होना चाहिए)। क्या आपको पता है मेरा क्या मतलब है।

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

jQuery कनेक्ट करना न भूलें

$(फ़ंक्शन() ( var $window = $(window); var $sidebar = $("।sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $("।footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop - $स्क्रॉलटॉप - $साइडबारहाइट); ) $साइडबार.सीएसएस('टॉप', $टॉपपोजीशन); )); ));

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

यह लेख दिखाएगा विभिन्न तरीकेमैन्युअल रूप से और विशेष वेबसाइट बिल्डरों का उपयोग करके, नेविगेशन पैनल बनाना। हमारा उदाहरण वर्डप्रेस का उपयोग करता है।

अब हम विकास का पारंपरिक तरीका दिखाएंगे, अर्थात् कोड लिखना पाठ संपादक. ऐसा करने के लिए आपको HTML और खोलना होगा सीएसएस दस्तावेज़एक कोड संपादक में.

अक्सर, नेविगेशन बार या तो साइट के हेडर में या उसके दाईं ओर स्थित होता है। दूसरे मामले में, आमतौर पर 2-कॉलम लेआउट का उपयोग किया जाता है।

यदि आपके पास पहले से तैयार लेआउट है तो यह अच्छा है, क्योंकि आप नेविगेशन ब्लॉक की चौड़ाई जानते हैं। यदि कोई लेआउट नहीं है, तो इससे विकास में बाधा नहीं आएगी।

ध्यान! साइडबार और अन्य वेबसाइट तत्व बनाते समय, पहले से तैयार लेआउट तैयार करें। इस पर ध्यान केंद्रित करके आप विकास प्रक्रिया को सरल बनायेंगे।

नेविगेशन बार सूचियों और नियमित ब्लॉक का उपयोग करके बनाया जा सकता है। यदि आप सूचियों का उपयोग करते हैं, तो उनके लिए "टेक्स्ट-सजावट" संपत्ति को अक्षम करें।

हमारा उदाहरण डिव ब्लॉक डिज़ाइन का उपयोग करता है।

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

मुख्य ब्लॉक का उपयोग स्थिति के साथ-साथ आकार बनाने के लिए भी किया जाएगा।

सबसे पहले, आइए स्थिति निर्धारण पर निर्णय लें। सामान्य कंटेनर के लिए, हम सापेक्ष स्थिति - संपत्ति (स्थिति: सापेक्ष) निर्धारित करते हैं। गुण (स्थिति: निरपेक्ष) स्तंभों के लिए सेट है।

इस प्रकार का उपयोग करने से आपके लिए स्पीकर को ब्लॉक के अंदर रखना आसान हो जाएगा। ऐसा करने के लिए, हम आंदोलन गुणों का उपयोग करेंगे: , , और।

हमारे उदाहरण में, कोड इस तरह दिखता है:

एचटीएमएल

परीक्षण पृष्ठ

स्तम्भ 1

स्तम्भ 2

प्रतिलिपि

सीएसएस

लेआउट (

स्थिति: सापेक्ष;

पृष्ठभूमि: आरजीबीए(119, 115, 115, 0.58);

साइडबार, .सामग्री (स्थिति: निरपेक्ष;)

साइडबार (

पृष्ठभूमि: #C6DD7D;

सामग्री (

पृष्ठभूमि: #F4ECCE;

प्रतिलिपि

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

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

भी प्रयोग किया जा सकता है फ्लोट संपत्ति, उसके लिए। यह विधि बहुत सरल है, क्योंकि यह तत्वों के चारों ओर प्रवाहित करने पर आधारित है। इसके लिए धन्यवाद, हमारा साइडबैट दाईं ओर स्थित होगा।

ऐसा पैनल बनाने के लिए, आप पहले उदाहरण के समान मार्कअप का उपयोग कर सकते हैं। आपको CSS कोड में कोई विशेष परिवर्तन करने की भी आवश्यकता नहीं है।

आपको अपने सीएसएस कोड में कुछ मामूली समायोजन करने की आवश्यकता है। यह आवश्यक है ताकि मेनू दाईं ओर स्थित हो। हम चौड़ाई और स्थिति निर्धारण गुणों को नहीं बदलते हैं!

आइए अब एक ऐसी विधि पर नजर डालें जो पिछले वाले से बहुत अलग है। अंतर यह है कि आप वस्तुतः बिना किसी CSS या HTML कोड के बेहतर नेविगेशन बना सकते हैं।

आपको सभी कोड मैन्युअल रूप से लिखने की आवश्यकता नहीं होगी; सारा काम कंस्ट्रक्टर में ही होगा।

वर्डप्रेस का उपयोग करते समय, आपको एक नेविगेशन बार पंजीकृत करना होगा और उसमें कुछ विजेट जोड़ना होगा।

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

हमारे उदाहरण में, हम दाएँ साइडबार, साथ ही फ़ुटर साइडबार पर भी विचार करते हैं।

एक और विशेष ढांचा है जो आपको यह साइडबार बनाने की अनुमति देगा। इसका मुख्य लाभ यह है कि यह आपको ऐसा करने की अनुमति देता है अच्छा पैनलकोड की केवल कुछ पंक्तियाँ लिखकर।

सबसे पहले आपको इस फ्रेमवर्क को डाउनलोड करना होगा। उसके बाद, अपने HTML दस्तावेज़ में इसकी शैलियों और स्क्रिप्ट के लिंक प्रदान करें।

इसके बाद आप अपना साइडबार बनाना शुरू कर सकते हैं। इसे फ्रेमवर्क में रखने के लिए एक विशेष कार्य है - दृश्य। जो तत्वों का स्थान निर्धारित करेगा।

इस ढांचे का नकारात्मक पक्ष इसकी सीमाएँ हैं। इसका उपयोग करते समय, आप वास्तव में एक अनूठी रचना नहीं बना पाएंगे, क्योंकि पैनल आपकी कल्पना से नहीं, बल्कि केवल कुछ कार्यों द्वारा सीमित है।

इस लेख में, हमने नेविगेशन बार बनाने के कुछ बुनियादी तरीकों पर गौर किया, लेकिन और भी कई तरीके हैं। आप हमारे काम के आधार पर अपनी खुद की पद्धति भी बना सकते हैं।

इन उदाहरणों में एक सरल नेविगेशन बार दिखाया गया है। अगर आप साथ में थोड़ा काम करते हैं सोर्स कोड, तो आप एक वास्तविक कृति प्राप्त कर सकते हैं।

लेआउट के लिए क्या आवश्यकताएँ हैं:

• रबर दो-स्तंभ लेआउट
• साइडबार की निश्चित चौड़ाई 300px
• सामग्री पूरी शेष चौड़ाई तक फैली हुई है।
• फ़ुटर को नीचे की ओर दबाया गया (इस पाठ में मैं यह नहीं दिखाऊंगा कि यह कैसे किया जाता है)।

यदि आप ब्लॉकों को फ़्लोट करते हैं, तो आपको उन्हें एक निश्चित चौड़ाई देनी होगी (आप 1 साइडबार को 300px और सामग्री को 100% पर सेट नहीं कर सकते हैं)। इस स्थिति में, या तो सामग्री नीचे की ओर खिसक जाएगी या बाईं ओर 300px की एक क्षैतिज स्क्रॉल दिखाई देगी। खैर, मुख्य बात यह समझना है कि यह तरीका हमारे लिए उपयुक्त नहीं है।

कई लेआउट डिज़ाइनर इस पद्धति की पेशकश करते हैं, वे किस बारे में सोच रहे हैं?! विधि का सार यह है कि आप साइडबार को 300 की चौड़ाई के साथ फ़्लोट करने के लिए सेट कर सकते हैं, लेकिन सामग्री को फ़्लोट नहीं किया जाना चाहिए और इसे मार्जिन-लेफ्ट:300px दें। उत्तम विधिऔर ऐसा लगता है कि सब कुछ बहुत अच्छे से चल रहा है। ईमानदारी से कहूं तो मुझे लगा कि यह सबसे अच्छा तरीका है, लेकिन इस तरीके के अपने नुकसान हैं। इस विधि को छोड़ने का कारण यह है कि यदि अचानक हम जो सामग्री डाल रहे हैं, उदाहरण के लिए, फ्लोटेड ली या किसी अन्य फ्लोट ब्लॉक वाला एक मेनू और फिर हम उन्हें स्पष्ट: दोनों का उपयोग करके साफ़ करना चाहते हैं, तो इस ब्लॉक की निचली सीमा साइडबार की निचली सीमा के स्तर तक नीचे स्लाइड करता है (जो कि फ़ोट साफ़ होने के बाद से यह अजीब नहीं है, यदि फ़्लोट किए गए ब्लॉक को एक निश्चित ऊंचाई दी गई है तो इससे बचा जा सकता है, लेकिन यह निश्चित सेटिंग के मामले में बिल्कुल नहीं है ऊंचाई)।

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

लेकिन मेरे लिए यह कोई बहुत अच्छा तरीका भी नहीं है!

"यह एक बेहतरीन तरीका है, अगर इसमें कोई कमी हो तो कृपया कमेंट करें। लेकिन मुझे लगता है कि यह सबसे अच्छा तरीका है।"

• इस पद्धति के लाभ: सबसे पहले, DOMe सामग्री साइडबार से पहले जाएगी, जो खोज इंजन के लिए अच्छा है।
• पाद लेख पर कुछ भी फिट नहीं बैठता
• किसी भी अवरोध को साफ़ किया जा सकता है और निचली सीमा पर कुछ भी नहीं खिसकेगा (इस तरह हमने दूसरी विधि की समस्याओं पर काबू पाया)।

सामान्य तौर पर, यह कैसे काम करता है: कोड को देखें, सामग्री पहले आती है, उसके बाद साइडबार। इन दो ब्लॉकों पर एक फ़्लोट सेट करें (स्वाभाविक रूप से साइडबार नीचे की ओर खिसकता है)। उसके बाद हम साइडबार प्रॉपर्टी मार्जिन-लेफ्ट: -100% सेट करते हैं। बढ़िया, यह वापस अपनी जगह पर आ गया है और हम सामग्री को मार्जिन-लेर्फ़्ट:300px से इंडेंट करते हैं।

नमस्कार, ब्लॉग साइट के प्रिय पाठकों। यह मेरे लिए एक नोट के समान है, ताकि यह न भूलें कि जब मैं सब कुछ वापस लौटाना चाहता था तो मैंने वास्तव में क्या किया था। यह सब तब शुरू हुआ जब पाठकों में से एक ने वर्डप्रेस के लिए Q2W3 फिक्स्ड विजेट (स्टिकी विजेट) नामक एक प्लगइन के बारे में लिखने का सुझाव दिया, जो साइडबार में किसी भी विजेट को फ्लोटिंग या दूसरे शब्दों में, फिक्स्ड बना सकता है।

वे। जैसे ही आप पृष्ठ को स्क्रॉल करेंगे, आप देखेंगे कि साइडबार का मुख्य भाग ऊपर चला जाएगा, लेकिन सबसे नीचे स्थित विजेट दृश्य क्षेत्र में ही रहेगा, चाहे आप टेक्स्ट को कितनी भी नीचे ले जाएँ। मैं तुरंत एक आरक्षण कर दूंगा कि इस तरह से प्रासंगिक विज्ञापन देना निषिद्ध है और आपको इसके लिए दंडित किया जा सकता है (जैसा कि टिप्पणियों में पता चला, YAN इसकी अनुमति देता है, लेकिन ऐडसेंस ऐसा करने से रोकता है)।

प्लगइन अद्भुत है, लेकिन मेरी थीम में विजेट अक्षम हैं, इसलिए मैंने इंटरनेट पर मिले जावास्क्रिप्ट कोड की कुछ पंक्तियों का उपयोग करके इस समस्या को हल किया।

परिणामस्वरूप, मेरा शीर्ष मेनू व्यूपोर्ट के शीर्ष पर तय हो गया है (मूल रूप से, केवल सीएसएस कोड इसके लिए पर्याप्त था, लेकिन हम आसान तरीकों की तलाश नहीं कर रहे हैं), और साइडबार का निचला हिस्सा शीर्ष दाईं ओर तय किया गया है पृष्ठ को स्क्रॉल करते समय जब आप स्क्रीन पर पहुंचते हैं। मुझे नहीं पता कि इसका कोई फायदा होगा या नहीं, लेकिन समाधान वास्तव में सरल है।

आप पूछते हैं, शीर्ष मेनू को ठीक क्यों करें? खैर, सामान्य तौर पर, सुधार के विषय पर यह एक छोटा सा प्रयोग है। विशुद्ध रूप से काल्पनिक रूप से, हम यह मान सकते हैं कि इससे साइट पर देखे गए पृष्ठों की संख्या और उपयोगकर्ता द्वारा बिताए गए समय में वृद्धि हो सकती है।

दूसरी ओर, ऐसे निश्चित पैनल की अत्यधिक घुसपैठ पाठकों की ओर से नकारात्मक प्रतिक्रिया का कारण बन सकती है, इसलिए इस कार्रवाई की उपयोगिता का प्रश्न खुला रहता है। आपको एक सप्ताह के उपयोग के बाद परिणाम देखना होगा - यदि मेनू अब ठीक नहीं है (दर्शन क्षेत्र के शीर्ष किनारे पर कील लगा हुआ है), तो प्रयोग विफल हो गया। बस मामले में, मैं इसका स्क्रीनशॉट लूंगा कि यह सब कैसे हुआ।

वर्डप्रेस में फ्लोटिंग साइडबार थोड़े अलग कारण से बनाया जाता है - किसी चीज़ पर अधिक ध्यान आकर्षित करने के लिए। सिद्धांत रूप में, यहां आप श्रेणियों की सूची और लोकप्रिय या हालिया पोस्ट की सूची दोनों सम्मिलित कर सकते हैं, जो फिर से व्यवहारिक सुधार के कार्य को पूरा करने का प्रयास करेंगे। लेकिन अक्सर, विज्ञापन को ऐसे फ़्लोटिंग ब्लॉक में रखा जाता है (प्रासंगिक विज्ञापन की अनुमति नहीं है, जैसा कि मैंने पहले ही उल्लेख किया है), जिससे, विशुद्ध रूप से काल्पनिक रूप से, वेबमास्टर की आय में वृद्धि होनी चाहिए। आइए एक सप्ताह में परिणाम देखें।

मुझे इंटरनेट पर अपने लिए एक समाधान मिला। इस पद्धति का उपयोग करने के लिए, jQuery लाइब्रेरी को शामिल किया जाना चाहिए। यह कैसे करें, सामग्री लोड करने के बारे में लेख में विस्तार से बताया गया है।

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

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

मेरे मामले में, शीर्ष मेनू को ठीक करने का कोड इस तरह दिखता है:

$(फ़ंक्शन())( $(विंडो).स्क्रॉल(फ़ंक्शन() ( var शीर्ष = $(दस्तावेज़).स्क्रॉलटॉप(); यदि (शीर्ष)< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

मैं आपको याद दिला दूं कि आप कोड के इस टुकड़े को इसमें पेस्ट कर सकते हैं:

अब आइए सीधे इस कोड को देखें। यह पता चलता है कि शीर्ष से 10 पिक्सेल के बाद, सापेक्ष स्थिति को एक निश्चित स्थिति से बदल दिया जाता है (ऊपर दिए गए लिंक पर लेख देखें)। यदि आवश्यक हो, तो अन्यथा के अनुरूप आप शीर्ष के मान के रूप में गैर-शून्य का चयन कर सकते हैं, और फिर शीर्ष पर तय किया गया मेनू इस पिक्सेल मान से व्यूपोर्ट के शीर्ष किनारे से हट जाएगा (मेरी राय में, यह अनावश्यक है) .

मूल कोड के विपरीत, मुझे चौड़ाई भी जोड़नी पड़ी: "100%", क्योंकि अन्यथा मेनू का आकार चौड़ाई में कम हो जाता, जिससे पूरी तस्वीर खराब हो जाती।

देखिए, स्पष्टता के लिए, मैं एचटीएमएल कोड प्रदान करूंगा जिसके साथ मेरे टेम्पलेट में शीर्ष मेनू बनता है वर्डप्रेस ब्लॉग(यह मेरे हेडर.php फ़ाइल में रहता है):

• नया
• सर्वश्रेष्ठ
• पैसा कहाँ कमाना है
• विज्ञापन देना
• साइट मानचित्र
• संपर्क
• शीर्ष

आपके टेम्प्लेट में, सबसे अधिक संभावना है, मेनू आइटम का प्रदर्शन उदाहरण के लिए, ऐसे निर्माण (फ़ंक्शन) का उपयोग करके निर्दिष्ट किया जाएगा, लेकिन यह महत्वपूर्ण नहीं है।

• कृपया ध्यान दें कि यदि इको "" में संलग्न कोड में सिंगल कोट्स हैं, तो उन्हें एस्केप करना होगा, यानी। बेशक, उनमें से प्रत्येक के सामने कोष्ठक के बिना एक बैकस्लैश (\") लगाएं।

  सामान्य तौर पर, जैसा हुआ वैसा ही हुआ। आपको स्वयं निर्णय लेना होगा कि इसे विशेष रूप से अपने विषय से कैसे जोड़ा जाए - जब आपके पास समय हो, तो "अपने दिमाग पर जोर देना" और भी मजेदार है। धन्यवाद।

  आप सौभाग्यशाली हों! जल्द ही ब्लॉग साइट के पन्नों पर मिलते हैं

  आपकी रुचि हो सकती है

  वेबप्वाइंट प्रो व्यापक कार्यक्षमता और सक्षम तकनीकी खोज इंजन अनुकूलन के साथ एक उत्तरदायी वर्डप्रेस थीम है
  Share42 - साइट पर सोशल नेटवर्किंग बटन और बुकमार्क जोड़ने के लिए एक स्क्रिप्ट (एक फ्लोटिंग पैनल विकल्प है)