Foundation ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজে sticky navigation এবং footer তৈরি করতে পারেন। Sticky Navigation এমন একটি নেভিগেশন বার যা স্ক্রলিং করার সময় স্ক্রীনের ওপরেই থাকে, এবং Sticky Footer এমন একটি ফুটার যা পেজের নিচে থাকে, যতটুকু কনটেন্ট থাকবে না কেন।
Foundation এ এই দুইটি ফিচার তৈরি করতে বিভিন্ন উপায় রয়েছে। নিচে Foundation ব্যবহার করে Sticky Navigation এবং Footer তৈরি করার ধাপ দেওয়া হলো।
Sticky Navigation তৈরি
Foundation ফ্রেমওয়ার্কে sticky navigation তৈরি করতে data-sticky অ্যাট্রিবিউট ব্যবহার করা হয়। এটি আপনাকে নেভিগেশন বারটি স্ক্রলিং এর সময় স্ক্রীনে স্থির রাখতে সাহায্য করে।
উদাহরণ: Sticky Navigation
<nav class="top-bar" data-sticky data-options="sticky-on:small;">
<ul class="title-area">
<li class="name"><a href="#">My Website</a></li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
এখানে:
data-sticky: এটি নেভিগেশন বারকে স্টিকি (স্থির) করে দেয়।data-options="sticky-on:small;": এই কোডটি ব্রেকপয়েন্ট নির্ধারণ করে, যেখানে নেভিগেশনটি স্টিকি হবে। উদাহরণস্বরূপ, ছোট স্ক্রীনে এটি স্টিকি হবে।
এর বৈশিষ্ট্য:
- নেভিগেশন বারটি স্ক্রল করার সময় পেজের উপরেই থাকবে।
- Sticky-on ফিচারটি বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করা যায়।
Sticky Footer তৈরি
Sticky Footer এমন একটি ফুটার যা স্ক্রীনের নিচে থাকে এবং পেজের কনটেন্টের পরেও স্ক্রীনে দৃশ্যমান থাকে। Foundation এ sticky footer তৈরি করতে সাধারণত position: fixed অথবা Foundation এর data-sticky-footer ফিচার ব্যবহার করা হয়।
উদাহরণ: Sticky Footer
<footer class="footer" data-sticky-footer>
<p>© 2024 My Website | All Rights Reserved</p>
</footer>
এখানে:
data-sticky-footer: এটি ফুটারটিকে স্ক্রীনের নিচে স্থির করে রাখে।
এছাড়া, CSS ব্যবহার করে কাস্টম স্টাইলও দেওয়া যেতে পারে:
footer.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
এর বৈশিষ্ট্য:
- ফুটারটি পেজের স্ক্রল করার পরও স্ক্রীনের নিচে স্থির থাকবে।
- Fixed Position ব্যবহার করলে ফুটারটি সর্বদা স্ক্রীনের নিচে অবস্থান করবে।
Foundation-এ Sticky Navigation এবং Footer ব্যবহার করার উপকারিতা
- রেসপনসিভ ডিজাইন: Foundation এর গ্রিড সিস্টেম এবং স্টাইলিং সহ এটি মোবাইল এবং ডেস্কটপ উভয়ের জন্য উপযুক্ত।
- সহজ কাস্টমাইজেশন: আপনি আপনার প্রোজেক্টের চাহিদা অনুযায়ী স্টিকি নেভিগেশন এবং ফুটার কাস্টমাইজ করতে পারবেন।
- ব্রেকপয়েন্ট সাপোর্ট: Foundation এর sticky-on ফিচারটি আপনার নেভিগেশন এবং ফুটারের জন্য বিভিন্ন স্ক্রীন সাইজে কাজ করতে সাহায্য করে।
Foundation ফ্রেমওয়ার্কের মাধ্যমে আপনি খুব সহজেই sticky navigation এবং sticky footer তৈরি করতে পারেন। Sticky Navigation স্ক্রলিং করার সময় নেভিগেশন বারকে দৃশ্যমান রাখে, এবং Sticky Footer ফুটারটিকে স্ক্রীনের নিচে স্থির রাখে। Foundation এর data-sticky এবং data-sticky-footer ফিচারগুলো ব্যবহার করে আপনি এই ফিচারগুলো দ্রুত এবং কার্যকরভাবে বাস্তবায়ন করতে পারেন।
Read more
