CSS-de menýu döretmek

Bu sapakda biz web sahypalary üçin menýulary döretmekde öz praktikamyzy geçireris. Mysal üçin aşakdaky menýuny edeliň:

Başlangyçda biz HTML bölegini etmelidiris. Menýumyz üçin baglanyşyklary ýerleşdirýän bir div edeliň:

<div id="menu">
	<a href="#">baglanyşyk teksti 1</a>
	<a href="#">baglanyşyk teksti 2</a>
	<a href="#">baglanyşyk teksti 3</a>
	<a href="#">baglanyşyk teksti 4</a>
	<a href="#">baglanyşyk teksti 5</a>
</div>

Nusgada görşüňiz ýaly, menýunyň bir baglanyşygy üýtgeşik görkezilýär. Bu, biz şol menýu bölegine degişli sahypada ýerleşýändigimizi nygtamak üçindir. Şeýle sahypalary adatça active klassy bilen belläp görkezerler:

<div id="menu">
	<a href="#">baglanyşyk teksti 1</a>
	<a href="#" class="active">baglanyşyk teksti 2</a>
	<a href="#">baglanyşyk teksti 3</a>
	<a href="#">baglanyşyk teksti 4</a>
	<a href="#">baglanyşyk teksti 5</a>
</div>

Indi baglanyşyklarymyzy bir hatarda ýerleşdireliň:

#menu {
	display: flex;
}

Baglanyşyklarymyzyň stillerini ýazalyň:

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

Baglanyşyklaryň üstüne gelende täsirini edeliň:

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

Işjeň baglanyşygyň görnüşi, üstüne gelinende baglanyşygyň görnüşi bilen gabat gelýär. Bu stilleri bilelikde birleşdireliň:

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

Kody ýygnap, menýumyz üçin gerekli kody alalyň:

<div id="menu">
	<a href="#">baglanyşyk teksti 1</a>
	<a href="#" class="active">baglanyşyk teksti 2</a>
	<a href="#">baglanyşyk teksti 3</a>
	<a href="#">baglanyşyk teksti 4</a>
	<a href="#">baglanyşyk teksti 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;
}