আপনারা যারা এ টিউনটি পড়ছেন এদের মধ্যে এমন কাউকে পাওয়া যাবে না যে গুগলের কোন না কোন সেবা গ্রহন করেন নাই। আর তাই গুগলের মেনুবার আপনাদের কাছে অপরিচিত হওয়ার কথা না। গুগলের অধিকাংশ ওয়েবসাইটে এ ধরনের মেনু বার ব্যেবহার করা হয়।

লাইভ ভিউ দেখতে চাইলে এ লিঙ্ক এ ক্লিক করুন। আজ আমি css ব্যেবহার করে এ মেনু কিভাবে করা যায় তা শেয়ার করব।

যেকোন মেনুবার তৈরি করার সবথেকে সহজ পদ্ধতি হল আনঅরডার লিস্ট ( <ul><li> </li></ul> লিস্ট) করে পরে একে css ব্যেবহার করে মেনুবারে রূপান্তরিত করা।  এভাবে মেনু করলে আপনার পরবর্তি সময়ে মেনুটিকে পরিবর্তন করতে চাইলে ( মেনুতে একটি নতুন লিঙ্ক যোগ করা বা বাদ দেওয়া ) তা করা সহজ হবে।

প্রথমে আপনি আপনার HTML অংশে যে div বা অংশে যেখানে মেনুটি করতে চান সেখানে আনঅরডার লিস্ট (<ul><li>) আকারে নিচের কোড এর মত করে আপনার মেনুতে যে যে পাতার লিঙ্ক রাখতে চান তা লিখুন।

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Picture</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

কোন css এর কোড না থাকলে এটি দেখতে অনেকটা এ রকম হবে।

• Home
• About Us
• Picture
• Blog
• Contact

এখানে নতুন কোন মেনু আইটেম যোগ করতে চাইলে শুধু <ul>   </ul> টেগ এ ভিতরে আপনাকে একটা  <li><a href="#">Contact</a></li> লাইন দিতে হবে। এখানে <a href="লিঙ্ক এখানে যাবে "> পাতার নাম এখানে লিখবেন </a> হল নতুন পাতার লিঙ্ক।

এবার আপনাকে css ব্যেবহার করে একে গুগল এর মেনুতে পরিবর্তিত করতে হবে।

css দিয়ে কিভাবে HTML কে টার্গেট করতে হয় তা আপনার না জানা থাকলে আপনি গুগল করলে জানতে পারবেন। এ নিয়ে আমি অন্যদিন লিখব।

এটি একটা লিস্ট তাই এর প্রতিটি লিঙ্ক এর সামনে একটা করে বুলেট পয়েন্ট আছে। মেনুটিকে সুন্দর করতে চাইলে আপনাকে এটি উঠিয়ে দিতে হবে। এর জন্য আপনি list-style: none; কোডটি এখানে যুক্ত করুন।

ul li {

list-style: none;

}

এরপর মেনুটির প্রতিটি লিঙ্ক এর লাইনকে টার্গেট করতে হবে , এটি বর্তমানে নিচে নিচে আছে এখান থেকে একে পাশাপাশি অবস্থায় নিয়ে যেতে হবে। এটি করার সব থেকে সহজ পদ্ধতি হল float করা। আপনাকে এ লিস্টটিকে left অথবা right এ float করতে হবে। css টার্গেট সম্বন্ধে আপনার ধারনা থেকে থাকলে আপনি ধরতে পারছেন এর জন্য আমার css কোডটি এ রকম হবে।

ul li a{

float: left;

}

এখানে ul li a দিয়ে টার্গেট করাতে এখানে সবকয়টা লিঙ্ক এ css style টি পাবে। এ কারনেই মেনুবার তৈরি করার সময় আমরা  <ul><li>  লিস্ট ব্যেবহার করি।

এর পর এ কোডটি আপনার ul li a এ css style টিতে যোগ করুন

text-decoration: none;

color: #666;

padding: 6px 15px;

border: 1px solid #CCC;

