उत्तरदायी क्षैतिज पृष्ठ स्लाइडिंग

समस्या

एक उत्तरदायी क्षैतिज नेविगेशन प्रणाली को डिज़ाइन करना कई चुनौतियाँ प्रस्तुत करता है:

• पृष्ठ का रखरखाव व्यूपोर्ट के भीतर दृश्यता
• पृष्ठों के बीच अंतराल या ओवरलैप को रोकना
• स्क्रॉलबार दृश्यता के साथ 100% ऊंचाई से अधिक विस्तार वाले पृष्ठों की अनुमति देना
• इंटरनेट एक्सप्लोरर 9 या उससे ऊपर के साथ संगतता सुनिश्चित करना

समाधान

यह समाधान jQuery को नियोजित करता है और इसमें निम्नलिखित प्रमुख विशेषताएं शामिल हैं:

1. उत्तरदायी आकार: स्क्रिप्ट कुल चौड़ाई की गणना करती है पृष्ठों की संख्या के आधार पर रैपर का, प्रतिक्रियाशील स्केलिंग सुनिश्चित करना। &&&]
गतिशील ऊंचाई प्रबंधन:
2. पृष्ठ 100% ऊंचाई से आगे बढ़ सकते हैं, और आवश्यक होने पर एक स्क्रॉलबार दिखाई देता है, जो अवांछित अंतराल को समाप्त करता है।
सक्रिय लिंक संकेत:
3. चयनित नेविगेशन वर्तमान पृष्ठ स्थिति को इंगित करने के लिए लिंक को हाइलाइट किया गया है। $(document).ready(function() { var स्लाइडनम = $('.पेज').लंबाई, रैपरविड्थ = 100 * स्लाइडनम, स्लाइडविड्थ = 100 / स्लाइडनम; $('.wrapper').width(wrapperWidth '%'); $('.page').width(slideWidth '%'); $('a.scrollitem').क्लिक करें(फ़ंक्शन() { $('a.scrollitem').removeClass('selected'); $(यह).addClass('चयनित'); var स्लाइडनंबर = $($(यह).attr('href')).index('.page'), मार्जिन = स्लाइडनंबर * -100 '%'; $('.रैपर').चेतन({ मार्जिनलेफ्ट: मार्जिन }, 1000); विवरण झूठा है; }); });
4. सीएसएस
html, शरीर { ऊंचाई: 100%; मार्जिन: 0; अतिप्रवाह-एक्स: छिपा हुआ; स्थिति: सापेक्ष; } नौसेना { स्थिति: निरपेक्ष; शीर्ष: 0; बाएँ: 0; ऊंचाई: 30px; } .रैपर { ऊंचाई: 100%; पृष्ठभूमि: #263729; } .पेज { नाव छोड़ी; पृष्ठभूमि: #992213; न्यूनतम-ऊंचाई: 100%; पैडिंग-टॉप: 30px; } #पेज-1 { पृष्ठभूमि: #0C717A; } #पेज 2 { पृष्ठभूमि: #009900; } #पेज 3 { पृष्ठभूमि: #0000FF; } ए { रंग: #एफएफएफ; } ए.चयनित { रंग: लाल; } .अनुरूपण { ऊंचाई: 2000px; }
5. निष्कर्ष
यह कोड स्निपेट उत्तरदायी क्षैतिज पृष्ठ नेविगेशन के लिए एक व्यापक समाधान प्रदान करता है, जो बताई गई आवश्यकताओं को कुशलतापूर्वक संबोधित करता है। इसका लचीलापन गतिशील नेविगेशन मेनू और स्क्रॉलबार के साथ लंबे पृष्ठों को समायोजित करने की अनुमति देता है। इसके अलावा, इंटरनेट एक्सप्लोरर 9 के साथ इसकी अनुकूलता ब्राउज़रों की एक विस्तृत श्रृंखला के साथ अनुकूलता सुनिश्चित करती है।