- প্রকাশিত
Best Responsive Navbar Designs using HTML, CSS, and JavaScript in Bangla
- লেখক
- Name
- Mohammed Nasim
- টুইটার
- @nasimStg
নেভিগেশন বারগুলি প্রতিটি ওয়েবসাইটের একটি অপরিহার্য উপাদান, ব্যবহারকারীদের সাইটে নেভিগেট করতে এবং এর বিষয়বস্তু অ্যাক্সেস করার জন্য একটি গাইড হিসাবে পরিবেশন করে৷ মোবাইল ডিভাইসের উত্থান এবং বিভিন্ন স্ক্রিনের আকারের সাথে, আপনার ওয়েবসাইটের নেভিগেশন বারটি প্রতিক্রিয়াশীল এবং বিভিন্ন স্ক্রীনের আকারের সাথে খাপ খায় তা নিশ্চিত করা গুরুত্বপূর্ণ।
এই নিবন্ধে, আমরা HTML, CSS, এবং JavaScript ব্যবহার করে তৈরি করা যেতে পারে এমন সেরা প্রতিক্রিয়াশীল নেভিবার ডিজাইনগুলি অন্বেষণ করব। আপনি একটি সাধারণ পোর্টফোলিও ওয়েবসাইট বা একটি জটিল ই-কমার্স প্ল্যাটফর্ম তৈরি করছেন না কেন, এই ডিজাইনগুলি আপনাকে একটি নেভিগেশন বার তৈরি করতে সাহায্য করবে যা কার্যকরী এবং দৃশ্যত আকর্ষণীয় উভয়ই।
Here are some HTML CSS JS responsive navbars with example code:
সূচিপত্র
Fixed Top Navbar:
ফিক্সড টপ ন্যাভবার হল সবচেয়ে সাধারণ রেসপন্সিভ নেভবার ডিজাইনগুলির মধ্যে একটি। এটি একটি সাধারণ ডিজাইন যা ব্যবহারকারীর স্ক্রোলিং নির্বিশেষে স্ক্রিনের শীর্ষে থাকে৷ একটি ফিক্সড টপ নেভিবার তৈরি করতে, আপনি CSS পজিশন ব্যবহার করতে পারেন: ফিক্সড প্রোপার্টি, এবং উপরের এবং বাম মান 0 এ সেট করুন। এটি নিশ্চিত করবে যে নেভিবার স্ক্রিনের উপরে থাকবে।
Hamburger Menu Navbar:
হ্যামবার্গার মেনু ন্যাভবার একটি জনপ্রিয় প্রতিক্রিয়াশীল ন্যাভবার ডিজাইন, বিশেষ করে মোবাইল ডিভাইসের জন্য। এটি একটি হ্যামবার্গার আইকন ব্যবহার করে মেনু আইটেমগুলিকে লুকাতে এবং দেখানোর জন্য, স্ক্রিনে স্থান সংরক্ষণ করে৷ একটি হ্যামবার্গার মেনু নেভিবার তৈরি করতে, আপনি মেনু আইটেমগুলির দৃশ্যমানতা টগল করতে জাভাস্ক্রিপ্ট এবং মেনু এবং হ্যামবার্গার আইকন স্টাইল করতে CSS ব্যবহার করতে পারেন।
Sticky Navbar:
স্টিকি ন্যাভবার হল এমন একটি ডিজাইন যা ব্যবহারকারী যখন স্ক্রল করে তখন স্ক্রিনের শীর্ষে স্থির থাকে, কিন্তু স্থির শীর্ষ ন্যাভবার থেকে ভিন্ন, ব্যবহারকারী একটি নির্দিষ্ট দূরত্ব স্ক্রোল করার পরেই এটি ঠিক হয়ে যায়। একটি স্টিকি ন্যাভিবার তৈরি করতে, আপনি ব্যবহারকারীর স্ক্রোল অবস্থান সনাক্ত করতে JavaScript ব্যবহার করতে পারেন এবং তারপরে পর্দার শীর্ষে নেভিবার ঠিক করতে CSS অবস্থান: স্থির সম্পত্তি ব্যবহার করতে পারেন।
Dropdown Navbar:
ড্রপডাউন নেভিবার হল একটি ডিজাইন যা একটি ড্রপডাউন মেনু দেখায় যখন একজন ব্যবহারকারী একটি মূল মেনু আইটেমের উপর ঘোরায়। এই ডিজাইনটি প্রচুর সংখ্যক মেনু আইটেম সহ ওয়েবসাইটগুলির জন্য উপযুক্ত, কারণ এটি স্ক্রিনে স্থান সংরক্ষণ করতে পারে এবং মেনুটিকে আরও সংগঠিত করতে পারে৷ একটি ড্রপডাউন নেভিবার তৈরি করতে, আপনি ড্রপডাউন মেনু স্টাইল করতে CSS এবং হোভারে ড্রপডাউন মেনু প্রদর্শন এবং লুকানোর জন্য JavaScript ব্যবহার করতে পারেন।
Animated Navbar:
অ্যানিমেটেড ন্যাভবার এমন একটি ডিজাইন যা ব্যবহারকারীর অভিজ্ঞতা বাড়াতে অ্যানিমেশন ব্যবহার করে। আপনি একটি মসৃণ এবং মার্জিত অ্যানিমেশন প্রভাব তৈরি করতে CSS অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করতে পারেন। একটি অ্যানিমেটেড ন্যাভিবার তৈরি করতে, আপনি ব্যবহারকারীর স্ক্রোল অবস্থান সনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন এবং তারপরে নেভিবার অ্যানিমেট করতে CSS ব্যবহার করতে পারেন।
Pros, Cons and Use Cases for Each Navbar Design
সূচিপত্র
Horizontal Navbar:
সুবিধা:
- সহজ এবং সরল নকশা, ব্যবহারকারীদের জন্য বোঝা সহজ।
- উল্লম্ব নেভবারগুলির তুলনায় কম উল্লম্ব স্থান নেয়।
- বড় পর্দার জন্য উপযুক্ত।
অসুবিধা:
- অনেক মেনু আইটেম দিয়ে বিশৃঙ্খল এবং নেভিগেট করা কঠিন হতে পারে।
- ছোট পর্দার জন্য উপযুক্ত নাও হতে পারে কারণ এতে অনুভূমিক স্ক্রোলিং প্রয়োজন হতে পারে।
ব্যবহারের ক্ষেত্রে:
অল্প সংখ্যক মেনু আইটেম সহ ওয়েবসাইটগুলির জন্য উপযুক্ত৷
অনুভূমিক স্থানকে অগ্রাধিকার দেয় এমন ওয়েবসাইটগুলির জন্য ভাল কাজ করে৷
Vertical Navbar:
সুবিধা:
- ছোট পর্দায় নেভিগেট করা সহজ কারণ এটি কম অনুভূমিক স্থান নেয়।
- বিশৃঙ্খল না হয়ে বিপুল সংখ্যক মেনু আইটেম মিটমাট করতে পারে।
- একটি মার্জিত এবং ন্যূনতম নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
অসুবিধা:
- অনেক উল্লম্ব স্থান নিতে পারে, এটি ছোট পর্দার জন্য অনুপযুক্ত করে তোলে।
- উল্লম্ব স্ক্রোলিং প্রয়োজন হতে পারে, যা ব্যবহারকারীদের জন্য অসুবিধাজনক হতে পারে।
ব্যবহারের ক্ষেত্রে:
প্রচুর সংখ্যক মেনু আইটেম সহ ওয়েবসাইটগুলির জন্য আদর্শ।
উল্লম্ব স্থানকে অগ্রাধিকার দেয় এমন ওয়েবসাইটগুলির জন্য উপযুক্ত৷
একটি আকর্ষণীয় এবং সহজ নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
Hamburger Navbar:
সুবিধা:
- ন্যূনতম স্ক্রীন স্থান নেয়, এটি ছোট পর্দার জন্য আদর্শ করে তোলে।
- ব্যবহারকারীদের একটি টোকা দিয়ে নেভিগেশন মেনু অ্যাক্সেস করার অনুমতি দেয়, একটি বিরামহীন অভিজ্ঞতা প্রদান করে।
- একটি আধুনিক এবং আড়ম্বরপূর্ণ নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
অসুবিধা:
- কিছু ব্যবহারকারীর জন্য কম স্বজ্ঞাত হতে পারে, কারণ তারা হ্যামবার্গার আইকনের সাথে পরিচিত নাও হতে পারে।
- বড় পর্দার জন্য উপযুক্ত নাও হতে পারে কারণ এটি নেভিগেশন মেনু প্রদর্শনের জন্য পর্যাপ্ত স্থান প্রদান করতে পারে না।
ব্যবহারের ক্ষেত্রে:
- প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য আদর্শ যেগুলিকে পর্দার আকারের উপর ভিত্তি করে নেভিগেশন মেনু সামঞ্জস্য করতে হবে৷
- একটি মসৃণ এবং আধুনিক নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
Dropdown Navbar:
সুবিধা:
- বিশৃঙ্খল না হয়ে বিপুল সংখ্যক মেনু আইটেম মিটমাট করতে পারে।
- ছোট পর্দায় নেভিগেট করা সহজ কারণ এটি কম অনুভূমিক স্থান নেয়।
- একটি সহজ এবং মার্জিত নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
অসুবিধা:
- কিছু ব্যবহারকারীর জন্য কম স্বজ্ঞাত হতে পারে, কারণ তারা ড্রপডাউন মেনুগুলির সাথে পরিচিত নাও হতে পারে৷
- অনেক উল্লম্ব স্থান নিতে পারে, এটি ছোট পর্দার জন্য অনুপযুক্ত করে তোলে।
- উল্লম্ব স্ক্রোলিং প্রয়োজন হতে পারে, যা ব্যবহারকারীদের জন্য অসুবিধাজনক হতে পারে।
ব্যবহারের ক্ষেত্রে:
প্রচুর সংখ্যক মেনু আইটেম সহ ওয়েবসাইটগুলির জন্য আদর্শ।
উল্লম্ব স্থানকে অগ্রাধিকার দেয় এমন ওয়েবসাইটগুলির জন্য উপযুক্ত৷
একটি আকর্ষণীয় এবং সহজ নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
Sidebar Navbar:
সুবিধা:
- বিশৃঙ্খল না হয়ে বিপুল সংখ্যক মেনু আইটেম মিটমাট করতে পারে।
- ছোট পর্দায় নেভিগেট করা সহজ কারণ এটি কম অনুভূমিক স্থান নেয়।
- একটি আধুনিক এবং আড়ম্বরপূর্ণ নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
অসুবিধা:
- অনেক উল্লম্ব স্থান নিতে পারে, এটি ছোট পর্দার জন্য অনুপযুক্ত করে তোলে।
- উল্লম্ব স্ক্রোলিং প্রয়োজন হতে পারে, যা ব্যবহারকারীদের জন্য অসুবিধাজনক হতে পারে।
- বড় পর্দার জন্য উপযুক্ত নাও হতে পারে কারণ এটি নেভিগেশন মেনু প্রদর্শনের জন্য পর্যাপ্ত স্থান প্রদান করতে পারে না।
ব্যবহারের ক্ষেত্রে:
- প্রচুর সংখ্যক মেনু আইটেম সহ ওয়েবসাইটগুলির জন্য আদর্শ।
- উল্লম্ব স্থানকে অগ্রাধিকার দেয় এমন ওয়েবসাইটগুলির জন্য উপযুক্ত৷
- একটি আধুনিক এবং আড়ম্বরপূর্ণ নকশা তৈরি করতে ব্যবহার করা যেতে পারে।
Fixed Top/Horizoltal navbar Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Top Navbar</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
header{
position: fixed;
z-index: 999;
height: 13%;
padding: 0 25px;
width: calc(100% - 50px);
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-wrap: wrap;
}
header > nav{
display: flex;
align-items: center;
}
header > nav > ul{
display: flex;
list-style: none;
}
header > nav > ul > li{
margin-right: 35px;
}
a{
color: #0d0d0d;
text-decoration: none;
transition: all .2s ease;
}
a:hover{
color: #207DE9;
}
.btn{
padding: 5px 25px;
background-color: #207DE9;
color: #fafafa;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all .2s ease;
}
.btn:hover{
background-color: #0f63c3;
}
.active a{
color: #207DE9;
}
.title-accent{
background-color: #5592d8;
color: #fafafa;
font-size: 1rem;
padding: 4px 6px;
border-radius: 3px;
}
main{
padding: 10%;
height: 100vh;
background-color: #dddddd;
}
main p{
margin: 25px 0;
}
footer{
height: 25vh;
padding: 5% 10%;
background-color: #5592d8;
color: #fafafa;
}
</style>
<header>
<a href="#">Website <span class="title-accent">LOGO</span></a>
<nav>
<ul>
<li class="">
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
</ul>
<button class="btn">contact</button>
</nav>
</header>
<main>
<p>Other Content of the Website</p>
<img src="https://picsum.photos/200" alt="Random Image">
<img src="https://picsum.photos/200" alt="Random Image">
<img src="https://picsum.photos/200" alt="Random Image">
<img src="https://picsum.photos/200" alt="Random Image">
<img src="https://picsum.photos/200" alt="Random Image">
</main>
<footer>
<p>footer elements</p>
</footer>
</body>
</html>