Хоризонтална лента с ефект на ховър в html5, css3 и bootstrap

Какво ни трябва?

Локален сървър (вече ви казах, че използвам Xampp)
·
А редактор на кодове (използвайте възвишен текст 3)

Етап 1

Ще започна, като отида в директорията на моя локален сървър и ще създам нова папка за съхраняване на този проект, ще го нарека "menu_hover" вътре в него и ще добавя друг, който да съдържа css файловете.

Увеличете

Увеличете

Стъпка 2

Сега в нашия редактор на кодове ще започнем с добавяне на нова html5 структура, към която ще добавя стиловите таблици, съответстващи на bootstrap от техните CDN адреси, за да не заемат място на нашия сървър, ще добавя и стилова таблица, наречена „style .css ", който ще се съхранява в нашата папка" css ", създадена по -рано …
По -късно ще запазим този файл като „menu.html“ в папката „menu_hover“, създадена в стъпка 1.

Увеличете

Стъпка 3

Сега ще добавим етикет към нашето „menu.html“ и ще установим как ще се показва на екрана, като зададем свойствата му във файла style.css …

Увеличете

Увеличете

Както ще видите в css, добавих "background-color: green", това е само за ориентиране, за да видите размера и позицията на заглавката на екрана, можете да играете с размерите, шрифта и други според вашите предпочитания … да в момента, когато го видим в браузъра си, ще имаме нещо подобно …

Увеличете

Стъпка 4

Искам менюто ми да се състои от 4 връзки, за да постигна това в етикета, ще добавя 4С класа "box_menu", за да ги идентифицирам, ще добавя към всеки увеличаващ се идентификатор от "един" на "четири".

Увеличете

Стъпка 5

В нашия файл style.css ще добавим свойствата за класа "box_menu" и за слоевете "един, два, три и четири".

Стъпка 6

Ще започнем да определяме поведението на класа "box_menu", като установим относителна позиция, не забравяйте, че в този случай ще имаме 4 връзки и че слоят, който ги съдържа, тоест заема 80% от екрана, така че ще се нуждаят от тях, за да 4 елемента с класа box_menu заемат 100% от наличното пространство в него, за това ще вземем 100% и ще го разделим на броя на връзките или елементите, които искаме да поставим, тъй като в този случай има 4 тогава ще бъде 100/4 = 25, тъй като нашият клас "box_menu" трябва да има ширина 25%. Също така ще му дадем 100% стоп и ще му кажем да плава наляво, така че елементите да се виждат един до друг.

Увеличете

Стъпка 7

По -късно ще определим цвета на фона, с който ще покажем всеки от елементите, в стъпка 4 добавяме id от един до четири сега в нашия css ще дефинираме как ще изглежда всеки от тези слоеве. за това ще направим следното …

Увеличете

Това ще ни даде следния резултат:

Увеличете

Както можете да видите, ние вече сме ограничили пространствата на всеки елемент и цвета на фона, можете да използвате цветовите кодове според вашия вкус, в този случай, тъй като това не е уебсайт с конкретна тема, а тест, който съм използвал като демонстрация …

Стъпка 8

Е, нека се върнем към документа "menu.html", както го оставихме в стъпка 4, сега ще продължим да добавяме иконите и текста, който ще има нашето меню. За това няма да използваме изображения, но ще отидем за да си помогнем малко с bootstrap и ще използваме икони от пакета „Font Awesome“, за това отиваме в браузъра и влизаме в мрежата https: // fortawesome… .o / Font-Awesome / щракнете върху „Започнете ”И слезте до„ EASIEST: BootstrapCDN раздел от MaxCDN ”.

Увеличете

Ще копирам връзката CDN в таблицата със стилове на Font Awesome и ще я поставя в заглавката на моя документ „menu.html“

Увеличете

С това вече можем да използваме иконите Font Awesome в нашия дизайн, но сега трябва да изберем кои икони ще поставим, за това се връщаме на техния уебсайт и намираме менюто „Icons“.

Увеличете

Търсим в обширния списък за иконата, която ни интересува, и кликваме върху нея.

Увеличете

Когато щракнем, това ще ни отведе до друг прозорец, в който можем да видим кода, за да вмъкнем тази икона в нашия дизайн.

Увеличете

Ние просто го копираме и отиваме в „menu.html“ и го поставяме вкакто следва …

Увеличете

Увеличете

Ще добавим и име под него, което е центрирано …

Увеличете

Нека да проверим как изглежда в нашия браузър …

Увеличете

Виждаме, че вече сме добавили икона и центриран текст, така че повтаряме тази стъпка за останалите 3 елемента.

Увеличете

Стъпка 9

Иконите са доста малки, ще увелича размера им 3 пъти, за това ще добавя клас "fa-3x".

Увеличете

Увеличете

Стъпка 10

Сега ще променя малко css файла, за да завърша ефекта, ще започна с промяна на класа "box_menu", подравнявайки текста към центъра и му давайки display = "block";

Увеличете

Стъпка 11

По -късно ще напиша клас, който да контролира как ще изглеждат иконите, в който ще определя, че те се показват в бяло, че имат заоблен ръб около тях и че имат анимация за преход …

Увеличете

Стъпка 12

Относно текстовете на етикета

Ще ги поставя в бяло и ще намаля малко непрозрачността, като добавя и лек анимационен ефект надолу.

Увеличете

Стъпка 13

Сега ще дефинирам как ще се държат нашите елементи при задържане на курсора върху него и ще добавя малко анимация към него, за да смекчи ефекта.

Увеличете

След като това стане, можем да кажем, че сме приключили с проектирането на ефекта, сега просто трябва да добавим връзките по начина, по който искате, коментирам, че този ефект може да се използва и за поставяне на изображения, които имат описателен текст под тях, като например Например професионално портфолио, галерия или каталог с продукти, всичко е оставено на вашето въображение …
В края Ще ви оставя .zip с изходния кодАко този урок ви е харесал, оставете коментара си, ако има нещо, което не е ясно, попитайте ме, ако искате урок по конкретна тема, уведомете ме …
Надявам се, че това е полезно за вас, поздрави …

Файл със изходен код … Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка