Obsah
Co potřebujeme?
Místní server (již jsem vám řekl, že používám Xampp)
·
A editor kódu (použijte vznešený text 3)
Krok 1
Začnu tím, že přejdu do adresáře svého lokálního serveru a vytvořím novou složku pro uložení tohoto projektu, nazvu to uvnitř „menu_hover“ a přidám další, která bude obsahovat soubory css.
ZVĚTŠIT
ZVĚTŠIT
Krok 2
Nyní v našem editoru kódu začneme přidáním nové struktury html5, do které přidám šablony stylů odpovídající bootstrapu z jejich adres CDN, aby nezabíraly místo na našem serveru, a také přidám šablonu stylů s názvem „styl .css ", které budou uloženy v naší složce" css "vytvořené dříve …
Později tento soubor uložíme jako „menu.html“ do složky „menu_hover“ vytvořené v kroku 1.
ZVĚTŠIT
Krok 3
Nyní přidáme štítek do našeho „menu.html“ a určíme, jak bude zobrazen na obrazovce, nastavením jeho vlastností v souboru style.css …
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
Krok 4
Chci, aby moje nabídka byla tvořena 4 odkazy, abych toho dosáhl v rámci štítku, přidám 4Se třídou „box_menu“ k jejich identifikaci přidám ke každému z nich rostoucí id z „jednoho“ na „čtyři“.
ZVĚTŠIT
Krok 5
Do našeho souboru style.css přidáme vlastnosti pro třídu „box_menu“ a pro vrstvy „jedna, dvě, tři a čtyři“.
Krok 6
Začneme definovat chování třídy "box_menu" stanovením relativní polohy, pamatujte, že v tomto případě budeme mít 4 odkazy a že vrstva, která je obsahuje, to znamená, zabírá 80% obrazovky, takže budeme potřebujeme, aby 4 prvky zaujímaly třídu box_menu 100% dostupného místa v ní, za to vezmeme 100% a vydělíme to počtem odkazů nebo prvků, které chceme umístit, protože v tomto případě existují 4 pak bylo by 100/4 = 25, protože naše třída „box_menu“ by měla mít šířku 25%. Také tomu stoprocentně zastavíme a řekneme mu, aby se vznášel doleva, aby byly živly vidět vedle sebe.
ZVĚTŠIT
Krok 7
Později definujeme barvu pozadí, se kterou budeme zobrazovat každý z prvků, v kroku 4 přidáme id od jedné do čtyř, nyní v našem css definujeme, jak bude každá z těchto vrstev vypadat. za tímto účelem uděláme následující …
ZVĚTŠIT
ZVĚTŠIT
Krok 8
Vraťme se k dokumentu „menu.html“, jak jsme jej nechali v kroku 4, nyní přistoupíme k přidání ikon a textu, který bude naše nabídka obsahovat. K tomu nebudeme používat obrázky, ale jdeme trochu si pomůžeme bootstrapem a použijeme ikony z balíčku „Font Awesome“, proto přejdeme do prohlížeče a přistoupíme na web https: // fortawesome… .o / Font-Awesome / klikněte na „Začínáme ”A přejděte dolů do části„ NEJLEPŠÍ: BootstrapCDN od MaxCDN ”.
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
ZVĚTŠIT
Krok 9
Ikony jsou docela malé, zvětším jejich velikost 3krát, za to přidám třídu „fa-3x“.
ZVĚTŠIT
ZVĚTŠIT
Krok 10
Nyní trochu upravím soubor css, abych dokončil efekt, začnu úpravou třídy "box_menu", která zarovná text na střed a dá mu display = "block";
ZVĚTŠIT
Krok 11
Později napíšu třídu pro ovládání, jak budou ikony vypadat, ve které definuji, že jsou zobrazeny bíle, že mají kolem sebe zaoblený okraj a že mají přechodovou animaci …
ZVĚTŠIT
Krok 12
Ohledně textů na štítku
Umístím je do bílé barvy a trochu snížím krytí přidáním mírného animačního efektu také dolů.
ZVĚTŠIT
Krok 13
Nyní definuji, jak se budou naše prvky chovat při najetí na něj a přidám do něj malou animaci pro zjemnění efektu.
ZVĚTŠIT
Na konci Nechám vám .zip se zdrojovým kódemPokud se vám tento návod líbil, zanechte svůj komentář, pokud tam bylo něco, co nebylo jasné, zeptejte se mě, jestli byste chtěli návod na konkrétní téma, dejte mi vědět …
Doufám, že je to pro vás užitečné, s pozdravem…
