कैसे बनाएं: बायलेट नेविगेशन

एक एनिमेशन के साथ बाहरी नेविगेशन बनाएं

पहला कदम - एचटीएमएल जोड़ें:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">बारे में</a>
  <a href="#">सेवाएँ</a>
  <a href="#">ग्राहक</a>
  <a href="#">संपर्क</a>
</div>
/* बाहरी नेविगेशन खोलने के लिए किसी भी एलीमेंट का इस्तेमाल करें */
<span onclick="openNav()">खोलें</span>
/* यदि आप चाहते हैं कि बाहरी नेविगेशन वेबपेज की सामग्री को दाएँ तरफ खींचे, तो सभी पृष्ठ सामग्री को इस div के अंदर रखें (यदि आप केवल बाहरी नेविगेशन को वेबपेज के शीर्ष पर रहना चाहते हैं, तो इस सेटिंग का इस्तेमाल ना करें) */
<div id="main">
  ...
</div>

दूसरा कदम - सीएसएस जोड़ें:

/* बाहरी नेविगेशन मेन्यू */
.sidenav {
  ऊंचाई: 100%; /* 100% पूर्ण ऊंचाई */
  विद्धि: 0; /* 0 चौड़ाई - जेसक्रिप्ट के द्वारा इस सेटिंग को बदला जाता है */
  पोजीशन: फिक्सेड; /* स्थान पर रहे रहें */
  जीआईजी-इंडेक्स: 1; /* शीर्ष पर रहे रहें */
  टॉप: 0; /* शीर्ष पर रहे रहें */
  left: 0;
  बैकग्राउंड-कलर: #111; /* काला रंग */
  ओवरफ्लोअक्स: हिडन; /* होरिज़ोन्टल स्क्रोल को निष्क्रिय करना */
  पैडिंग-टॉप: 60पिक्सल; /* शीर्ष 60पिक्सल की दूरी पर सामग्री को रखा जाता है */
  ट्रांजिशन: 0.5सेकंड; /* 0.5सेकंड का ट्रांजिशन प्रभाव, बाहरी नेविगेशन के लिए स्लाइड शो इस्तेमाल किया जाता है */
}
/* नेविगेशन मेन्यू लिंक्स दी नेविगेशन मेन्यू लिंक्स */
.sidenav a {
  पैडिंग: 8पिक्सल 8पिक्सल 8पिक्सल 32पिक्सल;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* जब आप नाविगेशन लिंक पर संकेतक लगाते हैं, तो इसका रंग बदलें */
.sidenav a:hover {
  color: #f1f1f1;
}
/* बंद बटन का स्थान और शैली (ऊपरी दायाँ कोने) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* पृष्ठ सामग्री के शैली को सेट करें - अगर आप नाविगेशन साइडबार खोलने के दौरान पृष्ठ सामग्री को दायाँ ओर खींचना चाहते हैं, तो इस सेटिंग का उपयोग करें. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 450px से कम ऊंचाई वाले छोटे स्क्रीन पर, नाविगेशन साइडबार के शैली को बदलें (आंतरिक गलियारा और फ़ॉन्ट आकार कम करें) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

तीसरा कदम - JavaScript जोड़ें:

नीचे के उदाहरण में, नाविगेशन साइडबार को घुसाएगा, और इसकी चौड़ाई 250px कर दी जाएगी:

नाविगेशन साइडबार छतरी उदाहरण

/* नाविगेशन साइडबार की चौड़ाई 250px करना */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* नाविगेशन साइडबार की चौड़ाई 0 करना */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

स्वयं प्रयोग करें

नीचे के उदाहरण में, नाविगेशन साइडबार को घुसाएगा, और पृष्ठ की सामग्री को दायाँ ओर खींचेगा (नाविगेशन साइडबार की चौड़ाई के लिए निर्धारित मान को "पृष्ठ सामग्री" की सामान्य पिछली छेद के लिए भी इस्तेमाल किया जाता है):

नाविगेशन साइडबार सामग्री को बढ़ाता है

/* नाविगेशन साइडबार की चौड़ाई 250px करना, पृष्ठ की सामान्य पिछली छेद 250px करना */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* नाविगेशन साइडबार की चौड़ाई 0 करना */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

स्वयं प्रयोग करें

नीचे का उदाहरण भी नाविगेशन साइडबार को घुसाएगा, और पृष्ठ की सामग्री को दायाँ ओर खींचेगा. हालांकि, इस बार, हमने body एलीमेंट को 40% अविक्षयता वाला काला पृष्ठभूमि रंग जोड़ा है, ताकि नाविगेशन साइडबार को "उभारा" जा सके.

अविक्षयता वाला नाविगेशन साइडबार सामग्री को बढ़ाता है

/* नाविगेशन साइडबार की चौड़ाई 250px करना, पृष्ठ की सामान्य पिछली छेद 250px करना, और body को काला पृष्ठभूमि रंग जोड़ना */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* आड़ी नेविगेशन चौड़ाई 0 रखना, पृष्ठ सामग्री के बाईं बाहरी अक्ष 0, body का पीछे का रंग श्वेत */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

स्वयं प्रयोग करें

नीचे दिए उदाहरण में आड़ी नेविगेशन बाईं ओर से स्लाइड इन करेगी और पूरे पृष्ठ को ओवरले करेगी (चौड़ाई 100%):

पूर्ण चौड़ाई वाली आड़ी नेविगेशन:

/* नेविगेशन खोलना */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* नेविगेशन बंद/छुपाना */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

स्वयं प्रयोग करें

नीचे दिए उदाहरण में साइडवेन मेनू को खोलने और बंद करने में एनिमेशन नहीं है。

नाना एनिमेशन की साइडवेन

/* नेविगेशन खोलना */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* नेविगेशन बंद/छुपाना */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

स्वयं प्रयोग करें

नीचे दिए उदाहरण में दायाँ ओर नेविगेशन मेनू बनाने के तरीका दिखाया गया है:

दायाँ ओर नेविगेशन:

.sidenav {
  right: 0;
}

स्वयं प्रयोग करें

नीचे दिए उदाहरण में एक हमेशा प्रदर्शित आड़ी नेविगेशन मेनू बनाने के तरीका दिखाया गया है (निर्बल स्थान):

हमेशा प्रदर्शित आड़ी नेविगेशन:

/* आड़ी नेविगेशन */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* पृष्ठ सामग्री */
.main {
  margin-left: 200px; /* आड़ी नेविगेशन की चौड़ाई के समान */
}

स्वयं प्रयोग करें

संबंधित पृष्ठ

तालीम:CSS नेविगेशन टॉगल