Poziomy pasek z efektem najechania w html5, css3 i bootstrap

Czego potrzebujemy?

Serwer lokalny (mówiłem już, że używam Xampp)
·
A edytor kodu (użyj wysublimowanego tekstu 3)

Krok 1

Zacznę od przejścia do katalogu mojego lokalnego serwera i utworzenia nowego folderu do przechowywania tego projektu, nazwę go w nim „menu_hover” i dodam kolejny, aby zawierał pliki css.

POWIĘKSZAĆ

POWIĘKSZAĆ

Krok 2

Teraz w naszym edytorze kodu zaczniemy od dodania nowej struktury html5 do której dodam arkusze stylów odpowiadających bootstrapowi z ich adresów CDN aby nie zajmować miejsca na naszym serwerze, dodam również arkusz stylów o nazwie „style .css”, który będzie przechowywany w naszym wcześniej utworzonym folderze „css”…
Później zapiszemy ten plik jako „menu.html” w folderze „menu_hover” utworzonym w kroku 1.

POWIĘKSZAĆ

Krok 3

Teraz dodamy etykietę do naszego "menu.html" i ustalimy jak będzie się ona wyświetlać na ekranie ustawiając jej właściwości w pliku style.css…

POWIĘKSZAĆ

POWIĘKSZAĆ

Jak zobaczysz w css, dodałem „kolor tła: zielony” jest to tylko w celach orientacyjnych, aby zobaczyć rozmiar i pozycję nagłówka na ekranie, możesz bawić się rozmiarami, czcionką i innymi zgodnie z twoimi preferencje … tak właśnie teraz widzimy to w naszej przeglądarce mielibyśmy coś takiego …

POWIĘKSZAĆ

Krok 4

Chcę, aby moje menu składało się z 4 linków, aby to osiągnąć w ramach etykiety dodam 4Z klasą "box_menu" do ich identyfikacji dodam do każdego z nich rosnące id od "jeden" do "cztery".

POWIĘKSZAĆ

Krok 5

W naszym pliku style.css dodamy właściwości dla klasy "box_menu" oraz dla warstw "jedna, dwie, trzy i cztery".

Krok 6

Zaczniemy definiować zachowanie klasy "box_menu" od ustalenia pozycji względnej, pamiętajmy, że w tym przypadku będziemy mieli 4 linki i warstwa, która je zawiera, czyli zajmuje 80% ekranu, więc będziemy Potrzebujemy ich do 4 elementów z klasą box_menu zajmują 100% dostępnej przestrzeni w jej obrębie, za to weźmiemy 100% i podzielimy przez ilość linków lub elementów, które chcemy umieścić, tak jak w tym przypadku są to 4 byłoby to 100/4 = 25, więc nasza klasa "box_menu" powinna mieć szerokość 25%. Zatrzymamy go również na 100% i powiemy, aby unosił się w lewo, aby elementy były widoczne obok siebie.

POWIĘKSZAĆ

Krok 7

Później zdefiniujemy kolor tła, za pomocą którego będziemy pokazywać każdy z elementów, w kroku 4 dodamy id od jednego do czterech, teraz w naszym css określimy, jak będzie wyglądać każda z tych warstw. w tym celu zrobimy następujące …

POWIĘKSZAĆ

To da nam następujący wynik:

POWIĘKSZAĆ

Jak widać, mamy już rozgraniczone przestrzenie każdego elementu i jego kolor tła, możesz użyć kodów kolorów według własnych upodobań, w tym przypadku, ponieważ nie jest to strona internetowa o określonej tematyce, ale test, którego użyłem jako demonstracja …

Krok 8

Wróćmy do dokumentu "menu.html" tak jak go zostawiliśmy w kroku 4, teraz przejdziemy do dodawania ikon i tekstu, który będzie miał nasze menu. W tym celu nie będziemy używać obrazów, ale zamierzamy pomóc sobie trochę z bootstrapem i użyjemy ikon z pakietu „Font Awesome”, w tym celu przechodzimy do przeglądarki i uzyskujemy dostęp do sieci https: // fortawesome… .o / Font-Awesome / klikamy na „Rozpocznij ” i przejdź do sekcji „NAJPROSTSZE: sekcja BootstrapCDN według MaxCDN ”.

POWIĘKSZAĆ

Skopiuję link CDN do arkusza stylów Font Awesome i wkleję go w nagłówku mojego dokumentu „menu.html”

POWIĘKSZAĆ

Dzięki temu możemy teraz używać ikon Font Awesome w naszym projekcie, ale teraz musimy wybrać, które ikony zamierzamy umieścić, w tym celu wracamy na ich stronę internetową i znajdujemy menu "Ikony".

POWIĘKSZAĆ

Przeszukujemy obszerną listę w poszukiwaniu interesującej nas ikony i klikamy na nią.

POWIĘKSZAĆ

Kiedy klikniemy, przeniesie nas do innego okna, w którym możemy zobaczyć kod do wstawienia tej ikony do naszego projektu.

POWIĘKSZAĆ

Po prostu kopiujemy go i przechodzimy do naszego "menu.html" i wklejamy go dow następujący sposób …

POWIĘKSZAĆ

POWIĘKSZAĆ

Dodamy również pod nim nazwę, która jest wyśrodkowana …

POWIĘKSZAĆ

Sprawdźmy jak to wygląda w naszej przeglądarce…

POWIĘKSZAĆ

Widzimy, że dodaliśmy już ikonę i wyśrodkowany tekst, więc powtarzamy ten krok dla pozostałych 3 elementów.

POWIĘKSZAĆ

Krok 9

Ikony są dość małe, zwiększę ich rozmiar 3 razy, do tego dodam klasę "fa-3x".

POWIĘKSZAĆ

POWIĘKSZAĆ

Krok 10

Teraz trochę zmodyfikuję plik css, aby dokończyć efekt, zacznę od modyfikacji klasy "box_menu" wyrównując tekst do środka i nadając mu display = "block";

POWIĘKSZAĆ

Krok 11

Później napiszę klasę do kontrolowania jak będą wyglądały ikony, w której zdefiniuję, że są wyświetlane na biało, że mają zaokrągloną krawędź wokół siebie i że mają animację przejścia…

POWIĘKSZAĆ

Krok 12

Odnośnie tekstów na etykiecie

Umieszczę je w kolorze białym i zmniejszę nieco krycie, dodając również lekki efekt animacji w dół.

POWIĘKSZAĆ

Krok 13

Teraz zdefiniuję, jak będą się zachowywały nasze elementy po najechaniu na nie i dodam do niego małą animację, aby złagodzić efekt.

POWIĘKSZAĆ

Po wykonaniu tej czynności możemy powiedzieć, że zakończyliśmy projektowanie efektu, teraz wystarczy dodać linki w dowolny sposób, komentuję, że ten efekt można również wykorzystać do umieszczania obrazów, które mają pod sobą tekst opisowy, na przykład Na przykład profesjonalne portfolio, galeria czy katalog produktów, wszystko pozostawiamy Twojej wyobraźni…
Na końcu Zostawię Ci plik .zip z kodem źródłowymJeśli podobał Ci się ten tutorial zostaw swój komentarz, jeżeli było coś niejasnego to zapytaj mnie, jeżeli chciałbyś tutorial na konkretny temat daj znać…
Mam nadzieję, że ci się przyda, pozdrawiam…

Plik z kodem źródłowym… Podobał Ci się ten samouczek i pomógł?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt