Úlohy

Úloha č.1 – Vytvorenie menu v hlavičke stránky

  1. Vytvoríme si nový projekt vytvorením novej zložky s názvom „cv_4“
  2. Vytvoríme nový základný HTML dokument index.html
  3. Vytvoríme prázdny CSS súbor s názvom „style.css“
  4. V tele dokumentu si vytvoríme element header, ktorý bude vykreslovať hlavičku stránky
    <header>
    
    </header>
  5. Do headra si vložíme značku nav, ktorá nám značí, že sa v nej nachádza navigácia na stránke
    <header>
        <nav>
        </nav>
    </header>
  6. V navigácií si vytvoríme neradený zoznam o veľkosti 5 položiek
    <header>
        <nav>
            <ul>
                <li>
                    <a href="http://facebook.com" target="_blank">Facebook</a>
                </li>
                <li>
                    <a href="http://9gag.com" target="_blank">9gag</a>
                </li>
                <li>
                    <a href="http://quora.com" target="_blank">Quora</a>
                </li>
                <li>
                    <a href="http://stackoverflow.com" target="_blank">stackoverflow</a>
                </li>
            </ul>
        </nav>
    </header>
  7. Stránku naštýlujeme tak, aby
    • telo stránky nevytváralo žiadne osadenie od okna prehliadača a  zmeníme mu typ písma
      body{
          margin: 0;
          font-family: sans-serif;
      }
    • hlavička stránky bola farebne odlíšená od zvyšku stránky
      header{
          background: #565f63;
      }
    • sa jednotlivé položky menu zobrazovali vedľa seba a boli zarovnané napravo
      ul{
          text-align: right;
          list-style: none;
          margin: 0;
          padding: 0;
          font-weight: bold;
          text-transform: uppercase; /* všetky slová sú veľkými písmenami */
      }
      
      li{
          display: inline-block; /* zobrazenie položiek zoznamu vedľa seba */
          margin: 0 20px;
      }
    • hlavičku stránky taktiež tzv. nafúkneme, aby sme nemali jej položky priamo nacucnuté na okraji stránky, ale pridali sme trochu vzdušnosti. Toto nafúknutie ale nepriradíme priamo hlavičke stránky, ale odkazom, ktoré sa nachádzajú v položkách zoznamu a to preto, aby sme zväčšili aktívnu plochu týchto odkazov.
      a{
          display: block;
          padding: 15px 0;
      }
    • položky menu boli farebne odlíšené a vzdialené od seba aspoň 20px
      a{
          text-decoration: none;
          color: #56f19c;
          display: block;
          padding: 15px 0;
          position: relative; /* špecifikujeme, že všetky elementy, ktoré sa v tejto značke nachádzajú budú mať pozíciu relatívnu k tejto značke */
      }
    • po nadídení kurzorom myši sa nám pod položkou menu postupne vysunie spodný rámček
      a{
          text-decoration: none;
          color: #56f19c;
          display: inline-block;
          padding: 15px 0;
          position: relative; /* špecifikujeme, že všetky elementy, ktoré sa v tejto značke nachádzajú budú mať pozíciu relatívnu k tejto značke */
      }
      
      a:after{ /* pocou deklarácie :after si vieme vytvoriť pseudoelement, ktorý sa nachádza ako posledný detský element v danej značke. V HTML štruktúre sa ale nenachádza a slúži výlučne na dizajnovanie */
          content: ""; /* pseudoznačka :after na to, aby sa zobrazila, potrebuje mať definovanú vlastnosť content. V tomto prípade nepotrebujeme, aby mala nejaký obsah, ale keďže ju chceme použiť musíme jej prideliť prázdny obsah */
          position: absolute; /* značí absolútnu pozíciu. Keďže nadradený element má relatívnu pozíciu, jej pozicionovanie je relatívne k značke a */
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0; /* výška pseudoelementu je 0px a preto nie je viditeľný aj keď tam je */
          transition: 0.3s; /* vlastnosť transition nám zabezpečí plynulý prechod medzi stavmi značky za 0.3 sekundy */
          background: #56f19c; /* zelená farba pozadia */
      }
      
      li:hover a:after{
          height: 3px; /* výška pseudoelementu je 3px vďaka čomu ho zviditeľníme po nadídení myši na značku a */
      }

Úloha č.2 – Vytvorenie dvojúrovňového menu

Na začiatku, keď si vytvoríme druhú úroveň menu pomocou HTML, tak sa nám zobrazuje trochu rozbito.

My avšak chceme, aby sa nám druhá úroveň postupne vyrolovala po nadídení myšou nad nadradený element.

