Demo 5 - Kalatori: navigaatio
- Kalatori-sivuston seuraavana osana toteutetaan "nav"-osio
- Lisää kalatori-sivuston kansioon nav.html ja nav.css
- Linkitä nav.css luotuun html tiedostoon
<![CDATA[
html_css_basics
|
├── demos
| |
│ └── d5_kalatori
| |
│ ├── nav.html
│ ├── nav.css
| |
│ ├─── img
│ │ ├── kuva_1.jpg
│ │ └── kuva_2.jpg
| |
│ └─── js
│ ├── script_1.js
| └── script_2.js
|
]]>
Navigaatio on tämän projektin tärkein osa.
Hyvin toteutettuna siitä saattaa olla apua myös tulevissa harrastus/kouluprojekteissa.
Teoria
- HTML navigaatio toteutetaan usein linkkilistana
- <![CDATA[ul]]> > <![CDATA[li]]> > <![CDATA[a]]>
- [unordered list] > [list item] > [anchor]
Case 1: Suhteellinen linkki
Navigaation linkki (a href=) voi viitata suhteellisella linkillä samassa hakemistossa olevaan kansioon tai tiedostoon
- a href=”img/kuva.jpg” (avaa kuvan kuva.jpg)
- a href=”sivut/sivu.html” (avaa tiedoston sivu.html)
- a href= ”sivut/” (toimii vain, jos sivut-kansiossa on index.html niminen tiedosto, joka näytetään oletuksena)
- index.html tiedostoja voi siis olla useita samassa projektissa, kunhan jokainen on omassa kansiossaan
Pohdi: Minkä nimisen tiedoston selain näyttää, kun menet osoitteeseen https://www.tredu.fi/
Entä jos menet osoitteeseen https://www.tredu.fi/koulutukset/
Case 2: Absoluuttinen linkki
Linkki voi viitata ulkoiseen sivuun
- a href=”https://www.w3schools.com/” (avaa w3schools etusivun)
- Ulkoiselle sivulle viitatessa on hyvä käyttää target=”_blank” lisämäärettä, jotta linkki aukeaa uuteen välilehteen
Case 3: Ankkurilinkki
<![CDATA[
<a href="#kohde">Ankkurilinkki</a>
<section id="kohde">Lorem ipsum...</section>
]]>
Tehtävä
- Toteuta navigaatio, jossa linkit (ankkurilinkkejä) ovat vierekkäin
- Käytä nav -tagia (Semanttinen)
vertaa: div (Ei-semanttinen)
- Lisää kalatorin logo (svg kuva alla)
- Tee logosta myös klikattava linkki
- Asemoi logo vasemmalle ja linkit oikealle
- Saat navigaation logon ja muut linkit helpommin tasattua eri päätyihin,
kun logo ei ole listaelementin <![CDATA[<ul></ul>]]> sisällä.
- Kokeile lisätä linkeille CSS :hover pseudo,
joka vaihtaa linkin taustavärin kun käyttäjä vie hiiren linkin päälle
<![CDATA[Kalatori (#kalatori)
Markkinat (#markkinat)
Hinnasto (#hinnasto)
Ota yhteyttä (#yhteys)
Sijainti (#sijainti)
]]>
Käytettävyysasiaa
- Navin tulee pysyä aina näkyvissä sivun ylälaidassa, vaikka käyttäjä rullaa sivua alaspäin.
Voit testata rullausta lisäämässä Lorem ipsum täytetekstiä sivulle ja rajoittaa p tagin leveyden max-width
- Huomioi ettei nav saa peittää sivuston tekstiä, kun scrolli on täysin yläpäässä
- Vasta alemmas rullatessa nav peittää osan tesktistä alleen
- Tekstin piiloutumisen navin alle voi estää lisäämällä tekstille tai tekstiä sisältävälle elementille CSS:llä
margin-top: 50px; tai jokin muu mittayksikkö.
Responsiivisuus
- Kapealla näytöllä esim. puhelimella, kaikki linkit eivät mahdu vierekkäin
- Tarkkailemalla ikkunan leveyttä, voidaan käyttäjälle tarjota vaihtoehtoinen näkymä tietyn leveyden alittuessa
- Tämän voi toteuttaa CSS Media Query:llä
- Hampurilaisvalikon saa tehtyä Checkbox Hack:lla, joka perustuu näkymättömään checkbox-valintalaatikkoelementtiin.
Valintalaatikolla on CSS :checked -pseudo sekä sen prusteella muuttuva ::before selektori, joka vaihtaa kuvakkeen x / ≡ riippuen onko laatikko valittu vai ei
