CSS-এ মেনু তৈরি করা

এই পাঠে আমরা ওয়েবসাইট মেনু তৈরি করার অনুশীলন করব। উদাহরণ হিসাবে নিচের মেনুটি তৈরি করি:

প্রথমে আমাদের HTML অংশ তৈরি করতে হবে। একটি div তৈরি করি এবং তার ভিতরে আমাদের মেনুর লিঙ্কগুলি রাখি:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

আপনি নমুনায় দেখতে পাচ্ছেন, মেনুর একটি লিঙ্ক হাইলাইট করা হয়েছে। এটি নির্দেশ করে যে আমরা ওয়েবসাইটের সেই পৃষ্ঠায় আছি যা এই মেনু আইটেমের সাথে সম্পর্কিত। এই ধরনের পৃষ্ঠাগুলি সাধারণত active ক্লাস ব্যবহার করে হাইলাইট করা হয়:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#" class="active">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

এখন আমাদের লিঙ্কগুলিকে একটি সারিতে সাজাই:

#menu {
	display: flex;
}

আমাদের লিঙ্কগুলির স্টাইল লিখি:

#menu a {
	margin-right: 5px;
	padding: 10px;
	font: 15px Arial;
	text-decoration: none;
	color: #1437AD;
	border: 1px solid #1437AD;
	background-color: white;
}

লিঙ্কগুলিতে হোভার时的 প্রতিক্রিয়া তৈরি করি:

#menu a:hover {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}

সক্রিয় লিঙ্কের চেহারা হোভার করা লিঙ্কের মতোই। আসুন এই স্টাইলগুলি একত্রিত করি:

#menu a:hover, #menu a.active {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}

কোডটি একত্রিত করি এবং আমাদের মেনুর জন্য কোড পাই:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#" class="active">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

#menu {
	display: flex;
}
#menu a {
	margin-right: 5px;
	padding: 10px;
	font: 15px Arial;
	text-decoration: none;
	color: #1437AD;
	border: 1px solid #1437AD;
	background-color: white;
}
#menu a:hover, #menu a.active {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}