कैसे बनाएं: कैनवस बाहरी मेनू

कैनवस बाहरी मेनू बनाएं

पहला कदम - HTML जोड़ें

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- बाईंवाला नेविगेशन बार खोलने के लिए किसी भी एलिमेंट का इस्तेमाल करें -->
<span onclick="openNav()">open</span>
<!-- यदि आप चाहते हैं कि बाईंवाला नेविगेशन बार पृष्ठ की सामग्री को दायाँ ओर खींचे, तो सभी पृष्ठ की सामग्री को इस div में जोड़ें (यदि आप केवल बाईंवाला नेविगेशन बार को पृष्ठ के ऊपरी छोर पर रहना चाहते हैं, तो इस सेटिंग का इस्तेमाल न करें) -->
<div id="main">
  ...
</div>

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

/* बाईंवाला नेविगेशन मेनू */
.sidenav {
  height: 100%; /* 100% पूरी ऊंचाई */
  width: 0; /* 0 चौड़ाई - इस सेटिंग को JavaScript से बदलें */
  position: fixed; /* मूल स्थान पर बने रहे */
  z-index: 1; /* शीर्ष पर बने रहे */
  top: 0;
  left: 0;
  background-color: #111; /* काला */
  overflow-x: hidden; /* होरिज़न्टल स्क्रोल को निष्क्रिय करें */
  padding-top: 60px; /* सामग्री को ऊपरी छोर से 60 पिक्सल की दूरी */
  transition: 0.5s; /* 0.5 सेकंड का ट्रांजिशन इफेक्ट, बाईंवाला नेविगेशन बार स्लाइड इन करने के लिए */
}
/* नेविगेशन मेनू लिंक */
.sidenav a {
  padding: 8px 8px 8px 32px;
  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;
}
/* स्क्रीन की ऊंचाई 450 पिक्सल से कम होने वाले छोटे स्क्रीनों पर, साइडनेविगेशन बार की शैली को बदलें (आंतरिक पैडिंग और फ़ॉन्ट आकार कम करें) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

कैनवस बाहरी मेनू

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

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

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

पारदर्शी कैनवस बाहरी मेनू

/* साइडनेविगेशन की चौड़ाई 250px करें, पृष्ठ की बाएँ घनता 250px, और बॉडी को काला पृष्ठभूमि रंग जोड़ें */
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, बॉडी का पीछे का रंग श्वेत */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

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

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

पाठ्यक्रम:CSS नेविगेशन टॉगल