CSS-те меню жасау
Бұл сабақта біз веб-сайттардың мәзірлерін жасауға жаттығамыз. Мысал ретінде келесі мәзірді жасайық:
Алдымен HTML бөлігін жасауымыз керек. Біз div жасап, оның ішінде мәзірimіздің сілтемелерін орналастырамыз:
<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>
Енді сілтемелерimізді бір қатарға орналастырайық:
#menu {
display: flex;
}
Сілтемелерimіздің стильдерін жазайық:
#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;
}
Кодты біріктіріп, мәзірimіз үшін код алайық:
<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;
}