কিভাবে হোয়াই ক্রিয়েট: সাইডেনেভ বাটন

হোয়াই ক্রিয়েট হভাইসবল সাইডেনেভ

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করা:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করা:

/* সাইডেনেভ এর লিঙ্কের স্টাইল সেট করা */
#mySidenav a {
  position: absolute; /* ব্রাউজার উইন্ডোর প্রতিষ্ঠান অবস্থান */
  left: -80px; /* স্ক্রিনের বাইরে অবস্থান করানো */
  transition: 0.3s; /* মাউস হভাইসিং তখন পার্সেশন অ্যাফেক্ট */
  padding: 15px; /* 15px ইনন্দ্রভূমি */
  width: 100px; /* নির্দিষ্ট প্রস্থ */
  text-decoration: none; /* হাইলাইট না করা */
  font-size: 20px; /* ফন্ট সাইজ বাড়ানো */
  color: white; /* লেখার রঙ সাদা করা */
  border-radius: 0 5px 5px 0; /* ডান ও ডানদিকের নিচের আঙুল গোল */
}
#mySidenav a:hover {
  left: 0; /* মাউস হভাইসিং তখন, উপাদানকে সঠিকভাবে প্রদর্শিত করতে */
}
/* about লিঙ্ক: শীর্ষে 20px, সবুজ পিছনবর্ণ */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* নীল */
}
#projects {
  top: 140px;
  background-color: #f44336; /* লাল */
}
#contact {
  top: 200px;
  background-color: #555 /* সাদা */
}

亲自试一试

相关页面

教程：সিএসএস নেভিগেশন