Navigointi, www-sivustolla liikkuminen

Menu on tarkoitettu www-sivulla sekä www-sivustolla liikkumiseen. Aluksi esitellään lista-elementti jonka pohjalta esimerkeistä rakentuu erillisissä luvuissa esitellyt vertikaali- sekä horinsontaali-menut.

1. Lähtökohtana lista:

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin listan HTML-koodaus:


  <ul>
   <li><a href="#index"> Etusivu </a></li>
   <li><a href="#sivu1"> Sivu 1  </a></li>
   <li><a href="#sivu2"> Sivu 2  </a></li>
   <li><a href="#sivu3"> Sivu 3  </a></li>
  </ul>

Lista koostuu tarvittavista lista-elementeistä ja listalla näytettävistä teksteistä. Lisäksi listaan on lisätty linkki-elementit ja href-määritteet sekä näihin suunniteltujen sivujen tiedostojen nimet.

2. Poistetaan listan sanojen edestä "pallot":

Listan HTML-koodaus pysyy edelleen samana kuin yläpuolella kohdassa 1. Tämä tehdään CSS-ohjeella.

Tarvittava CSS-ohje:


  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

3. Näytetään listan li-elementit lohkona ja asetetaan lohkoille taustaväri:

Edelleen HTML-koodaus sama. Listään li- ja a-elementille CSS-ohjeet sekä ul-elementille leveys-ohje.

CSS-ohjeet:


  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	width: 80px;
  }
  li a {
    display: block;
    background-color: #DDDDDD;
  }

Vertikaali-Menu

Lisäämällä hiukan lisää aiemmin esillä olleisiin CSS-ohjeita saadaan hieman siistimpi menu.

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkki-menun CSS-ohjeista:

menu:n CSS-ohjeille on itse keksitty nimi, omamenu
omamenu-nimi liitetään ohjeisiin .omamenu määritteellä CSS-ohjeisiin
omamenu liitetään HTML-koodauksessa lista-elementteihin div-elementin class-määritteellä
ul-elementin leveyttä on suurennettu 200 pikseliin ja asetettu taustaväri RGB-arvolla
li- sekä a-elementeille ohjeissa, tekstinväri valkoinen, tyhjää tilaa (padding) ympärille ja linkki-tekstin alleviivaus pois (text-decoration)
Uusi ohje, li- ja a-elementeille värit kun hiiren osoitin on menu:n linkkien kohdalla (hover)

Esimerkin koodaus:


  CSS-ohjeet
  
  .omamenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: RGB(102, 153, 153);
  }
  .omamenu li a {
    display: block;
    color: WHITE;
    padding: 8px 16px;
    text-decoration: none;
  }
  .omamenu li a:hover {
    background-color: RGB(209, 224, 224);
    color: BLACK;
  }
  
  HTML-koodaus
    
  <div class="omamenu">
   <ul>
    <li><a href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Aktiivinen tai ei aktiivinen www-sivu

Toisinaan on hyvä menu:lla näyttää www-sivustoa lukevalla mitä sivua hän lukee, eli mikä www-sivu on avoinna selaimessa. Tämän voi esittää menu:n active-väreillä sekä pienellä hover-asetusmuutoksilla.

Esimerkissä edelle esitettyä menu:a on hieman muokattu, tässä Sivu 1 ilmoitetaan olevan selaimessa avoinna.

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin koodaus:


  CSS-ohjeet
  
  .omamenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: RGB(102, 153, 153);
  }
  .omamenu li a {
    display: block;
    color: WHITE;
    padding: 8px 16px;
    text-decoration: none;
  }
  .omamenu li a.active {
    background-color: RGB(198, 83, 140);
    color: white;
  }
  .omamenu li a:hover:not(.active) {
    background-color: RGB(209, 224, 224);
    color: BLACK;
  }
  
  HTML-koodaus
    
  <div class="omamenu">
   <ul>
    <li><a href="#index"> Etusivu </a></li>
    <li><a class="active" href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Menu:n viivat ja tekstin keskittäminen

