I v této hodině předpokládám, že zvládáte látku z předchozích hodin a vaší práci budu kontrolovat opět v úterý před programování ve 22:22.

Soubor na začátek budeme potřebovat pouze jeden HTML soubor a CSS.

Vytvoříme si základní rámec a připojíme bootstrap:001

Code

Ještě připojíme CSS:

002

Tématem dnešní hodiny bude vytvoření rozcestníku na vaše předešlé hodiny a také oddělené informační stránky pro váš projekt, který vás bude čekat v druhém pololetí. Na začátek si vytvoříme jednoduché menu, ve kterém si připravíme odkazy na předchozí hodiny. Zde se budete muset kouknout do vašich na hraných složek zjistit si jak máte jednotlivé soubory pojmenované. Ideálně by to mělo vypadat nějak takto:

003

Také budeme potřebovat odkaz na úvodní stánku a na stránku projektu. Kdy úvodní stránka nám bude ukazovat sama na sebe (index.html) a stránka o projektu nám ještě neexistuje ale bude se jmenovat projekt.html.004

Nyní to začne být malinko komplikované. To co jsme aktuálně vytvořili je pouze 6 odkazů v řadě za sebou. Aby nám z toho vzniklo fungující menu musíme přidat ještě spoustu divů. Pokusím se to postupně popisovat jak je budeme skládat. Dnes vám velmi doporučuji začít využívat komentáře. Jedná se o kousek kódu, který nemá žádný vliv na funkci stránky, ale velmi vám pomůže se v dané věci zorientovat i když se k ní vrátíte po X hodinách. V každém jazyce se komentuje jinak a tak pro vás na začátek mám 3 druhy komentářů:

  • HTML
    • <!– text komentáře –>
  • CSS
    • /* Text komentáře */