background-image: -moz-linear-gradient(-90deg,#f4f4f4 ,#f1f1f1););

margin-right: -1px;

এটি দেখতে এ রকম হবে।

ul li a {

float: left;

text-decoration: none;

color: #666;

padding: 6px 15px;

border: 1px solid #CCC;

background-image: -moz-linear-gradient(-90deg,#f4f4f4 ,#f1f1f1););

margin-right: -1px;

}

এখানে  text-decoration: none; এর কাজ হল আপনার লিঙ্ক এর নিচের লাইনটাকে উঠিয়ে দেওয়া।

color: #666; হল আপনার ফন্ট এর রঙ এর কোড।

padding: 6px 15px; এ কোডটি দিয়ে আপনি আপনার মেনুর লিঙ্কটির ক্লিক করার যায়গা বাড়িয়ে নিচ্ছেন। প্রথমে আপনি শুরু লেখাটির উপরে ক্লিক করতে পারতেন এখন এর বাইলে উপরে ও নিচে 6px ও বামে ও ডানে 15px পর্যন্ত আপনি ক্লিক করলে এটি লিঙ্ক হিসাবে কাজ করবে। এখানে 6px 15px এর অর্থ হল উপরে ও নিচে 6px ও বামে ও ডানে 15px। আপনি চাইলে একে  padding:6px 15px 6px 15px; এভাবেও লিখতে পারেন  এখানে 6px 15px 6px 15px হল যথাক্রমে উপর ডান নিচ ও বামের মান ।

border: 1px solid #CCC; এ কোডটি দিয়ে আপনি প্রতিটি লিঙ্ক এর বাইরে চারদিকে একটি border দিচ্ছেন। এখানে 1px হল border এর চওড়া, solid হল border এর প্রকার এবং #CCC হল border এর রঙ।

background-color: #F7F7F7; এর মানে হল লিঙ্ক এর পিছনের রঙ #F7F7F7;  আপনি এ রঙ পরিবর্তে ছবি অথবা gradient ব্যেবহার করতে পারেন।

margin-right: -1px; এটি হল আপনার একটি মেনু হতে অন্য মেনুর পাশাপাশি দূরত্ত্ব । এখানে প্রতিটি মেনুর চারদিকে 1px করে border আছে তাই দুটি মেনু পাশাপাশি থাকলে এর মাঝের border টি 2px হয়ে যায়। মাঝের border টি তখন 2px হয়ে যায়।এটি তখন এ রকম দেখা যায়।

এ কারনে আমি margin-right এর মান -1px দিয়েছি। অর্থাৎ 1px ডান পাশে এটি একটি আর একটির উপরে উঠে থাকবে । এটি আরো অনেকভাবে করা যায় এটি আমার কাছে সহজ মনে হয়েছে।  আপনি চাইলে এর মান positive করে একটি থেকে আর একটিকে দূরে সরিয়ে দিতে পারেন। margin-right: 10px; করলে আপনি একটা মেনু লিঙ্ক থেকে অন্যটিকে 10px দূরে সরিয়ে দিবেন। এটি দেখতে তখন এ রকম হবে।

আপনি প্রতিটি মেনুর সাইজ এক করতে চাইলে এখানে width এ একটি fixed value দিয়ে দিতে পারেন।

এর পর এ কোডটি যোগ করুন

ul li a:hover {

background-color: #EEEEEE;

border: 1px solid #C5C5C5;

box-shadow: 0px 0px 2px #CCC;

}

এখানে ul li a:hover এর :hover এর মানে হল মেনুটি যদি hover স্টেট এ থাকে তবে এর  style  এটি হবে। hover স্টেট এর মানে হল এর উপরে মাউস নিয়ে গেলে যা হবে।

এখানে background color পরিবর্তন করা হবে border এর রঙ। এবং box shadow যোগ করা হবে।

box-shadow: 0px 0px 2px #CCC; এখানে box shadow 0px 0px 2px #CCC এ 0px 0px হল অফসেট 2px হল সেচুরেশন #CCC হল রঙ।

0px 0px এর বদলে যদি 2px 2px দেন তবে box shadow ডান ও নিচে 2px যায়গা নিয়ে হবে। -2px -2px দেন তবে box shadow উপরে ও ডানে 2px যায়গা নিয়ে হবে।

HTML একসাথে

<div id="nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Picture</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<ul> ট্যেগ এর আগে <div id="nav"> ও  </ul> ট্যেগ এর পর </div> যোগ করে একে nav আইডির একটি div  এ নিয়ে নেওয়া হয়েছে।

সকল css  style একসাথে

#nav {

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 12px;

}

#nav ul{

margin: 0px;

padding: 0px;

}

#nav ul li {

list-style: none;

}

#nav ul li a {

float: left;

text-decoration: none;

color: #666;

padding: 6px 15px;

border: 1px solid #CCC;

background-color: #F7F7F7;

margin-right: -1px;

}

#nav ul li a:hover {

background-color: #EEEEEE;

border: 1px solid #C5C5C5;

box-shadow: 0px 0px 2px #CCC;

}

এখানে প্রতিটি css rule এর আগে #nav আছে এটি হল আপনার HTML এ আপনার মেনুর div এর id.

#nav {

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 12px;

}

নতুন এ css rule টিতে nav আইডির পোরা div এর জন্য ফন্ট Arial ব্যেবহার করা হয়েছে। গুগল এ ফন্ট ব্যেবহার করে। font weight এখানে normal ও font-size  12px রাখা হয়েছে।

#nav ul{

margin: 0px;

padding: 0px;

}

নতুন এ css rule টিতে  margin: 0px,  padding: 0px আনঅরডার লিস্টির margin ও padding শূন্য করে দেওয়া হয়েছে। এটি css reset এর একটি বিষয় এ নিয়ে আমি আর এক দিন লিখব।

আমার css নিয়ে লিখতে ইচ্ছা হয় কিন্তু ব্লগ পোষ্ট লেখার অভ্যাস নাই এ কারনে লিখা হয় না ।  আপনাদের বুঝতে অসুবিধা হলে জানাবেন, আপনি চেস্টা করব সাহায্য করার।

লাইভ ভিউ দেখতে চাইলে এ লিঙ্ক এ ক্লিক করুন।