Spisie treści
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Ć
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Ć
POWIĘKSZAĆ
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Ć
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
POWIĘKSZAĆ
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Ć
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…
