স্টিকি নেভবার কিভাবে করবেন?
কিছু কিছু ওয়েবসাইটের লোগো গোলাকার অথবা হাইট বড় হয়। এরকম বড় সাইজের লোগোকে যখন উপরে ফিক্স পজিশনে রাখা হয়, তখন ডেক্সটপ বা লেপটপে তেমন সমস্যা না হলেও মোবাইল স্ক্রিনের বড় অংশ এই লোগোর কারণে ঢেকে যায়। এমন সমস্যার সমাধানে সাধারণত স্টিকি নেভিগেশন ব্যবহার করা হয়।
আবার কিছু কিছু ওয়েবসাইটে বিশেষ করে ই-কমার্স ওয়েবসাইট গুলোতে দৃশ্যমান অনেক মেনু আইটেম থাকে। সাথে চার্সবার ইত্যাদী মিলিয়ে একাদিক মেনুবার রাখার প্রয়োজন হয়। এমন অবস্থায় চার্সবার এবং বিশেষ মেনু আইটেম গুলোকে ফিক্স পজিশনে রাখতে হলে স্টিকি নেভিগেশন হচ্ছে সবচেয়ে উত্তম পন্থা।
আবার কিছু কিছু ওয়েবসাইটে স্লাডারের উপরে নিচে মেনুবার থাকে। এমন অবস্থায় বিশেষ মেনু আইটেম গুলোকে স্লাডারের নিচে রেখে স্টিকি পজিশনে রাখলে দেখতে সুন্দর দেখায় এবং যে কোন রেজুলেশনে সুন্দর ভাবে মানিয়ে যায়। স্টিকি নেভিগেশন সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করে করা হয়। তবে আমি এই উদাহরণ শুধুমাত্র সিএসএস দিয়ে করে দেখিয়েছি।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Sticky Navbar With CSS</title>
<style>
*{margin:0;padding:0;}
body{
background-color:aliceblue;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.header,.footer{
height:200px;
text-align:center;
color:blue;
font-size:60px;
line-height:200px;
}
.sticky-nav{
float: left;
width: 100%;
top: 0;
position: sticky;
background: blue;
}
.sticky-nav li{
display: inline;
}
.sticky-nav li a{
display:inline-block;
color: white;
padding: 12px;
text-decoration: none;
}
.sticky-nav li a:hover, .sticky-nav li .active{
background-color:navy;
}
.main-content{
height:auto;
width:90%;
margin:0 auto;
background-color:#fff;
padding-top:60px;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="sticky-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="main-content">
<div style="height:1200px;line-height:1200px;font-size:7vw;color:blue;text-align:center;">Main Content Here...</div>
</div>
<hr>
<div class="footer">Footer</div>
</body>
</html>
ফলাফল
Sumaiya Cosmetics নামে আমার ছোট ভাইয়ের একটি কসমেটিক্স দোকান আছে। সেটাকে মডেল করে আমি একটি ডিজাইন করেছি। যেখানে আমি স্টিকি নেভিগেশন ব্যবহার করেছি। ছবি নিচে দিয়েছি। ছবিতে ক্লিক করে ডিজাইনটা দেখে নিন। এটা রেস্পন্সিভ করেছি। ছোট বড় ডিভাইস গুলোতে কেমন দেখাচ্ছে দেখে নিলে সিমপল একটি ই-কমার্সের আইডিয়া পাবেন। আইটেম গুলোতে হোভার করলে আরো কিছু দেখবেন। কেমন হয়েছে কমেন্ট করে জানালে উপকৃত হব।
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন