सीएसएस में मेनू बनाना

इस पाठ में हम वेबसाइट मेनू बनाने का अभ्यास करेंगे। आइए उदाहरण के लिए निम्नलिखित मेनू बनाएं:

सबसे पहले हमें 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;
}