Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Lekce 9 - Menu

V minulé lekci, Stylování obsahu, jsme stylovali obsahovou část.

Dnešní díl bude o tvorbě menu. Hodně lidí mi psalo a ptali se mě, jak docílit jeho vhledu. Většina tipovala tabulkou, ale to by nebylo moc dobré řešení. Ukažme si tedy jiné řešení :)

Připomeňme si, jak vypadá naše skica/wireframe.

Wifreframe moderního webového portfolia - Moderní a profesionální webové portfolio

Také si rovnou ukážeme celkový vzhled.

Moderní webové portfolio - Moderní a profesionální webové portfolio

Vidíme, že nám chybí jen menu, pojďme si ho tedy udělat!

Příprava

Pro naše menu si vytvoříme nový partial. Vytvořte si tedy soubor _sidebar.scss. Nezapomeňte si jej naimportovat v hlavním SCSS souboru.

Sidebar

Jako první si musíme vytvořit hlavní element, na který využijeme element sidebar. Element umístíme před element


 

...konec náhledu článku...
Pokračuj dál

Znalosti v hodnotě stovek tisíc získáš za pár korun

Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.

Před koupí tohoto článku je třeba koupit předchozí díl

Obsah článku spadá pod licenci Premium, koupí článku souhlasíš s Provozními podmínkami.

Co od nás v dalších lekcích dostaneš?
  • Přístup k jednotlivým lekcím dle způsobu pořízení.
  • Kvalitní znalosti v oblasti IT.
  • Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.

Popis článku

Požadovaný článek má následující obsah:

Tutoriál ukáže jak nakódovat a nastylovat postranní navigační menu pro moderní web. Pokračujeme v tvorbě profesionálního webového portfolia podle návrhu.
Článek pro vás napsal Honza Bittner
Avatar
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity