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ň:

html<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:

html<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ň:

css#menu {
  display: flex;
}

Baglanyşyklarymyzyň stillerini ýazalyň:

css#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ň:

css#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ň:

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

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

html<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>

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