Create a slide-out menu

Sep 13, 2025
कैसे करना है

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

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

01. दस्तावेज़ दीक्षा

पहला कदम पृष्ठ दस्तावेज़ को परिभाषित करना है। इसमें वेबपृष्ठ का प्रतिनिधित्व करने वाला एक HTML कंटेनर होता है, जिसमें सिर और शरीर अनुभाग होता है। जबकि हेड सेक्शन का उपयोग बाहरी सीएसएस और जावास्क्रिप्ट संसाधनों को लोड करने के लिए किया जाता है, इसलिए बॉडी सेक्शन का उपयोग चरण # 2 में दिखाई देने वाली दृश्य पृष्ठ सामग्री को स्टोर करने के लिए किया जाता है। 

 & lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; स्लाइड आउट मेनू & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" मीडिया = "स्क्रीन" href = "styles.css" / & gt;
& lt; स्क्रिप्ट src = "code.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
*** चरण 2 यहाँ
& lt; / शरीर & gt;
& lt; / html & gt;

02. पृष्ठ सामग्री

पृष्ठ सामग्री में एक नेविगेशन कंटेनर के साथ एक शीर्षक शीर्षक होता है। यह नेविगेशन लिंक की एक श्रृंखला स्टोर करता है और इसे 'डेटा-एक्शन' विशेषता सौंपी गई है। यह विशेषता है जिसका उपयोग जावास्क्रिप्ट और सीएसएस द्वारा कंटेनर और उसके तत्वों को स्टाइल और कार्यक्षमता लागू करने के लिए किया जाएगा। 

 & lt; h1 & gt; स्लाइड आउट मेनू & lt; / h1 & gt;
& lt; NAV डेटा-एक्शन = "विस्तार" & gt;
  & lt; अवधि & gt; & amp; # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; पृष्ठ 1 & lt; / a & gt;
  & lt; a href = "#" & gt; पृष्ठ 2 & lt; / a & gt;
  & lt; a href = "#" & gt; पृष्ठ 3 & lt; / a & gt;
& lt; / nav & gt;

03. सीएसएस दीक्षा

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

 एचटीएमएल, बॉडी {
  प्रदर्शन क्षेत्र;
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  पृष्ठभूमि: # 000;
  रंग: #fff; }

04. नेविगेशन सेटअप

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

 नव {
  प्रदर्शन क्षेत्र;
  स्थिति: फिक्स्ड;
  बॉक्स आकार का आकार: सीमा-बॉक्स;
  शीर्ष: 0;
  बाएं: -100vw;
  जेड-इंडेक्स: 99 99;
  पैडिंग: .5em 1em .5em 1em ;;
  चौड़ाई: 100vw;
  ऊंचाई: 100 वीएच;
  पाठ-संरेखण: केंद्र;
  पृष्ठभूमि: लाल;
  संक्रमण: सभी 1s; }

05. एनएवी ओपन एंड आइकन

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

 Nav.Open {
  बाएं: 0;
}
NAV *: प्रथम-बच्चा {
  स्थिति: फिक्स्ड;
  पैडिंग: 1em;
  कर्सर: सूचक;
  बाएं: 0;
  शीर्ष: 50 वीएच;
  दोनों को साफ करो; }

06. नेविगेशन लिंक

नेविगेशन कंटेनर के अंदर प्रत्येक एंकर लिंक डिफ़ॉल्ट पाठ के आकार के चार गुना होने के लिए सेट है। उनका रंग काला पर सेट है, ऊर्ध्वाधर स्पेसिंग की गारंटी के लिए उनके शीर्ष पर लागू मार्जिन दिखाई देता है। 'ब्लॉक' के रूप में उनके प्रदर्शन को सेट करना प्रत्येक लिंक को स्वचालित रूप से लंबवत रूप से ढेर दिखाई देता है। 

 नव ए {
  प्रदर्शन क्षेत्र;
  फ़ॉन्ट आकार: 4em;
  रंग: # 000;
  फ़ॉन्ट-परिवार: एरियल;
  पाठ-सजावट: कोई नहीं;
  मार्जिन-टॉप: .2em;
}

07. जावास्क्रिप्ट श्रोता

'Code.js' नामक एक नई फ़ाइल बनाएं। यह चरण तब तक इंतजार कर रहा है जब तक कि पृष्ठ लोड न हो जाए, जिस पर यह 'डेटा-एक्शन' विशेषता के साथ 'डेटा-एक्शन' विशेषता के साथ सभी नेविगेशन के पहले बच्चे की खोज करता है। यह पहला बच्चा, ओपन आइकन होने के नाते, एक 'क्लिक' इवेंट श्रोता लागू होता है, जिस पर तत्व को 'ओपन' क्लास लागू नहीं किया जाता है या नहीं। 

 window.addeventlistener ("लोड", फ़ंक्शन () {
  var nodes = document.queryellecterall ('NAV [डेटा-एक्शन = "विस्तार"] *: प्रथम-बच्चा');
  के लिए (var i = 0; i & lt; nodes.length; i ++) {
  नोड्स [i].addeventlistener ("क्लिक", फ़ंक्शन () {
  यदि (this.parentnode.classname == "ओपन") यह .parentnode.classname = "";
  और यह। ParentNode.className = "ओपन";
  });
  }
});
***

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर के अंक 274 में प्रकाशित किया गया था। यहां अंक 274 खरीदें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख:

[9 2] [9 3] शीर्ष वेब नेविगेशन रुझान [9 6] [9 3] महान उपयोगकर्ता अनुभव के 10 नियम [9 6] [9 3] अपनी साइट पर दृश्य संकेत जोड़ें [9 6]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Figure drawing: A beginner's guide

कैसे करना है Sep 13, 2025

पेज 1 में से 3: एक आकृति कैसे आकर्षित करें:..

Cinema 4D tutorials: 13 of the best

कैसे करना है Sep 13, 2025

सिनेमा 4 डी ट्यूटोरियल: त्वरित लिंक मूल बातें आगे बढ़..

डिजिटल प्लेइन एयर पेंटिंग्स कैसे बनाएं

कैसे करना है Sep 13, 2025

महान कला बनाने के लिए बाहर निकलें [1 9] (छवि क्रेडि..

Style a site using Sass

कैसे करना है Sep 13, 2025

आप सीएसएस के साथ बहुत कुछ कर सकते हैं - शायद जितना �..

Cache in on the BBC's performance booster

कैसे करना है Sep 13, 2025

पिछले साल बीबीसी समाचार ऐप के लिए उपयोगकर्ता परी�..

Make realistic 3D hair and fur in 3ds Max and V-Ray

कैसे करना है Sep 13, 2025

याद मत करो वर्टेक्स 2018 , सीजी समुदा�..

How to create amazing effects with CSS Shapes

कैसे करना है Sep 13, 2025

फ्रंटेंड डेवलपर्स आयताकार में सोचते हैं; आयताका�..

Create a furry 3D character from scratch

कैसे करना है Sep 13, 2025

एक फर चरित्र बनाना आसान हो सकता है, लेकिन यदि आप प्..

श्रेणियाँ