Javascript je malinko komplikovanější. Existují zde dva druhy komentářů. První je blokový a má určený začátek a konec. Tento může přesahovat několik řádků a využijete ho například v momentě kdy vám přestane JS. fungovat. Postupně „zakomentováváte“ jednotlivé části kódu dokud nezačne js soubor opět fungovat. Jak víte, když vám v JS souboru něco nefunguje, většinou vám to rozbije všechny funkce. Druhý je řádkový a ten se skutečně používá na popisování jednotlivých částí kódu. Má pouze začátek a komentářem se stává celý řádek (lépe řečeno vše za // ).

  • Blokový komentář JS
    • /* komentář */
  • Řádkový komentář
    • // Text komentáře

Menu začnu vytvářet prázdné a naše připravené položky do něj později přesuneme 🙂

První tag, který budeme potřebovat je div s class .navbar a .navbar-default do něj si vložíme div s class .container.

005

Nyní by jsme v prohlížeči měli již vidět začátek vznikajícího menu. Další částí jen div s class .navbar-header a v něm link s class .navbar-brand. První div nám připraví, že zde bude prostor pro jméno stránky (případně logo) a link bude samotné jméno nebo logo.

006

Zde jsem pravděpodobně poprvé použil href=“#“. Toto se používá pouze v momentě kdy nevíme kam budeme chtít aby odkaz odkazoval nebo nechceme, aby vůbec někam odkazoval. Kdyby jsme vynechaly atribut href bude to považováno za chybu (stejně jako kdyby jsme vynechali alt u obrázku) a když necháme uvozovky prázdné, také to může způsobit problémy. Proto vždy když připravujete odkaz a nevíte kam bude odkazovat použijte #.

Většinou se na toto místo ale dává odkaz zpět na úvodní stánku. Něco jako když na mojí stránce kliknete na „Senpai.cz“. Udělá to to samé jako když v menu kliknete na „úvod“. Mít na stránce více cest na stejná místa není nic špatného. Většinou to pomůže lidem se na stránce snadněji zorientovat a je dobré, když se člověk může snadno vrátit na úvod stránky. Takže místo # můžete dát „index.html“.

Když se nyní na stránku podíváte uvidíte, že už máme v menu první položku, díky class .container nemáme naší první položku navigace až úplně nalevo, ale kdyby o to někdo stál, stačí, když div .container upraví na .container-fluid.

Pokud by jste chtěli místo textu mít v navbaru obrázek (logo), doporučuji použít obrázek ve formátu PNG s průhledným pozadím. V případě změn barvy by jste narazili brzy na problémy 😉

Nyní si přidáme další část, který nám obalí odkazy v našem menu. Nebude se však jednat o div, ale o seznam. Seznamů máme  v HTML 2 druhy. Číslovaný a nečíslovaný a oba fungují prakticky stejně.

Číslovaný seznam (Ordered list) používá tag <ol> a každá položka je označena pomocí <li>. Takže úplně jednoduchý číslovaný seznam může vypadat takto:

007

Prakticky stejně můžeme udělat seznam s odrážkami (Unordered list), kde tag je <ul> a položky jsou opět <li>:

008

V navigaci rozhodně nebudeme používat číslovaný seznam. Ale použijeme <ul>, které doplníme o class .nav a .navbar-nav. Jednotlivé odkazy budeme mít schované pod <li>.

<ul>již není součástí divu s class .navbar-header

Do <li> si můžete již vložit odkazy, které jsme si připravili na začátku. Výsledek může vypadat takto:

009

Zatím to nevypadá úplně zázračně, ale začíná se nám menu pomalu rýsovat 🙂 Přídáme do našeho menu však ještě jednu položku a to odkaz na rozcestník na všechny vaše stránky, který najdete na „wa.senpai.cz“ (bude přidán během týdne). Aby se tento odkaz nemíchal s vaší prací a projektem, dáme ho na druhou stranu menu (vpravo). Přidáme další <ul> a tentokrát mu přidáme class .navbar .navbar-nav a .navbar-right.

010

Nyní když, máme pouze 4 hodiny tak by naše menu mohlo fungovat, ale kdyby jsme hodin měli více, třeba 20, tak by jsme narazili brzy na problém, kdy by se nám menu začalo zalamovat a nevypadal by výsledek dobře. Schováme tedy hodiny do vysouvacího menu.

Jako první si vytvoříme <li> s class .dropdown na místě kde budeme chtít mít vysouvací (dropdown) menu, v našem případě to bude před odkaz na první hodinu. Do něj umístíme lina (a), kterým budeme menu otevírat a dáme mu class .dropdown-toggle a jednu novinku data-togle=“dropdown“. Díky tomu bude tento prvek chápán jako aktivační prvek pro dropdown. Jako každý link i tento musí mít href a tentokrát tam # zůstane. Do <a> můžete napsat nějaký text (třeba hodiny), ale většina lidí očekává, že u dropdown menu bude nějaká značka, že se jedná o dropdown menu. To můžete vložit buď přes ascii tabulku … což je nepraktické … nebo raději přes span. Pokud použijete prázdný span a dáte mu class .caret objeví se vám tam šipka, která se běžně používá 🙂

011

Zdá se vám to komplikované? … Ještě není hotovo 😀 Ještě musíme zabalit položky, které chceme mít v dropdown menu do ul s class .dropdown-menu. Zbytek už můžeme nechat stejný 🙂

012

Nyní by se to již mohlo zdát dokonalé … Ale není! Ještě se nám to stále nebude pěkně zobrazovat na mobilních zařízeních a s ohledem na to, že bootstrap funguje „mobile-first“ byla by škoda toho nevyužít 🙂

První věc co přidáme bude tlačítko, které budeme používat v mobilním zobrazení pro otevření menu. Nebude to úplně jednoduché, ale pokusím se to vysvětlit postupně o co se jedná. Na začátek budeme mít obyčejné tlačítko <button>, to dostane class .navbar-toggle. Díky tomu se nám zobrazí pouze v mobilním zobrazení. Část data-toggle již znáte, jen tentokrát v něm nebudeme mít dropdown, ale collapse. To je příkaz za zobrazení našeho menu.  A poslední částí bude data-target. Tím označíme cíl, který budeme upravovat. Bude se jednat o ID divu, kterým obalíme zbytek menu. Takže do data-target můžeme dát třeba #naseMenu. Samotný obsah tlačítka by sice mohlo být slovo, ale lepší bude když místo toho pouzijeme klasickou ikonu menu (tři čárky pod sebou). Neexistuje pro to ale jeden jednoduchý span, musíme použit 3 (počet čar pod sebou) s class .icon-bar.

013

A nyní ještě obalit naše menu do divu s ID, které jsme napsali do tlačítka. Také mu musíme přidat class .collapse a .navbar-collapse. To nám zajistí, že v mobilním zobrazení bude napřed menu zavřené.

014

Nyní už je menu hotové, tedy téměř. Ještě musíme označit class .active to kde se právě uživatel nachází. V našem případě jsme právě téměř dokončili úvodní stránku tak dáme class .active na li u odkazu na index.html. A také si za konec navigaci přidáme jeden div .container aby jsme měli do čeho dát další obsah stránky.

A máme hotovou první stránku ze dvou! 😀

015

Nyní si uděláme stránku, kam si budete moci dát informace o svém projektu.

Postup bude velmi jednoduchý. Označíte si vše co jsme právě, vytvořili, CTRL+C (kopírovat), CTRL+N (nový soubor), CTRL+V (vložit) a CTRL + S (uložit) pod názvem projekt.html do stejné složky jako máte aktuální index.html.

Nyní v souboru uděláme jedinou změnu a to, že smažeme .aktive u HOME a dáme jí k PROJEKT

Hotovo!

Tyto TŘI soubory (ještě máme ten prázdný CSS) nahrajte na svůj server a vyzkoušejte odkazy na vaše projekty, případně opravte cestu k souborům. Toto budu opět kontrolovat před další hodinou, tedy 19.11.2018 ve 22:22!

Bonus!

Pro vás, kteří si chcete vytvořit trochu vlastní styl pro bootstrap je tu velké mnoství generátorů, které vám pomohou dobrý a funkční styl snadno vytvořit. Já osobně mám celkem rád Live Customizer, ale existuje jich celá řada.

Google it!