Advertisement
  1. Web Design
  2. HTML & CSS

Jak dostosować pasek Top 4 dla Fundacji

by
Read Time:10 minsLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Fundacja Zurb's Foundation 4 ma świetny górny pasek, który stał się niemal symbolem budowy witryny Fundacji. Dzisiaj przyjrzymy się, jak możesz go zaimplementować w inny sposób, umieszczając go w innym miejscu na stronie, oferując niestandardowe i responsywne poziome menu nawigacyjne.


Pierwsze kroki

Najpierw potrzebujemy najnowszej Fundacji. Rozpakuj i umieść wszystkie pliki w katalogu roboczym lub testowym. Użyjemy tylko pliku index.html, tworząc własny styl .css, w którym zastąpimy różne klasy paska górnego, aby wykonać naszą niestandardową nawigację.

foundation-downloadfoundation-downloadfoundation-download

Pobierz także obraz tła podany powyżej. Będziemy używać tego menu, więc umieść je w folderze "img". Mieć wszystko? Potem odpal ulubionego redaktora i ruszajmy!


Konfigurowanie struktury HTML

Krok 1: Ogólne oznakowanie

Plik indeksu w twoim pobraniu zawiera pewien ustawiony wcześniej kod HTML. Możesz zostawić wszystko, co znajdziesz w tagu nagłówka, i pozostawić linki skryptu (przed zamykającym tagiem body), gdzie się znajdują. Potrzebujemy tego, aby upewnić się, że Grid i Top Bar rzeczywiście działają.

Możesz wyczyścić resztę manekinów. Zamierzamy tutaj zaprojektować całą szerokość, nic skomplikowanego, po prostu coś, co pozwoli nam lepiej zrozumieć, z czym pracujemy.

W porządku, skonfigurujmy nagłówek, nawigację, zawartość i stopkę, a także wypełnijmy fikcyjną zawartość do celów wypełniania. Każdemu obszarowi nadamy klasę "pełnej szerokości", a następnie w każdym obszarze wstawimy element div o klasie = "row", element div o klasie = "large-12" i class = "columns". Tworzy to podstawową strukturę siatki.

Uwaga: Aby uzyskać więcej informacji na temat działania siatki, spójrz na Fundację dla początkujących: The Grid System

Krok 2: Top Bar Markup

Zanim przejdziemy do stylizacji, przedstawimy podstawową strukturę HTML, aby pasek górny Fundacji działał prawidłowo. Potrzebujemy pięciu podstawowych elementów, aby uruchomić silnik:

  • nav with class="top-bar"
  • ul with class="title-area"
  • li with class="toggle-topbar" =, aby rozwinąć menu w układzie mobilnym
  • section with class="top-bar-section"
  • ul with class="left" and i with class="right"

Teraz skonfigurujmy te podstawowe elementy i wdrożmy pięć elementów.

Uwaga: w tym samouczku przykładowego chcemy stworzyć niestandardowe menu nawigacyjne, usuwając w ten sposób tytuł (który zwykle zawiera logo, w formie tekstowej lub graficznej).

Aby to zrobić, po prostu zostawmy li z klasą = "nazwa" w ul przy klasie = "obszar tytułu" pusty.Dodajmy także niektóre elementy menu i menu rozwijane, gdy jesteśmy przy nim. Aby dodać dropdown dodaj klasę "has-dropdown" do elementu li, który ma zawierać rozwijane menu, następnie wprowadź nowy ul z klasą "dropdown". Aby wskazać aktualnie aktywną stronę, możemy nadać naszemu bieżącemu punktowi menu klasę "active" na elemencie li. Możemy zostawić klasę ul = "right" pustą. Zwykle użyjesz tego obszaru, aby dodać przycisk lub formularz wejściowy wyszukiwania. Aby uzyskać więcej informacji na temat znaczników górnego paska, zapoznaj się z Fundacją dla początkujących: The Top Bar.

Spójrz na poniższy HTML, komentarze wyjaśnij, jak się buduje.

Krok 3: Dotychczasowe wyniki

Sprawdź wyniki w swojej przeglądarce. Teraz tworzymy podstawową strukturę Fundacji za pomocą górnego paska do tworzenia menu poziomego. Aby umieścić go gdzieś indziej niż na górze przeglądarki, po prostu umieść nav class = "top-bar" w wierszu i kolumnach div.

Po zmianie rozmiaru przeglądarki widać, że menu zmienia się we wstępnie zdefiniowanym punkcie przerwania.

Następnym krokiem jest nadanie mu wszystkich niestandardowych stylizacji. Skoncentrujemy się na tym, jak możemy kształtować Top Bar i które klasy są do tego wykorzystywane.

foundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layout

Konfigurowanie CSS

