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