Preto budeme postupovať nasledovne:

  1. Do už vytvoreného menu do 2 položiek vložíme vnorený nečíslovaný zoznam
    <ul>
        <li>
            <a href="http://facebook.com" target="_blank">Facebook</a>
        </li>
        <li>
            <a href="http://9gag.com" target="_blank">9gag</a>
            <ul>
                <li><a href="https://9gag.com/gag/a8oBpre" target="_blank">HTML + CSS</a></li>
                <li><a href="https://9gag.com/gag/aWqD6x6" target="_blank">Chuck Norris</a></li>
                <li><a href="https://9gag.com/gag/aEBbAoe" target="_blank">Tee of truth</a></li>
            </ul>
        </li>
        <li>
            <a href="http://quora.com" target="_blank">Quora</a>
        </li>
        <li>
            <a href="http://stackoverflow.com" target="_blank">stackoverflow</a>
            <ul>
                <li><a href="https://stackoverflow.com/questions/52571308/super-confused-over-section-and-article-elements" target="_blank">super confused over section and article elements</a></li>
                <li><a href="https://stackoverflow.com/questions/52570646/dividing-my-page-in-2-vertical-columns-html" target="_blank">Dividing my page in 2 vertical columns HTML</a></li>
                <li><a href="https://stackoverflow.com/questions/52570566/float-a-navbar-li-element-to-right" target="_blank">Float a navbar <li> element to right</a></li>
            </ul>
        </li>
    </ul>
  2. Tento zoznam sa nám postupne vyroluje pod našou položkou menu
    1. Najprv si upravíme druhú a nižšiu úroveň menu tak, že v CSS si zmeníme pozicionovanie týchto úrovní pomocou nasledovného kódu:
      li{
          display: inline-block;
          margin: 0 20px;
          position: relative; /* pridali sme relatívnu pozíciu, aby sme vedeli pozicionovať všetky detské lementy vzhľadom k tomuto elementu */
      }
      
      ul ul{ /* tým, že napíšeme ul ul, tak tým pádom upravujeme všetky neradené zoznamy, ktoré sa nachádzajú v akomkoľvk neradenom zozname - t.j. druhá a nižšia úroveň zoznamu */
          position: absolute; /* nastavíme pozicionovanie elementu na ľubovoľnú pozíciu */
      }
    2. Potom umiestnime menu druhej úrovne tak, aby sa nachádzalo vpravo vzhľadom k nadradenému elementu a pod ním
      ul ul{ /* tým, že napíšeme ul ul, tak tým pádom upravujeme všetky neradené zoznamy, ktoré sa nachádzajú v akomkoľvk neradenom zozname - t.j. druhá a nižšia úroveň zoznamu */
          position: absolute; /* nastavíme pozicionovanie elementu na ľubovoľnú pozíciu */
          top: 48px; /* 48px je výška našej hlavičky stránky a taktiež jednotlivých položiek hlavného menu */
          right: 0;
      }
    3. Podmenu si schováme a zobrazíme ho iba po nadídení myšou nad nadradený element
      ul ul{ /* tým, že napíšeme ul ul, tak tým pádom upravujeme všetky neradené zoznamy, ktoré sa nachádzajú v akomkoľvk neradenom zozname - t.j. druhá a nižšia úroveň zoznamu */
          position: absolute; /* nastavíme pozicionovanie elementu na ľubovoľnú pozíciu */
          top: 48px; /* 48px je výška našej hlavičky stránky a taktiež jednotlivých položiek hlavného menu */
          right: 0;
          max-height: 0; /* v tomto prípade použijeme max-height namiesto height, pretože chceme použiť plynulý prechod na vyrolovanie čo pomocou height nie je možné aby sa nám výška podmenu zobrazovala dynamicky */
          overflow: hidden; /* túto vlastnosť musíme použiť preto, lebo bez jej použitia by sa nám zobrazoval všetok obsah podmenu nacucnutý na sebe, no bol by viditeľný, čo mi nechceme */ 
          transition: 0.3s;
      }
      
      li:hover > ul{ /* znakom > špecifikujeme to, že ul musí byť priamy detský element v značke li */
          max-height: 1000px;
      }

      znakom > špecifikujeme to, že ul musí byť priamy detský element v značke li, čiže:

      <ul>
          <li>
              Položka
              <ul> <!-- na tomto podmenu sa CSS pravidlá aplikujú -->
                  ...
              </ul>
          </li>
          <li>
              Položka
              <div>
                  <ul> <!-- na tomto nie, pretože nie je priamy podelement značky li, ale div -->
                      ...
                  </ul>
              </div>
          </li>
      </ul>
  3. Druhá úroveň menu bude vizuálne odlíšená od prvej
    ul ul{ /* tým, že napíšeme ul ul, tak tým pádom upravujeme všetky neradené zoznamy, ktoré sa nachádzajú v akomkoľvk neradenom zozname - t.j. druhá a nižšia úroveň zoznamu */
        position: absolute; /* nastavíme pozicionovanie elementu na ľubovoľnú pozíciu */
        top: 48px; /* 48px je výška našej hlavičky stránky a taktiež jednotlivých položiek hlavného menu */
        right: 0;
        max-height: 0; /* v tomto prípade použijeme max-height namiesto height, pretože chceme použiť plynulý prechod na vyrolovanie čo pomocou height nie je možné aby sa nám výška podmenu zobrazovala dynamicky */
        overflow: hidden; /* túto vlastnosť musíme použiť preto, lebo bez jej použitia by sa nám zobrazoval všetok obsah podmenu nacucnutý na sebe, no bol by viditeľný, čo mi nechceme */ 
        transition: 0.3s;
        min-width: 250px;
    }
    
    ul ul li {
        display: block;
        margin: 0;
    }
    
    ul ul a {
        padding: 10px 15px;
        background: #3a4246;
        border-bottom: 1px solid #6b7275;
        transition: 0.3s;
        display: block;
    }
    
    ul ul a:after {
        content: none;
    }
    
    ul ul a:hover {
        background: #1a1e21;
    }
    
    li:hover > ul{ /* znakom > špecifikujeme to, že ul musí byť priamy detský element v značke li */
        max-height: 300px;
    }

