Vodorovná lišta s efektem vznášení v html5, css3 a bootstrap

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

Jak uvidíte na CSS, přidal jsem „background-color: green“, toto je pouze pro orientační účely, abyste viděli velikost a umístění záhlaví na obrazovce, můžete si hrát s velikostmi, písmem a dalšími podle vašeho preference … ano, právě teď to vidíme v našem prohlížeči, měli bychom něco takového …

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

Tím získáme následující výsledek:

ZVĚTŠIT

Jak vidíte, již jsme vymezili mezery každého prvku a jeho barvu pozadí, můžete použít barevné kódy podle svého vkusu, v tomto případě se nejedná o web s konkrétním tématem, ale o test, který jsem použil jako ukázka …

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

Zkopíruji odkaz CDN do šablony stylů Font Awesome a vložím jej do záhlaví dokumentu "menu.html"

ZVĚTŠIT

Díky tomu můžeme nyní v našem designu používat ikony Font Awesome, ale nyní si musíme vybrat, které ikony umístíme, proto se vrátíme na jejich webové stránky a vyhledáme nabídku „Ikony“.

ZVĚTŠIT

V rozsáhlém seznamu vyhledáme ikonu, která nás zajímá, a klikneme na ni.

ZVĚTŠIT

Když klikneme, přejdeme do dalšího okna, ve kterém vidíme kód pro vložení této ikony do našeho designu.

ZVĚTŠIT

Jednoduše jej zkopírujeme a přejdeme na náš „menu.html“ a vložíme jej do souborujak následuje …

ZVĚTŠIT

ZVĚTŠIT

Rovněž pod něj přidáme název se středem …

ZVĚTŠIT

Podívejme se, jak to vypadá v našem prohlížeči …

ZVĚTŠIT

Vidíme, že jsme již přidali ikonu a text na střed, takže tento krok opakujeme pro zbývající 3 prvky.

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

Jakmile to bude hotové, můžeme říci, že jsme dokončili navrhování efektu, nyní stačí přidat odkazy tak, jak chcete, poznamenávám, že tento efekt lze také použít k umístění obrázků, které mají pod sebou popisný text, jako např. Například profesionální portfolio, galerie nebo katalog produktů, vše je ponecháno na vaší fantazii …
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…

Soubor se zdrojovým kódem … Líbil se vám tento výukový program a pomohl vám?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod