সিএসএস – মেনু বার তৈরি করা

মেনুবার বা ন্যাভিগেশন বার আর কিছুই না, কত গুলো এইচটিএমএল লিঙ্ক এর সমষ্টি। তাই না? তাই আমরা প্রথমে কয়েকটা লিঙ্ক কে কিভাবে ন্যাভিগেশন মেনু তৈরি করতে পারি, তাই দেখব আস্তে আস্তে। শুরু করি নিচের কোড গুলো দিয়ে। যেখানে শুধু কয়েকটা লিঙ্ক রয়েছেঃ

<ul>
 	<li><a href="#home">Home</a></li>
 	<li><a href="#news">News</a></li>
 	<li><a href="#contact">Contact</a></li>
 	<li><a href="#about">About</a></li>
</ul>

ডামি/টেস্ট লিঙ্ক দেওয়ার জন্য সাধারনত # ব্যবহার করা হয়। উপরের কোড গুলো যদি আমরা ব্রাউজারে দেখি, লিস্ট স্টাইলটা দেখা যাবে। ডিফল্ট বুলেট। আমরা লিস্ট স্টাইলটা লুকিয়ে ফেলব প্রথমে। তার জন্য নিচের সিএসএস গুলো যুক্ত করবঃ

ul
{
list-style-type:none;
margin:0;
padding:0;
}

আর লিঙ্ক এর নিচের আন্ডারলাইনটা মুছে ফেলার জন্য আমরা ব্যবহার করবঃ text-decoration:none;
margin:0;padding:0; দিয়ে ব্রাউজারের ডিফল্ট অপশন গুলো রিসেট করা হয়েছে। আপাতত এটা নিয়ে না ভাবলেও চলবে। 

তাহলে সম্পুর্ন কোডটা দাড়ায়ঃ

<title></title>
<ul>
 	<li>
      <a href="#home">Home</a></li>
 	<li>
      <a href="#news">News</a></li>
 	<li>
      <a href="#contact">Contact</a></li>
 	<li>
      <a href="#about">About</a></li>
</ul>

আর একটা কোড লিখলেই কিন্তু আমাদের মেনু রেডি হয়ে যাবে, নিচের কোডটি যুক্ত করে দেখিঃ

li
{
display:inline;
}

সম্পুর্ণ কোডঃ

[html]

<style>
li<br />
{<br />
display:inline;<br />
}<br />
</style><title></title>
<ul>
 	<li>
      <a href="#home">Home</a></li>
 	<li>
      <a href="#news">News</a></li>
 	<li>
      <a href="#contact">Contact</a></li>
 	<li>
      <a href="#about">About</a></li>
</ul>

তৈরি হয়ে গেলো আমাদের মেনু। এখন দরকার একটু রঙ করা। তাই করি, তার জন্য নিচের কোডটি ব্রাউজারে দেখিঃ

<style> ul { list-style-type:none; margin:0; padding:0; } li{ float:left; } a:link { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#00A0D9; text-align:center; padding:4px; text-decoration:none; } a:hover { color:#000; background-color:#88B541; } </style>
<ul>
 	<li><a href="#home">Home</a></li>
 	<li><a href="#news">News</a></li>
 	<li><a href="#contact">Contact</a></li>
 	<li><a href="#about">About</a></li>
</ul>

এখানে আমরা a:link Pseudo-classes ব্যবহার করে লিঙ্কে কিছু স্টাইল দিয়েছি। প্রথমত দিয়েছি ব্যাকগ্রাউন্ড কালার। যা দেওয়া হয়েছেঃ background-color:#00A0D9; দিয়ে। আর লিঙ্ক এর টেক্সট এর কালার দেওয়া হয়েছে  color:#FFFFFF; দিয়ে। width:120px; দিয়ে দেওয়া হয়েছে প্রতিটি লিঙ্ক কত টুকু যায়গা দখল করবে। তা। এখানে প্রতিটি লিঙ্ক 120px যায়গা দখল করবে। text-align:center;padding:4px;text-decoration:none; এসবের কাজ তো আমরা ইতিমধ্যে বুঝে গেছি।

আরেকটা Pseudo-classes ব্যবহার করা হয়েছে। তা হচ্ছে যখন মাউস লিঙ্ক/ মেনু বারের লিঙ্কে নিবে তখন ব্যকগ্রাউন্ড কালার এবং রঙ পরিবর্তন হবে। তা দেওয়া হছেছে color:#000;background-color:#88B541; দিয়ে।

মেনু বার আরো অনেক ভাবেই করা যায়। অনেক সুন্দর ভাবে। এটা খুবই সাধারন একটা ন্যাভিগেশন মেনু।