Krok 1: Ogólne stylizowanie

Jeśli jeszcze tego nie zrobiłeś, utwórz nowy plik CSS, nazwij go styl.css i umieść go w folderze css pobierania bazy. Nie zapomnij umieścić go w tagu nagłówka w pliku indeksu, odwołując się do niego poniżej pliku foundation.css:

Jeśli nie umieścisz go w pliku foundation.css, nie zastąpi on klas Top Bar.

W porządku, najpierw zdobądźmy podstawową stylizację w nagłówku, nawigacji, zawartości i stopce. W przypadku obszaru nawigacyjnego użyjemy obrazu tła, który wcześniej pobrano. Ogólny projekt nie jest aż tak duży, spójrz na poniższy CSS. Do każdego obszaru dodajemy klasę o pełnej szerokości, aby mieć pewność, że wypełnia ona całą szerokość przeglądarki.

Krok 2: Najlepsze style paska

Jeśli teraz spojrzysz na wyniki, menu nadal wygląda nieco nie na miejscu. To dlatego, że nadal używa domyślnego CSS. Naprawmy to!

Jest kilka klas CSS, które musimy adresować, aby uzyskać pożądane wyniki. Najpierw usuniemy niektóre czarne tło z klasy .top-bar i listy sekcji oraz zmienimy wysokość i wysokość linii na 58 pikseli (wysokość obszaru nawigacyjnego). Sprawdź komentarze w celu uzyskania dalszych wyjaśnień.

Usunęliśmy domyślne czarne tło z nav class = "top-bar", listy sekcji i zakotwiczenia menu. Dostosowujemy wysokość, wysokość linii i dopełnienie oraz przekształcamy tekst na wielkie litery, aby pasował do naszego niestandardowego projektu.

Jeśli odświeżysz przeglądarkę, zobaczysz, że zaczyna ona nabierać kształtu. Kontynuujmy z listami rozwijanymi, elementami menu, stanami aktywnymi i hover. Spójrz na CSS poniżej i jeszcze raz, przeczytaj komentarz w komentarzu:

Wprowadziliśmy tutaj kilka zmian do naszego menu. Po pierwsze zmieniliśmy domyślne czarne tło aktywnego elementu menu na gradient CSS. Następnie nadaliśmy nieaktywnym elementom menu stan przypominający zawinięcie. Aby nieaktywne elementy menu były lepiej widoczne, zmieniamy kolor tekstu na ciemnoszary. Zmiany wprowadzone w .top-bar-section li: hover a utrzymają stan rozwijanego menu na ekranie, gdy mysz porusza się nad elementami rozwijanymi. Aby ukończyć proces CSS, ustawiliśmy pojemnik rozwijany ul na wypełnienie tła i przestawiliśmy domyślną pozycję strzałki rozwijanej, z powodu naszych regulacji dopełnienia do górnego paska.

Krok 3: Dotychczasowe wyniki

Odśwież przeglądarkę i spójrz na jej wyniki. Jeszcze nie skończyliśmy; nadal musimy się upewnić, że wszystko wygląda dobrze, gdy zmieniamy rozmiar ekranu przeglądarki (lub, jeśli o to chodzi, kiedy patrzymy na to na mniejszym urządzeniu). Aby to się stało, dodamy kilka zapytań o media do naszego pliku CSS.

foundation-4-custom-top-bar-final-productfoundation-4-custom-top-bar-final-productfoundation-4-custom-top-bar-final-product

Konfigurowanie zapytań o media

Krok 1: Zapytania o media

Jest kilka rzeczy, które musimy dostosować, aby menu działało z naszym niestandardowym projektem, gdy zmniejszy się rozmiar ekranu. Wiąże się to głównie z dopełnieniem, linią wysokości, kolorami tekstu i kolorami tła. Spójrz na poniższy CSS i spójrz na komentarze, aby uzyskać wyjaśnienie dla każdej sekcji.

Krok 2: Ciesz się swoimi wynikami

Zapisz plik, odśwież przeglądarkę i baw się przy rozmiarze przeglądarki. Jak widać menu ładnie pasuje do naszego projektu.

foundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsive

Wniosek

Tak więc, oto podsumowanie naszego tutoriala, w jaki sposób możemy stworzyć niestandardowe menu responsywne za pomocą górnego paska z frameworku Foundation 4. Pamiętaj, że menu nie musi znajdować się u góry strony. Po prostu umieść go we własnym wierszu i kolumnach div, możesz go praktycznie umieścić w dowolnym miejscu!

Fundacja jest świetnym narzędziem do szybkiego opracowywania responsywnych projektów, a kiedy znasz swoją drogę, możesz ją w dowolny sposób kształtować. Baw się dobrze!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.