Menu-"painikkeiden" ympärille voidaan asettaa viivat sekä tekstit keskittää.

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin koodaus:


  CSS-ohjeet
  
  .omamenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: RGB(102, 153, 153);
    border: 1px solid RGB(255, 0, 102);  /**Lisäys, koko menun ympärille viiva**/
  }
  .omamenu li a {
    display: block;
    color: WHITE;
    padding: 8px 16px;
    text-decoration: none;
  }
  .omamenu li {               /**Lisäys (koko ohje), "painikkeiden" alaviiva**/
    text-align: center;
    border-bottom: 1px solid RGB(255, 0, 102);
  }
  .omamenu li:last-child {    /**Lisäys (koko ohje), ei alimmaiselle painikkeelle**/
    border-bottom: none;
  }
  .omamenu li a.active {
    background-color: RGB(198, 83, 140);
    color: white;
  }
  .omamenu li a:hover:not(.active) {
    background-color: RGB(209, 224, 224);
    color: BLACK;
  }
  
  HTML-koodaus
    
  <div class="omamenu">
   <ul>
    <li><a href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a class="active" href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Koko sivun sisällön korkuinen menu

Horisontaalinen menu voidaan koodata koko www-sivun korkuiseksi, eli menu:n korkeus kasvaa muuttuu varsinaisen sisällön mukaan. Tämä esimerkki sekä sen koodaukset avautuvat alla olevista linkeistä. Vasemman reunan menu pysyy paikoillaan liikuteltaessa www-sivun sisältöä, tämän tehdään ul-elementille CSS-ohjeella position: fixed;.

Katso esimerkkisivu

Katso esimerkkisivun HTML-koodaus

Horisontaali-Menu, vaihe 1

Horisontaali-menu sijaitsee www-sivun yläosassa vaakatasossa. Esimerkeissä rakennetaan menu pala kerrallaan.

Aluksi tuttu lista jolle muutama CSS-ohje, joista CSS-ohjeella display: inline; li-elementin tekstit asetetaan vaakatasoon peräkkäin.

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin koodaus:


  CSS-ohjeet
  
  .horisontti1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .horisontti1 li {
   display: inline;
  }
  .horisontti1 li a {
   color: GREEN;
   font-weight: bold;
  }
  
  HTML-koodaus
    
  <div class="horisontti1">
   <ul>
    <li><a href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Horisontaali-menu, vaihe 2

Esimerkki-menun CSS-ohjeista:

horisonttaali menu:n CSS-ohjeiden nimi on horisontti2
horisontti2-ohje liitetään menu-elementtin div-elementin avulla
overflow: hidden ohjeella estetaan linkkitekstit pysymään "painikkeen" sisällä
float: left ohje sijoittaa li-elementit vasemmalle ja rinnakkain
display: block ohje näyttää li-elementit erillisinä lohkoina ("painikkeina)")
background-color: #dddddd asettaa ul-elementille taustavärin sekä menu:n leveydeksi koko sen leveyden mihin menu on sijoitettu

Esimerkki:

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin koodaus:


  CSS-ohjeet
  
  .horisontti2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #dddddd;	
  }
  .horisontti2 li {
    float: left;
  }
  .horisontti2 li a {
    display: block;
    padding: 8px;
    color: GREEN;
    font-weight: bold;
  }
  
  HTML-koodaus
    
  <div class="horisontti2">
   <ul>
    <li><a href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Horisontaali-menu, vaihe 3

Esimerkki-menun CSS-ohjeista:

menu:n CSS-ohjeiden nimi on horisontti3
horisontti3-ohje liitetään menu-elementtin div-elementin avulla
.horisontti3 li a:hover:not(.avoin) väri kun hiirtä liikutetaan menu:ssa
.horisontti3 .avoin väri selaimessa avoimen www-sivun ilmaisemiseen menu:n avulla.
Muista ! Sivuston www-sivujen koodauksissa on li-elmentissä linkki-elementissä class="avoin" siirrettävä oikean html-linkin kohdalle

Esimerkki:

Etusivu
Sivu 1
Sivu 2
Sivu 3

Esimerkin koodaus:


  CSS-ohjeet
  
  .horisontti3 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: MAROON;
  }
  .horisontti3 li {
    float: left;
  }
  .horisontti3 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .horisontti3 li a:hover:not(.avoin) {
    background-color: RGB(204, 0, 0);
  }
  .horisontti3 .avoin {
    background-color: rgb(230, 0, 115);
  }
  
  HTML-koodaus
    
  <div class="horisontti3">
   <ul>
    <li><a class="avoin" href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
   </ul>
  </div>

Linkki oikeassa reunassa, horisontaali-menu

Esimerkissä sijoitetaan Ota yhteyttä-linkki menu:n oikeaan reunaan. Linkki sijoitetaan HTML-koodauksen alimmaiseksi li-elementiksi.

