মীর তাউহীদুল ইসলাম
ওয়েব ডেভেলপার, ওডেস্ক
ব্যাবহারের সুবিধার্থে প্রত্যেকটি ওয়েব সাইটের জন্য ন্যাভিগেশন বার প্রয়োজন। সিএসএস এর মাধ্যমে যেকোন এইচটিএমএল মেনুকে খুব সুন্দর ন্যাভিগেশন বার এ পরিনত করা যায়।
ন্যাভিগেশন বার = লিংক তালিকা
একটি ন্যাভিগেশন বার তৈরি করার জন্য প্রথমে একটি এইচটিএমএল কাঠামোর প্রয়োজন হয়।
আমাদের উদাহারনে আমরা ন্যাভিগেশন বার তৈরি করেছি সাধারণ এইচটিএমএল লিস্ট (li) ট্যাগের মাধ্যমে। মূলত ন্যাভিগেশন বার হল একটি লিংকের তালিকা বা লিস্ট। তাই আমরা <ul></ul> এবং <li></li> ট্যাগগুলো ব্যাবহার করব।
উদাহারনঃ
<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>
এখন এই তালিকা থেকে বুলেট (গোল কাল বৃত্ত) এবং মার্জিন এবং প্যাডিং সরিয়ে দেওয়া হল:
উদাহারনঃ
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
উদাহরণ ব্যাখ্যা:
- লিস্ট স্টাইল টাইপ নান( list-style-type: none;) দ্বারা বুলেটগুলোকে মুছে ফেলা হয়েছে।
- ব্রাউজার এর ডিফল্ট সেটিংস মুছে ফেলার জন্য মার্জিন এবং প্যাডিং ০ সেট করা হয়েছে।
এখন লক্ষ করতে হবে যে, উপরের উদাহারনে যে কোডটুকু লেখা হয়েছে তা প্রত্যেক ন্যাভিগেশন বার তৈরি করতে লিখতে হবে হোক তা হরিজন্টাল বা ভারটিকাল।
ভারটিকাল ন্যাভিগেশন বার
একটি ভারটিকাল ন্যাভিগেশন বার তৈরির জন্য আমাদের শুধু উপরের কোড থেকে <a> উপাদানটির স্টাইল পরিবর্তন করতে হবে।
উদাহারনঃ
a {
display: block;
width: 60px;
}
উদাহরণ ব্যাখ্যা:
- display: block –দ্বারা লিংকটিকে একটি ব্লক এলিমেন্টে রূপান্তরিত করা হয়েছে যার ফলে লিংকটি তার ব্লকের পুরো জায়গা দখল করবে এতে শুধু লিংকের লেখাটি ক্লিকেবল হবে না পুরো জায়গাটিই ক্লিকেবল হবে।
- width: 60px –দ্বারা বুঝা যায় আমরা লিংক ব্লকটির জন্য ৬০পিক্সেল পরিমাণ জায়গা নিবো যদিও ব্লক সবসময় সম্পূর্ণ জায়গা দখল করে।
নোটঃ সবসময় <a> উপাদানটির জন্য ভারটিকাল ন্যাভিগেশন বার এ প্রস্থ উল্লেখ করতে হবে কারন এটা না করলে অনেক সময় IE6 অপ্রত্যাশিত ফলাফল উৎপন্ন করতে পারে।
হরিজন্টাল ন্যাভিগেশন বার
হরিজন্টাল ন্যাভিগেশন বার ইনলাইন এবং ফ্লটিং এই দুই পদ্ধতিতে তৈরি করা যায়। দুটো পদ্ধতিই ভাল কাজ করবে তবে লিংকগুলোর সাধারণ আকার বজায় রাখতে ফ্লটিং পদ্ধতি ব্যাবহার করতে হবে।
ইনলাইন লিস্ট পদ্ধতি
ইনলাইন লিস্ট পদ্ধতিতে ন্যাভিগেশন বার তৈরির জন্য আমাকে শুধু </li> ট্যাগের স্টাইলের একটা পরিবর্তন করতে হবে।
উদাহারনঃ
li {
display: inline;
}
উদাহরণ ব্যাখ্যা:
সাধারনত লিস্ট স্টাইল এ ডিসপ্লে-ব্লক ডিফল্ট থাকে তাই (display: inline;) ট্যাগের মাধ্যমে এই ডিফল্ট কে পরিবর্তন করে ইনলাইন করা হয়।
ফ্লটিং লিস্ট পদ্ধতি
উপরের উদাহারনে লিংক গুলোর প্রত্যেকের পৃথক পৃথক প্রস্থ থাকবে। কিন্তু সবগুলো লিংকের সমান প্রস্থ এর জন্য লিংক গুলোকে ফ্লট করতে হবে। এর জন্য <li> এর <a> কে স্টাইল করতে হবে।
উদাহারনঃ
li {
float: left;
}
a {
display: block;
width: 60px;
}
উদাহরণ ব্যাখ্যা:
- এখানে উদাহারনে প্রত্যেকটি লিস্ট ট্যাগকে বামে ফ্লট করানো হয়েছে এবং প্রত্যেকটি লিংককে ব্লকে রূপান্তরিত করে প্রত্যেকটির জন্য পৃথক পৃথক ৬০ পিক্সেল জায়গা নেওয়া হয়েছে।
