কিছু ন্যাভিগেশন বার এর নমুনা দেখুন।
যে কোন ওয়েব সাইটের জন্যই ন্যাভিগেশন বার খুব জরুরি ব্যাপার। একটি সাধারন এবং সুন্দর ন্যাভিগেশন বার ওয়েব পেজকে আকর্ষণীয় করে তোলে। সিএসএস এর বিভিন্ন প্রোপার্টি, যেমন - color, background-color, text-decoration, font-family, font-size, float, ইত্যাদি ব্যবহার করে ওয়েব পেজের জন্য সাধারন এবং আকর্ষণীয় ন্যাভিগেশন বার তৈরি করা যায়।
ন্যাভিগেশন বার তৈরি করার জন্য এইচটিএমএল এর লিস্ট এলিমেন্ট অর্থাৎ <ul> ও <li> ট্যাগ এবং হাইপারলিংক অর্থাৎ <a> ট্যাগ ব্যবহার করতে হবে। এইচটিএমএল লিস্ট ট্যাগের উপাদান গুলোকে সিএসএস এর মাধ্যমে styleing করতে হবে।
একটি ন্যাভিগেশন বার হল আসলে কত গুলো লিংকের একটি সুসজ্জিত লিস্ট যা আনুভুমিক অর্থাৎ horizontal অথবা উলম্ব অর্থাৎ vertical হতে পারে।
একটি ন্যাভিগেশন বার তৈরি করার জন্য নীচের কোড গুলো ব্যবহার করতে হবে।
<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> ট্যাগের জন্য margin, padding এবং list-style-type প্রোপার্টি ব্যবহার করে মার্জিন, প্যাডিং এবং বুলেট সরিয়ে দেই।
নিচে এর জন্য সিএসএস স্টাইল কোড গুলো দেখুন।
ul {
list-style-type:none;
margin:0;
padding:0;
}
ন্যাভিগেশন বার এ কোন লিস্ট স্টাইল মার্কার চিহ্নের প্রয়োজন নেই। তাই লিস্ট স্টাইল মার্কার সরিয়ে বা remove করতে list-style-type প্রপার্টি ব্যবহার করে তার মান বা value হিসেবে none নির্ধারণ করা হয়েছে। ব্রাউজারের স্বয়ংক্রিয় নির্ধারণ বা browser default setting সরিয়ে দিতে বা remove করতে margin এবং padding প্রপার্টি ব্যবহার করে তাদের মান নির্ধারণ করা হয়েছে।
আনুভূমিক বা উলম্ব যে প্রকার ন্যাভিগেশনই তৈরি করতে চান না কেন, এই পর্যন্ত সিএসএস স্টাইল কোড গুলো অবশ্যই ব্যবহার করতে হবে।
Vertical বা উলম্ব ন্যাভিগেশন বার তৈরি করার জন্য শুধুমাত্র লিংক ট্যাগ গুলো অর্থাৎ <li> ট্যাগ এবং হাইপারলিংক অর্থাৎ <a> ট্যাগ গুলোকে সিএসএস স্টাইল কোড ব্যবহার করে স্টাইল করতে হবে।
নিচে এর জন্য সিএসএস স্টাইল কোড গুলো দেখুন।
a {
display:block;
width:60px;
}
নোট - Vertical বা উলম্ব ন্যাভিগেশন বার এর ক্ষেত্রে সর্বদা a এলিমেন্ট অর্থাৎ <a> width নির্দিষ্ট করে দিতে হয়, নয়তো IE6 এ তা ভালভাবে প্রদর্শিত নাও হতে পারে।
Vertical বা উলম্ব ন্যাভিগেশন বার সম্পর্কে আরও ভালভাবে জানার জন্য আমাদের Vertical ন্যাভিগেশন মেনু টেমপ্লেটগুলো দেখুন। Vertical ন্যাভিগেশন টেমপ্লেট ডাউনলোড করতে আমাদের ফ্রী ন্যাভিগেশন টেম্পলেট ওয়েব পেজটি ব্রাউজ করুন।
আনুভূমিক বা Horizontal ন্যাভিগেশন বার সম্পর্কে আরও ভালভাবে জানার জন্য আমাদের Horizontal ন্যাভিগেশন মেনু টেমপ্লেটগুলো দেখুন। Horizontal ন্যাভিগেশন টেমপ্লেট ডাউনলোড করতে আমাদের ফ্রী ন্যাভিগেশন টেম্পলেট ওয়েব পেজটি ব্রাউজ করুন।
শেয়ার করুন
