কিভাবে তৈরি করা: সাইড নেভিগেশন

এনামেটেড সাইডবার নেভিগেশন তৈরি করুন

প্রথম পদক্ষেপ - 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; /* শীর্ষে 60px দূরত্বে কনটেন্ট স্থাপন */
  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;
}
/* 在高度小于 450px 的小屏幕上，更改侧边导航的样式（减少内边距和字体大小） */
@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";
}
/* সাইডেনেভিং ব্যাকগ্রাউন্ড হার্ডওয়ার্ডকে 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 নেভিগেশন বার