Etusivu
Sivu 1
Sivu 2
Sivu 3
Ota yhteyttä

Esimerkin koodaus:


  HTML-koodaus
    
  <div class="horisontti3">
   <ul>
    <li><a class="avoin" href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
	<li style="float:right"><a href="#sivu4"> Ota yhteyttä </a></li>
   </ul>
  </div>

Linkkien reunaviiva, horisontaali-menu

Esimerkissä sijoitetaan menu:n oikeaan reunaan Ota yhteyttä-linkki. Linkki sijoitetaan HTML-koodauksen alimmaiseksi li-elementiksi. Alla tarvittavat CSS-ohje lisäykset:

.horisontti4 li-ohjeeseen lisätään border-right:1px solid YELLOW eli keltainen viiva oikealle
lisätään uusi ohje .horisontti4 li:last-child ja sille asetus border-right: none eli lopettaa viivojen "piirtämisen"

Esimerkki:

Etusivu
Sivu 1
Sivu 2
Sivu 3
Ota yhteyttä

Esimerkin koodaus:


  .horisontti4 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: MAROON;
  }
  .horisontti4 li {
    float: left;
    border-right:1px solid YELLOW;
  }
  .horisontti4 li:last-child {
    border-right: none;
  }
  .horisontti4 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .horisontti4 li a:hover:not(.avoin) {
    background-color: RGB(204, 0, 0);
  }
  .horisontti4 .avoin {
    background-color: RGB(230, 0, 115);
  }
  
  HTML-koodaus
    
  <div class="horisontti4">
   <ul>
    <li><a class="avoin" href="#index"> Etusivu </a></li>
    <li><a href="#sivu1"> Sivu 1 </a></li>
    <li><a href="#sivu2"> Sivu 2 </a></li>
    <li><a href="#sivu3"> Sivu 3 </a></li>
	<li style="float:right"><a href="#sivu4"> Ota yhteyttä </a></li>
   </ul>
  </div>

Menu:n "lukitseminen paikoilleen" näkyville

Esimerkissä menu jää selaimessa esille kun www-sivua selataan alaspäin. Kuvassa, header ja menu näkyy aluksi, siirrettäessä www-sivun alaosaa esille näkyy vain menu.

Tämä toteutetaan CSS-ohjeessa ul-elementin kohdalla seuraavilla:

position: -webkit-sticky; /* Safari */
position: sticky;

Huomaa tämä! Esimerkin menu-ohjeiden nimeämisessä voi olla vaikeuksia.

Katso esimerkkisivu

Katso esimerkkisivun HTML-koodaus

Responsiivinen menu

Responsiivinen tarkoittaa yleisesti www-sivun elementtien reagoimista laitteen näytön kokoon, tällöin esimerkiksi horisontaali-menu (kuvassa vasemmalla) muuttuu esimerkiksi mobiilissa automaattisesti vertikaali-menu:n tyyliseksi (kuvassa oikealla).

Huomaa tämä! Erilaiset CSS-ohjeet, meta-asetus HTML-koodauksen alussa head-elementissä:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esimerkissä (linkeissä) voi tutustua responsiivisen menu:n toimintaan ja koodaukseen:

Katso esimerkkisivu

Katso esimerkkisivun HTML-koodaus

Dropdown eli alavalikko

Dropdown tarkoittaa päämenu:sta alas aukeavaa valikkoa jolla voidaan toteuttaa siirtyminen suoraan www-sivun johonkin osaan.

