elementy i powiązany link zostaną określone w znaczniku. Html
Nawigacja pionowa W rezultacie struktura menu nawigacyjnego będzie wyglądać tak:
CSS można użyć do przekształcenia zwykłego menu HTML w atrakcyjne wizualnie słupki nawigacyjne. Zastosujmy więc właściwości CSS do dodanych elementów HTML.
Styl wszystkie elementy
* Wszystkie elementy pliku HTML są dostarczane z właściwościami marży i wyściółki z zestawem wartości jako 0px.
Styl pionowy nav div
.pionowy nav „„.pionowy nav ”Służy do dostępu do klasy DIV Pion-Nav. Poniżej podano właściwości:
"kolor tła ”Określa kolor tła elementu. "szerokość „Właściwość dostosowuje szerokość elementu. "wysokość ”Właściwość dostosowuje wysokość elementu. "Padding-Left „Właściwość ustawia miejsce po lewej stronie zawartości elementu. "Wyściółka „Właściwość ustawia miejsce na górze treści elementu. "rodzina czcionek „Właściwość stosuje styl czcionki do tekstu elementu. Lista jest dostarczana, aby upewnić się, czy przeglądarka nie obsługuje pierwszego stylu, druga zostanie zastosowana do czcionki. Style H1 Element of Pion-Nav Div
.pion-nav h1 Następujące właściwości są stosowane do nagłówka H1 Element:
"-but-ds „Nieruchomość ustawia przestrzeń na dole nagłówka. "kolor ”Właściwość ustawia określony kolor czcionki. Jak dotąd zastosowane właściwości wyświetlą menu nawigacji, jak pokazano na poniższym obrazku:
Teraz usuńmy pociski z listy.
Styl „ul” elementu pionowego nav div
.pion-nav ul „„List w stylu „Właściwość z ustawioną wartością jako„nic ”Usunie pociski z listy.
Styl „A” elementu Li Element
.pion-nav ul li a „„.pionowy nav ul li a ”Definiuje ścieżkę Tag. Zastosowane są do niego następujące właściwości:
"dekoracja tekstu ”Z wartością„nic ”Usuwa dekorację podkreślenia z listy. "wyświetlacz „Właściwość z ustawioną wartością jako„blok ”Ustawia każdy element listy w jednym wierszu. "szerokość „Własność jest wykorzystywana do ustawienia szerokości elementu. "tło „Własność jest wykorzystywana do dodawania efektów do tła elementu. "kolor „Właściwość określa kolor czcionki. "Shadow Box „Obiekt określa przesunięcia X i Y, rozmycie i promień rozprzestrzeniania się oraz kolor cienia. "Radiusz graniczny „Właściwość sprawia, że krawędzie elementu jest okrągłe. "margines ”Właściwość ustawia przestrzeń wokół elementu. "wyściółka „Właściwość określa przestrzeń wokół treści elementu. W rezultacie pasek nawigacyjny będzie wyglądał w następujący sposób:
Zastosujmy niektóre efekty przejściowe do menu nawigacji utworzonych powyżej.
Wskazówka bonusowa: Zastosuj przejście do pionowego menu nawigacji
Teraz zastosujemy przejście do „A " Element:
przejście: wszystkie 0.3s łatwość; Oto opis powyższego bloku kodu:
Przejście-proporcja jest określona jako „Wszystko ”Co oznacza przejście zastosowane do wszystkich właściwości. Przejście jest określone jako „0.3s ". Funkcja przejściowa jest określona jako „łatwość ”, Co powoduje wzrost prędkości do środka przejścia, a następnie spowalnia z powrotem na końcu. Styl „A” Element na zawisie
.Vertical-Nav ul li A: Hover Powyższe właściwości zastosowane do elementu „A” pionowego Nav opisano poniżej:
"kolor tła „Właściwość określa kolor tła elementu. "kolor „Właściwość określa kolor czcionki elementu. "przekształcać „Własność jest stosowana o wartości jako skali (1.1, 1.5). Ta funkcja skali () definiuje transformację płaszczyzny 2D. Zapisz wyżej wymieniony kod i otwórz go w przeglądarce. Pasek menu nawigacji będzie wyglądał tak:
Z powodzeniem nauczyliśmy się tworzyć pionowe menu nawigacji z CSS.
Wniosek
Pasek nawigacyjny odgrywa istotną rolę w uczynieniu dowolnej witryny przyjaznej dla użytkownika. Składa się z listy linków do różnych sekcji aplikacji. W html,
I Elementy są wykorzystywane do tworzenia listy linków, szczególnie na pasku nawigacji. Aby uczynić je interaktywnymi, stosowane są różne właściwości stylizacji za pomocą CSS. To badanie wyjaśniło procedurę tworzenia i animacji pionowego menu nawigacyjnego za pomocą CSS.
