একটি ওয়েব পেজে ব্যবহারকারীকে সহজে পেজগুলির মধ্যে নেভিগেট করতে সহায়তা করতে একটি কার্যকরী নেভিগেশন মেনু ডিজাইন করা অত্যন্ত গুরুত্বপূর্ণ। XHTML-এ নেভিগেশন মেনু ডিজাইন করতে HTML-এর সাধারণ ট্যাগ ব্যবহার করা হয়, তবে XHTML-এর ক্ষেত্রে কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়, যেমন প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করা এবং কেস-সেনসিটিভ ট্যাগ ব্যবহার করা। এখানে একটি সাধারণ নেভিগেশন মেনু ডিজাইন করার প্রক্রিয়া তুলে ধরা হলো।
১. মৌলিক নেভিগেশন মেনুর গঠন
একটি সাধারণ নেভিগেশন মেনু সাধারণত একটি unordered list (<ul>) ব্যবহার করে তৈরি করা হয়, যেখানে প্রতিটি মেনু আইটেম একটি list item (<li>) হিসেবে থাকে এবং প্রতিটি আইটেমে একটি anchor tag (<a>) থাকে। এটি XHTML-এ সঠিকভাবে তৈরি করতে, আমাদের কিছু বিশেষ নিয়ম মেনে চলতে হবে, যেমন:
- প্রতিটি ট্যাগকে সঠিকভাবে বন্ধ করতে হবে।
- HTML অ্যাট্রিবিউটগুলোর মান অবশ্যই কোটেশনে থাকতে হবে।
- ট্যাগগুলো কেস-সেনসিটিভ থাকতে হবে।
নিচে একটি মৌলিক নেভিগেশন মেনুর উদাহরণ দেওয়া হলো।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style type="text/css">
/* মেনু স্টাইল */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.nav li {
float: left;
}
ul.nav li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li><a href="services.xhtml">Services</a></li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
<p>Content of the website goes here.</p>
</body>
</html>
২. উপাদানগুলির ব্যাখ্যা
২.1 <ul> (Unordered List)
এটি একটি unordered list যা নেভিগেশন মেনুর আইটেমগুলোকে রাখে। XHTML-এ এর জন্য <ul> ট্যাগ ব্যবহার করা হয়, এবং এর মধ্যে <li> (list item) ট্যাগগুলি থাকে।
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li><a href="services.xhtml">Services</a></li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
২.2 <li> (List Item)
প্রতিটি মেনু আইটেম একটি list item (<li>) ট্যাগের মধ্যে থাকবে। এটি একটি আইটেমের প্রতিনিধিত্ব করে যা ব্যবহারকারীর ক্লিকের জন্য উপলব্ধ।
<li><a href="index.xhtml">Home</a></li>
২.3 <a> (Anchor Tag)
এটি লিঙ্ক তৈরির জন্য ব্যবহৃত হয়, যা প্রতিটি মেনু আইটেমে যুক্ত থাকে। এই ট্যাগে href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য নির্ধারণ করে।
<a href="index.xhtml">Home</a>
২.4 CSS স্টাইলিং
এখানে CSS ব্যবহার করা হয়েছে যাতে মেনুটি দেখতে সুন্দর এবং ব্যবহারযোগ্য হয়। যেমন:
ul.navদিয়ে মেনুর তালিকাকে স্টাইল করা হয়েছে, যাতে কোনো বুলেট পয়েন্ট না থাকে।ul.nav li aদিয়ে লিঙ্কগুলোকে স্টাইল করা হয়েছে, যাতে মেনু আইটেমগুলি ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হয়।ul.nav li a:hoverদিয়ে মাউস হোভার করলে মেনু আইটেমের ব্যাকগ্রাউন্ড রঙ পরিবর্তন হয়।
৩. নেভিগেশন মেনুর উন্নত ডিজাইন
একটি উন্নত নেভিগেশন মেনু তৈরি করতে আপনি সিএসএস ব্যবহার করে বিভিন্ন স্টাইলিং ফিচার যুক্ত করতে পারেন, যেমন ড্রপডাউন মেনু, রেসপন্সিভ ডিজাইন, এবং ইন্টারেক্টিভ ইফেক্ট। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে ড্রপডাউন মেনু ব্যবহার করা হয়েছে।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Advanced Navigation Menu</title>
<style type="text/css">
/* মেনু স্টাইল */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.nav li {
float: left;
position: relative;
}
ul.nav li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #111;
}
/* ড্রপডাউন মেনু স্টাইল */
ul.nav li ul {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #333;
min-width: 160px;
}
ul.nav li:hover > ul {
display: block;
}
ul.nav li ul li {
float: none;
}
ul.nav li ul li a {
padding: 12px 16px;
}
ul.nav li ul li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>Welcome to My Advanced Website</h1>
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="webdesign.xhtml">Web Design</a></li>
<li><a href="seo.xhtml">SEO Services</a></li>
<li><a href="digitalmarketing.xhtml">Digital Marketing</a></li>
</ul>
</li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
<p>Content of the website goes here.</p>
</body>
</html>
XHTML-এ নেভিগেশন মেনু ডিজাইন করার জন্য HTML-এর মৌলিক ট্যাগ এবং CSS ব্যবহার করা হয়। আপনি উপরের উদাহরণগুলোর মাধ্যমে একটি সাদাসিধে এবং উন্নত নেভিগেশন মেনু ডিজাইন করতে পারেন। XHTML-এর ক্ষেত্রে, প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করা এবং কেস-সেনসিটিভ হওয়া অত্যন্ত গুরুত্বপূর্ণ। এছাড়াও, CSS-এর মাধ্যমে মেনু আইটেমগুলোর স্টাইলিং করা হয়, যা ইউজার অভিজ্ঞতাকে উন্নত করে।
Read more
