যেকোনো ওয়েবসাইটের জন্য সহজে ব্যবহারযোগ্য নেভিগেশন থাকা গুরুত্বপূর্ণ।
CSS দিয়ে আপনি একঘেয়ে HTML মেনুকে সুন্দর দেখতে নেভিগেশন বারে রূপান্তরিত করতে পারেন।
একটি নেভিগেশন বারের ভিত্তি হিসেবে স্ট্যান্ডার্ড HTML প্রয়োজন।
আমাদের উদাহরণে আমরা একটি স্ট্যান্ডার্ড HTML লিস্ট থেকে নেভিগেশন বার তৈরি করব।
একটি নেভিগেশন বার মূলত লিঙ্কের একটি লিস্ট, তাই <ul> এবং <li> এলিমেন্ট ব্যবহার করা যুক্তিসঙ্গত:
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>এখন লিস্ট থেকে বুলেট এবং margin ও padding সরিয়ে ফেলি:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}উদাহরণের ব্যাখ্যা:
list-style-type: none; - বুলেট সরিয়ে দেয়। একটি নেভিগেশন বারের
লিস্ট মার্কারের প্রয়োজন নেইmargin: 0; এবং padding: 0;
সেট করুনউপরের উদাহরণের কোডটি উল্লম্ব এবং অনুভূমিক — দুই ধরনের নেভিগেশন বারেই ব্যবহৃত স্ট্যান্ডার্ড কোড।
একটি উল্লম্ব নেভিগেশন বার তৈরি করতে, উপরের কোডের পাশাপাশি আপনি লিস্টের ভেতরের <a> এলিমেন্টগুলো স্টাইল করতে পারেন:
li a {
display: block;
width: 60px;
}উদাহরণের ব্যাখ্যা:
display: block; - লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করলে পুরো লিঙ্ক এরিয়া ক্লিকযোগ্য হয়ে যায় (শুধু টেক্সট নয়), এবং এটি আমাদের width
(এবং চাইলে padding, margin, height ইত্যাদি) নির্ধারণ করার সুযোগ দেয়width: 60px; - ব্লক এলিমেন্ট ডিফল্টভাবে পুরো প্রশস্ততা দখল করে। আমরা একটি 60 পিক্সেল প্রশস্ততা নির্ধারণ করতে চাইআপনি <ul>-এর width সেট করে <a>-এর width বাদ দিতে পারেন, কারণ ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হলে সেগুলো পুরো প্রশস্ততা দখল করবে। এটি আমাদের আগের উদাহরণের মতোই ফলাফল দেবে:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}