Úloha č.3 – Vytvorenie rozklikávateľného menu druhej úrovne

Pre vytvorenie možnosti rozklikávateľnej druhej úrovne menu použijeme pokročilých techník, aj bez použitia javaScriptu, tak, že do položky menu vložíme značku typu input type=“checkbox“. Táto značka predstavuje zaškrtávacie políčko, ktoré si naštýlujeme ako klikateľnú ikonu. Táto ikona ktorá nám zabezpečí to, že ak klikneme na ňu, tak sa nám políčko zaškrtne. Ak je políčko zaškrtnuté, tak sa nám vyroluje menu druhej úrovne, ktoré sa nachádza v danej položke.

  1. Ako prvé si upravíme HTML dokument tak, že si pridáme zaškrtávacie políčko a element label na naštýlovanie ikony.
    <ul>
        <li>
            <a href="http://facebook.com" target="_blank">Facebook</a>
        </li>
        <li>
            <a href="http://9gag.com" target="_blank">9gag</a>
            <input type="checkbox" name="menu-checker" id="gag">
            <label for="gag"></label>
            <ul>
                <li><a href="https://9gag.com/gag/a8oBpre" target="_blank">HTML + CSS</a></li>
                <li><a href="https://9gag.com/gag/aWqD6x6" target="_blank">Chuck Norris</a></li>
                <li><a href="https://9gag.com/gag/aEBbAoe" target="_blank">Tee of truth</a></li>
            </ul>
        </li>
        <li>
            <a href="http://quora.com" target="_blank">Quora</a>
        </li>
        <li>
            <a href="http://stackoverflow.com" target="_blank">stackoverflow</a>
            <input type="checkbox" name="menu-checker" id="stackoverflow">
            <label for="stackoverflow"></label>
            <ul>
                <li><a href="https://stackoverflow.com/questions/52571308/super-confused-over-section-and-article-elements" target="_blank">super confused over section and article elements</a></li>
                <li><a href="https://stackoverflow.com/questions/52570646/dividing-my-page-in-2-vertical-columns-html" target="_blank">Dividing my page in 2 vertical columns HTML</a></li>
                <li><a href="https://stackoverflow.com/questions/52570566/float-a-navbar-li-element-to-right" target="_blank">Float a navbar <li> element to right</a></li>
            </ul>
        </li>
    </ul>

    Tieto políčka a ikony umiestnime iba do tých položiek hlavného menu, kde sa nachádzajú aj podmenu

  2. Následne si zaškrtávacie políčko schováme
    input[type="checkbox"]{
        display: none;
    }
  3. A naštýlujeme ikonu
    label:after{
        content: "+";
        color: #56f19c;
        cursor: pointer;
        text-align: center;
        width: 32px;
        display: inline-block;
    }
  4. Ak bude políčko zaškrtnuté, upravíme:
    1. Ikonu
      input[type="checkbox"]:checked + label:after{ /* :checked hovor o tom, že políčko je zaškrnuté a znamienko + hovorí, že element čo nasleduje za zaškrtnutým políčkom bude pozmenený, v tomto prípade naša ikona */
          content: "-";
      }
    2. A vyrolujeme menu tým, že nezmeníme pravidlá na jeho vyrolovanie, ale zmeníme deklaráciu, pomocou ktorej sa aplikujú, t.j. že sa menu nevyroluje na po nadídení myšou nad nadradený element, ale že sa vyroluje po zaškrtnutí políčka
      /* predtým: menu sa vyrolovalo ak sme nadišli myšou nad jeho nadradený element
      li:hover > ul{
          max-height: 300px;
      }
      */
      
      /* potom: menu sa vyroluje, keď je políčko v nadradenom elemente zaškrtnuté */
      input[type="checkbox"]:checked ~ ul{ /* znakom ~ definujeme to, že element, ktorý sa nachádza v rovnakej nadradenej značke niekde za zaškrtnutým políčkom, bude ovplyvnené */
          max-height: 300px;
      }