Esimerkin www-sivun ja koodaukset(voi avata alla olevista linkeistä:

Katso esimerkkisivu

Katso esimerkkisivun HTML-koodaus

Navigointi- eli menu-generaattorit

Menu:n voi rakentaan myös generaattorilla joita on löydettävissä hakusanoilla CSS menu generator tai hankkia ilmainen tai maksullinen valmis menu-koodaus. Malliksi muutama.

cssportal.com - menu-generaattorin lisäksi muitakin generaattorita

cssmenubuilder.com - menu-generointi ja myös responsiivisuus

Pudotus- eli alavalikko ja soveltaminen muuhun tarkoitukseen

Oppaassa esiteltiin aiemmin menu:n eli navigoinnin alavalikko (dropdown), tässä osassa esitellään hieman soveltaen miten aiempaa voidaan soveltaa tekstissä, painikkeessa ja kuvassa.

Tekstistä avautuu teksti-laatikko

Esimerkissä siirtämällä hiiren osoitin tekstin kohdalle avautuu tekstin alle opasteteksti.

Hiiren osoitin tähän

Tässä voi olla opasteteksti

Esimerkin koodaus:


  .avaa1 {
    position: relative;
    display: inline-block;
  }
  .koroste{
    color: SLATEBLUE;
  }
  .avaa1-opaste1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  .avaa1:hover .avaa1-opaste1{
    display: block;
  }
  
  HTML-koodaus
    
  <div class="avaa1">
    <span class="koroste"> Hiiren osoitin tähän </span>
    <div class="avaa1-opaste1">
      <p> Tässä voi olla opasteteksti </p>
    </div>
  </div>

CSS-ohjeista esimerkissä:
position: relative; - suhteellinen sijainti
display: inline-block; - näytä tekstirivillä omana lohkona
display: block; - näytä omana lohkona, hiiren ollessa kohdalla "laatikkona"
position: absolute; - sijainti määritelty

Painikkeessa alamenu

Esimerkissä käytetään painikkeen tyylistä ratkaisua, siirtämällä hiiren osoitin painikkeen alueelle avautuu ns alamenu (dropdown menu). Tätä esimerkkiä voisi soveltaa www-sivun sisällä liikkumiseen, joidenkin toimintojen aktivoinnissa ja erilaisten tietojen tai kuvien näyttämisessä.

Sivu 1 Sivu 2 Sivu 3

Huomaa myös miten yllä olevan painikkeen avautuva osa sijoittuu tekstin päälle.

Esimerkin koodaus:


  .painikeX {
    background-color: SlateBlue;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  .alamenu {
    position: relative;
    display: inline-block;
  }
  .alamenu-linkit1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .alamenu-linkit1 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .alamenu-linkit1 a:hover {background-color: RGB(237, 235, 249)}
  .alamenu:hover .alamenu-linkit1 {
    display: block;
  }
  .alamenu:hover .painikeX {
    background-color: RGB(55, 42, 137);
  }
  
  HTML-koodaus
    
  <div class="alamenu">
    <button class="painikeX"> Siirry sivulle </button>
    <div class="alamenu-linkit1">
      <a href="#sivu1"> Sivu 1 </a>
      <a href="#sivu2"> Sivu 2 </a>
      <a href="#sivu3"> Sivu 3 </a>
    </div>
  </div>

Kuva avaa sisällön

Esimerkissä hiiren osoittimen siirtäminen kuvan päällä avaa alle kuvan suurempana ja siihen liittyvän tekstin.

Kuvan (yllä) paikalla voi sijoittaa videonkin

Esimerkin koodaus:


  CSS-ohjeet
  
  .kuva {
    position: relative;
    display: inline-block;
    box-shadow: 6px 6px 5px grey;
  }
  .kuva-sisalto {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
    .kuva:hover {
    box-shadow: 1px 1px 5px grey;
  }
    .kuva:hover .kuva-sisalto {
    display: block;
  }
  .keskitys {
    padding: 15px;
    text-align: center;
  }
  
  HTML-koodaus
    
  <div class="kuva">
    <img src="steamjuna.jpg" alt="Cinque Terre" width="100" height="50">
    <div class="kuva-sisalto">
      <img src="steamjuna.jpg" alt="Cinque Terre" width="300" height="200">
      <div class="keskitys"> Kuvan (yllä) paikalla voi sijoittaa videonkin </div>
    </div>
  </div>

KESKEN

CSS-opas, CSS - Sivustolla likkuminen

Navigointi, www-sivustolla liikkuminen

1. Lähtökohtana lista:

2. Poistetaan listan sanojen edestä "pallot":

3. Näytetään listan li-elementit lohkona ja asetetaan lohkoille taustaväri:

Vertikaali-Menu

Aktiivinen tai ei aktiivinen www-sivu

Menu:n viivat ja tekstin keskittäminen

Koko sivun sisällön korkuinen menu

Horisontaali-Menu, vaihe 1

Horisontaali-menu, vaihe 2

Horisontaali-menu, vaihe 3

Linkki oikeassa reunassa, horisontaali-menu

Linkkien reunaviiva, horisontaali-menu

Menu:n "lukitseminen paikoilleen" näkyville

Responsiivinen menu

Dropdown eli alavalikko

Navigointi- eli menu-generaattorit

Pudotus- eli alavalikko ja soveltaminen muuhun tarkoitukseen

Tekstistä avautuu teksti-laatikko

Painikkeessa alamenu

Kuva avaa sisällön