বন্ধুরা আপনারা অনেক সময় বিভিন্ন ওয়েবসাইটে দেখে থাকবেন যে পেজ নিচের দিকে স্ক্রল করার সময় সাইটে যে নেভিগেশন বার থাকে সেটা হাইড হয়ে যায় আবার উপরের দিকে স্ক্রল শুরু করলে নেভিগেশন বার পুনরায় শো করে। যারা ওয়েব ডিজাইন নিয়ে একটু হলেও মাথা ঘামান তারা অবশ্যই ভেবেছেন যে কিভাবে এরকম ইফেক্ট দেওয়া যায়, কিভাবে পেজ স্ক্রল করার সময় নেভিগেশন বার শো এবং হাইড করা যায়। আপনি যদি এই বিষয়ে ভেবেই থাকেন তাহলে এই পোষ্ট করতে চলেছে আপনার ভাবনার অবসান। কেননা আজকের পোস্টে আলোচনা করা হবে কিভাবে এরকম একটি নেভিগেশন বার তৈরি করা যায়। তাহলে চলুন আর কথা না বাড়িয়ে জাম্প করা যাক মূল পোস্টে।
এরকম একটি নেভিগেশন বার তৈরি করার জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। আমি মূলত নেভিগেশন বারের যে মিনিমাম স্ট্রাকচার সেটার জন্য প্রয়োজনীয় কোড দেব। আর নেভিগেশন বারের মধ্যে যেসব অপশন কিংবা কনটেন্ট আপনি রাখতে চান সেটা আপনি নিজেই প্লেস করে নিতে পারবেন। আর প্রয়োজনে নিচে সম্পূর্ন ডিজাইন করা নেভিগেশন বারের প্রজেক্ট এর লিঙ্ক দেওয়া আছে সেখান থেকে পুরো প্রজেক্ট ডাউনলোড করে নিতে পারবেন।
HTML
তো প্রথমেই নিচের এইচটিএমএল কোডটি দেখুন। এখানে একটি মাত্র ট্যাগ দেওয়া আছে যেটার ভিতরে আপনার নেভিগেশন বারের সকল কনটেন্ট থাকবে। মূলত নিচের কোডটি আপনার নেভিগেশন বারের প্যারেন্ট ট্যাগ হিসেবে থাকবে।
<div class="navbar" id="navbar">
<!--Navbar Inner Code Start-->
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#contact">contact</a>
<!--Navbar Inner Code End-->
</div>CSS
এবার নেভিগেশন বারের প্যারেন্ট ট্যাগটি সঠিক জায়গায় প্লেস করার জন্য নিচের সিএসএস কোডটুকু আপনার সিএসএস এর মধ্যে যুক্ত করে দিন। সিএসএস এর মূল .navbar সিলেক্টর এর মধ্যে আপনার নেভিগেশন বারের প্যারেন্ট ট্যাগ ডিজাইনের জন্য প্রয়োজনীয় সিএসএস থাকবে। এবং .navbar.hide সিলেক্টর এর মধ্যে আপনি নেভিগেশন বার হাইড করার সময় যেভাবে হাইড করতে চান তার জন্য সিএসএস থাকবে।
.navbar {
display: flex;
width: 100%;
height: 55px;
background: #88f;
position: fixed;
top: 0;
left: 0;
right: 0;
justify-content: space-around;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: all 0.3s
}
.navbar.hide {
top: -55px;
}
/*Navbar Inner CSS Start*/
.navbar a {
padding: 0 15px;
line-height: 55px;
color: white;
text-decoration: none;
flex-grow: 1;
text-align: center
}
/*Navbar Inner CSS End*/JS
এবার মূল কাজ জাভাস্ক্রিপ্ট এর। জাভাস্ক্রিপ্ট মূলত অন স্ক্রল ইভেন্টে রান হবে এবং নিচের দিকে স্ক্রল করার সময় নেভিগেশন বারের এইচটিএমএল এর প্যারেন্ট ট্যাগ এ hide ক্লাস নেম যুক্ত করে দেবে। আবার উপরের দিকে স্ক্রল করার সময় hide ক্লাস নেম রিমুভ করে দেবে।
var prevScroll = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset;
if (prevScroll > currentScroll) {
document.getElementById("navbar").classList.remove("hide");
} else {
document.getElementById("navbar").classList.add("hide");
}
prevScroll = currentScroll;
}Download Project
তো পোস্ট মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।