Výsledná stránka

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li>
                        <a href="http://facebook.com" target="_blank">Facebook</a>
                    </li>
                    <li>
                        <a href="http://9gag.com" target="_blank">9gag</a>
                        <input type="checkbox" name="menu-checker" id="gag">
                        <label for="gag"></label>
                        <ul>
                            <li><a href="https://9gag.com/gag/a8oBpre" target="_blank">HTML + CSS</a></li>
                            <li><a href="https://9gag.com/gag/aWqD6x6" target="_blank">Chuck Norris</a></li>
                            <li><a href="https://9gag.com/gag/aEBbAoe" target="_blank">Tee of truth</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="http://quora.com" target="_blank">Quora</a>
                    </li>
                    <li>
                        <a href="http://stackoverflow.com" target="_blank">stackoverflow</a>
                        <input type="checkbox" name="menu-checker" id="stackoverflow">
                        <label for="stackoverflow"></label>
                        <ul>
                            <li><a href="https://stackoverflow.com/questions/52571308/super-confused-over-section-and-article-elements" target="_blank">super confused over section and article elements</a></li>
                            <li><a href="https://stackoverflow.com/questions/52570646/dividing-my-page-in-2-vertical-columns-html" target="_blank">Dividing my page in 2 vertical columns HTML</a></li>
                            <li><a href="https://stackoverflow.com/questions/52570566/float-a-navbar-li-element-to-right" target="_blank">Float a navbar <li> element to right</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
    </body>
</html>

CSS

body{
    margin: 0;
    font-family: sans-serif;
}

header{
    background: #565f63;
}

ul{
    text-align: right;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
}

li{
    display: inline-block;
    margin: 0 20px;
    position: relative; /* pridali sme relatívnu pozíciu, aby sme vedeli pozicionovať všetky detské lementy vzhľadom k tomuto elementu */
}

a{
    text-decoration: none;
    color: #56f19c;
    display: inline-block;
    padding: 15px 0;
    position: relative;
}

a:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: 0.3s;
    background: #56f19c;
}

li:hover a:after{
    height: 3px;
}

ul ul{ /* tým, že napíšeme ul ul, tak tým pádom upravujeme všetky neradené zoznamy, ktoré sa nachádzajú v akomkoľvk neradenom zozname - t.j. druhá a nižšia úroveň zoznamu */
    position: absolute; /* nastavíme pozicionovanie elementu na ľubovoľnú pozíciu */
    top: 48px; /* 48px je výška našej hlavičky stránky a taktiež jednotlivých položiek hlavného menu */
    right: 0;
    max-height: 0; /* v tomto prípade použijeme max-height namiesto height, pretože chceme použiť plynulý prechod na vyrolovanie čo pomocou height nie je možné aby sa nám výška podmenu zobrazovala dynamicky */
    overflow: hidden; /* túto vlastnosť musíme použiť preto, lebo bez jej použitia by sa nám zobrazoval všetok obsah podmenu nacucnutý na sebe, no bol by viditeľný, čo mi nechceme */ 
    transition: 0.3s;
    min-width: 250px;
}

ul ul li {
    display: block;
    margin: 0;
}

ul ul a {
    padding: 10px 15px;
    background: #3a4246;
    border-bottom: 1px solid #6b7275;
    transition: 0.3s;
    display: block;
}

ul ul a:after {
    content: none;
}

ul ul a:hover {
    background: #1a1e21;
}

input[type="checkbox"]:checked ~ ul{ /* znakom ~ definujeme to, že element, ktorý sa nachádza v rovnakej nadradenej značke niekde za zaškrtnutým políčkom, bude ovplyvnené */
    max-height: 300px;
}

input[type="checkbox"]{
    display: none;
}

label:after{
    content: "+";
    color: #56f19c;
    cursor: pointer;
    text-align: center;
    width: 32px;
    display: inline-block;
}

input[type="checkbox"]:checked + label:after{ /* :checked hovor o tom, že políčko je zaškrnuté a znamienko + hovorí, že element čo nasleduje za zaškrtnutým políčkom bude pozmenený, v tomto prípade naša ikona */
    content: "-";
}