নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য < ul> এবং < li> ট্যাগ ব্যবহার করবোঃ
kt_satt_skill_example_id=1211
কিছু স্টাইল যোগ করুনঃ
kt_satt_skill_example_id=1218
উদাহরণের বর্ণনাঃ
list-style-type: none;- লিস্টের বুলেট চিহ্নকে মুছে দেয়। নেভিগেশনবারে বুলেট চিহ্ন দেখতে খারাপ দেখায়- ব্রাউজারের ডিফল্ট সেটিংস পরিবর্তন করার জন্য
margin: 0;andpadding: 0;সেট করুন
উপরের কোডটি হরিজন্টাল ও ভার্টিকাল দুই ধরনের নেভিগেশন বারের জন্য মানসম্মত কোড।
ভার্টিকাল নেভিগেশন বার
ভার্টিকাল নেভিগেশনবার তৈরির জন্য আপনি লিস্টের < a> এলিমেন্টকে স্টাইল করতে পারেন, এই জন্য উপরের কোডের সাথে নিচের অংশ ব্যবহার করতে হয়ঃ
kt_satt_skill_example_id=1224
উদাহরণের বর্ণনাঃ
display: block;- লিঙ্কগুলোকে ব্লক এলিমেন্ট এবং পুরো লিঙ্ক এরিয়াকে ক্লিকযোগ্য করে, এবং ইহা আমাদেরকে অতিরিক্ত স্টাইল করতে সাহায্য করেwidth: 80px;- ব্লক এলিমেন্ট পুরো প্রস্থ ডিফল্ট আকারে নিয়ে নেয়। আমরা ৬০ পিক্সেল প্রস্থ নির্ধারণ করে দিয়েছি
উপরের কোডের পরিবর্তে আপনি নিচের মত করেও লিখতে পারেনঃ
kt_satt_skill_example_id=1225
ভার্টিকাল নেভিগেশন বারের উদাহরণ
একটি সাধারণ নেভিগেশনবারের উদাহরণঃ
kt_satt_skill_example_id=1226
এক্টিভ/কারেন্ট নেভিগেশন লিংক
ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ
kt_satt_skill_example_id=1227
সেন্টার এলাইন লিংক এবং বর্ডার যোগ
লিংককে মাঝে আনতে < li> অথবা < a> এলিমেন্টে text-align:center ব্যবহার করুন।
নেভিগেশনবারের চারপাশে বর্ডার দিতে < ul> এর মধ্যে border প্রোপার্টি দিন। নেভিগেশনবারের মাঝে বর্ডার দিতে <li> এলিমেন্টে border-bottom ব্যবহার করতে হবেঃ
সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার
একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ
kt_satt_skill_example_id=1232
দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।
হরিজন্টাল নেভিগেশন বার
হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে।
ইনলাইন লিস্ট আইটেম
< li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃ
kt_satt_skill_example_id=1234
উদাহরণের বর্ণনাঃ
display: inline;- ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলাম
ফ্লোটিং লিস্ট আইটেম
float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃ
kt_satt_skill_example_id=1237
উদাহরণের বর্ণনাঃ
float: left;ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছেdisplay: block;লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলেpadding: 5px;সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছেbackground-color: aqua;রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হল
হরিজন্টাল নেভিগেশন বারের উদাহরণ
একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=1243
এক্টিভ/কারেন্ট নেভিগেশন লিংক
ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ
kt_satt_skill_example_id=1248
রাইট-এলাইন লিংক
লিস্ট আইটেমে float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃ
kt_satt_skill_example_id=1250
লিংক ডিভাইডার
< li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃ
kt_satt_skill_example_id=1252
ফিক্সড নেভিগেশন বার
ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ
kt_satt_skill_example_id=1258
kt_satt_skill_example_id=1261
বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।
বর্ডারসহ হরিজন্টাল নেভিগেশনবার
হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ
kt_satt_skill_example_id=1264
Read more
