80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

9. diel - Menu

V minulom dieli seriálu o tvorbe moderného webového portfólia sme stylovali obsahovú časť. Dnešný diel bude o tvorbe menu. Veľa ľudí mi písalo a pýtali sa ma, ako docieliť jeho vhľadu. Väčšina tipovala tabuľkou, ale to by nebolo moc dobré riešenie. Ukážme si teda iné riešenie. :)

Pripomeňme si, ako vyzerá naša skica / wireframe.

Wifreframe moderného webového portfólia

Tiež si rovno ukážeme celkový vzhľad. Vidíme, že nám chýba len menu, poďme si ho teda urobiť!

Moderné webové portfólio

Príprava

Pre naše menu si vytvoríme nový partial. Vytvorte si teda súbor _sidebar.scss side. Nezabudnite si ho naimportovať v hlavnom SCSS súbore.

Sidebar

Ako prvý si musíme vytvoriť hlavné element, na ktorý využijeme element sidebar. Element umiestnime pred element


 

...koniec náhľadu článku...

Prémiový článok

Prémiový článok

Na itnetwork.sk sa nachádza najväčšia a najucelenejšia slovenská databáza s výučbovými článkami, ktorej cieľom je umožniť kvalitné vzdelanie v oblasti IT úplne každému. Mesačne zobrazíme okolo milióna článkov a dostaneme desiatky ďakovných emailov, kde nás informujete, že sme vám pomohli k lepšiemu zamestnaniu alebo vzdelaniu.

Hoci sa snažíme držať väčšinu obsahu úplne zadarmo, udržiavať sieť v prevádzke a aktuálnu stojí obrovské úsilie. Preto je nejaký obsah, ako cvičenia alebo odbornejšie články, prístupný len za body. Nebojte sa, nestojí to skoro nič :)

Popis článku

Požadovaný článok má nasledujúci obsah:

Tutoriál ukáže ako nakódovať a nastylovať postranné navigačné menu pre moderné web. Pokračujeme v tvorbe profesionálneho webového portfólia podľa návrhu.

Obmedzená ponuka: Nauč sa všetko a ušetri

Kúpiť články a funkcie postupne a po jednom 70 bodov
Kúpiť všetky aktuálne dostupné články v sekcii so všetkými funkciami za exkluzívnu cenu 60 bodov
Na svojom účte máš aktuálne 0 bodov
Kúpou tohoto výhodného balíčku získaš prístup ku všetkým 12 článkom s kontrolou a certifikáciou a ešte naviac ušetríš 27 Kč. Ponuka je obmedzená len pre prvé články z kurzu a obsahuje exkluzívnu zľavu 15%.
60 bodov získaš za pridanie svojho článku na sieť alebo za 175 Kč 149 Kč

Pozor, pokiaľ si kúpiš len tento článok, stratíš nárok na špeciálnu zľavu 15% na balíček všetkých článkov.

Pre prístup k článku potrebuješ 10 bodov
Na svojom účte máš aktuálne 0 bodov
10 bodov získaš za pridanie svojho článku na sieť alebo za 25 Kč

Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel

Kúpou článku k nemu získaš neobmedzený prístup a to nastálo. Posunieš svoje vedomosti zas kúsok dopredu a zároveň nám pomôžeš udržiavať celý projekt pri živote a pomáhať vám tak k lepšej budúcnosti.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.

Body získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.

Dobiť body môžeš okamžite napr .:

Kartou SMS Prevodom
Kartou SMS Prevodom
Článok pre vás napísal Honza Bittner
Avatar
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (1)