Izvēlnes izveide CSS
Šajā nodarbībā mēs praktizēsimies izveidot vietņu izvēlnes. Izveidosim, piemēram, šādu izvēlni:
Vispirms mums jāizveido HTML daļa. Izveidosim div, ievietojot tajā mūsu izvēlnes saites:
<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>
Kā redzat paraugā, viena no izvēlnes saitēm
ir izcelta. Tā simbolizē to, ka
mēs atrodamies vietnes lapā, kas atbilst
šim izvēlnes punktam. Šādas lapas parasti
izceļ ar klasi 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>
Tagad novietosim mūsu saites rindā:
#menu {
display: flex;
}
Uzrakstīsim mūsu saišu stilus:
#menu a {
margin-right: 5px;
padding: 10px;
font: 15px Arial;
text-decoration: none;
color: #1437AD;
border: 1px solid #1437AD;
background-color: white;
}
Izveidosim saišu reakciju uz novietošanu ar peles kursoru:
#menu a:hover {
color: blue;
border: 1px solid blue;
background-color: #F5F6FA;
}
Aktīvās saites izskats sakrīt ar saites izskatu uz novietošanu. Apvienosim šos stilus kopā:
#menu a:hover, #menu a.active {
color: blue;
border: 1px solid blue;
background-color: #F5F6FA;
}
Saliksim kodu kopā un iegūsim kodu mūsu izvēlnei:
<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;
}