HTML/CSS Välilehtivalikko

html_css_basics | ├── demos │ ├── ... │ └── d14 │ ├── index.html │ ├── style.css │ └── img │ └── *.jpg | gameplay

Lähde: Radio tabs on pure css by Mishko Vladimir codepen

Rakenne

Aloita tekemällä d14 kansion index.html ja style.css
Alusta index.html-tiedosto VS-Coden tarjoamalla HTML-pohjalla ja linkitä style.css headiin
Lisää bodyyn main-tagi, jonka sisälle muut tagit tulevat
Tee radiobutton-ryhmä, jossa on 4 kohtaa
Kullakin radiobuttonilla on input- ja siihen liitetty label-kenttä
Lisää kaikkiin radionappeihin sama name="tabs" -kenttä, jolloin ne liitetään samaan ryhmään
Sen sijaan id="tab1" kentän arvo on kullakin yksilöivä (tab1, tab2, tab3, tab4)
koska label-tagin for="tab1" kenttä liittää tekstin tiettyyn nappiin

Lisää radionappien jälkeen div kullekin välilehdelle, joilla on yksilöivä luokka
class="tab content1" (content1, content2, content3, content4)
Voit siis antaa useita classeja samale elementille

<input class="menubtn" type="radio" name="tabs" id="tab1"/> <label for="tab1">Gameplay</label> <input class="menubtn" type="radio" name="tabs" id="tab2"/> <label for="tab2">Gameplay</label> <div class="tab content1"> {div content 1} </div> <div class="tab content2"> {div content 2} </div>

input-kentillä on geneerinen luokka menubtn ja yksilöivä id tab{x}
Kaikilla sisältödiveillä on geneerinen luokka tab ja yksilöivä luokka content{x}
Ensin CSS:llä piilotetaan kaikki .tab luokan kentät
.tab { display: none; }
Sitten palautetaan valittuun välilehteen liittyvä sisältö:
#tab1:checked ~ .tab.content1{display: block;}

.tab { display: none; } #tab1:checked ~ .tab.content1, #tab2:checked ~ .tab.content2{ display: block; }

Sisältö

Gameplay

kohdan sisältö on toteutettu radionapeilla
Vaikeustasoa kuvaava kuva on tyhjä div jolla on luokka 'avatar'

CSS:llä voidaan tehdä muutoksia sisaruselementteihin, sen perusteella onko valintanappi/laatikko valittu
Yhdistetään siis checked ja siblin -selektorit:
#easy:checked ~ .avatar{...
CSS sisarus-selektori = General Sibling Selector
CSS :checked Selector

#easy:checked ~ .avatar{ background-image: url(img/lvl1.jpg); } #medium:checked ~ .avatar{ background-image: url(img/lvl2.jpg); } #hard:checked ~ .avatar{ background-image: url(img/lvl3.jpg); } gameplay

Controls

Välilehden sisältö on taulukossa
Näppäimet ovat input kenttiä, joilla on type="text"
Siten käyttäjä voi kirjoittaa kirjaimen tilalle toisen

Graphics / Display

Graphics välilehden sisältö on tehty select-tagilla
Select-tagin sisälle tulee useita option-kenttiä, joissa on resoluutiovaihtoehtoja
Lisää listan alle myös yksittäinen checkbox

Audio

Slider on tehty kentällä input type="range"
Lisää kaiuttimen kuva esim. font awesomesta