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;
}