Jak tworzyć i zaprojektować pasek nawigacyjny w CSS?
Teraz samo posiadanie paska nawigacyjnego nie jest ważne raczej posiadanie przystojnego paska nawigacyjnego ma znacznie większe znaczenie. W tym poście poprowadzimy sposób tworzenia i zaprojektowania paska nawigacyjnego.
Zacznijmy.
Rodzaj pasków nawigacyjnych
Pasek nawigacyjny może mieć dwa typy, które są następujące.
- Poziomy pasek nawigacji
- Pionowy pasek nawigacji
Omówmy je szczegółowo.
Poziomy pasek nawigacji
W celu utworzenia poziomego paska nawigacyjnego, możesz użyć list lub topnav. Zbadajmy te podejścia za pomocą przykładów.
Tworzenie paska nawigacyjnego za pomocą list
Do utworzenia poziomego paska nawigacyjnego można użyć elementów listy inline.
Przykład
Ten przykład pokazuje, jak stworzyć bardzo podstawowy pasek nawigacyjny za pomocą inline
Html
Tutaj utworzyliśmy niektóre elementy listy i zagnieżdżliśmy kilka tagów kotwicznych w środku
CSS
ulTyp w stylu listy: Brak;
Margines: 0;
Wyściółka: 0;
li
Wyświetl: Inline;
A
Zielony kolor;
Text-Align: Center;
Wyściółka: 15px 18px;
Dekoracja tekstu: Brak;
Rozmiar czcionki: 17px;
Domyślnie
- Elementy powinny otrzymać margines i wyściółka 0px, a typ stylu listy powinien być ustawiony na brak. Na koniec zaprojektowaliśmy tagi kotwiczne zgodnie z naszym pragnieniem.
Wyjście
Poziomy pasek nawigacji został utworzony przy użyciu elementów listy inline.
Tworzenie paska nawigacyjnego za pomocą div
Zbadajmy, jak zrobić poziomy pasek nawigacyjny za pomocą Div.
Html
Dom
O
Usługi
Skontaktuj się z nami
W powyższym kodzie HTML utworzyliśmy div i przypisaliśmy ją topnav klasa. Wewnątrz tej div zagnieliśmy cztery tagi kotwiczne, a pierwszy znacznik kotwicy otrzymał aktywną klasę, która umożliwia użytkownikowi wiedzieć, na której sekcji jest.
CSS
ciałoMargines: 0;
.topnav
kolor tła: Gray;
Olflow: ukryty;
.topnav a
float: lewy;
kolor biały;
Text-Align: Center;
Wyściółka: 15px 18px;
Dekoracja tekstu: Brak;
Rozmiar czcionki: 17px;
.TOPNAV A: Hover
Kolor tła: Ghost White;
czarny kolor;
.topnav a.Active
kolor tła: łosoś;
kolor biały;
Klasa Topnav służy do dodania koloru tła do całego paska nawigacyjnego. Następnie zaprojektowaliśmy linki obecne wewnątrz kontenera Div zgodnie z naszymi wymaganiami. Ponadto dodaliśmy stylistykę podnoszenia i aktywnego wpływu na link nawigacyjny.
Wyjście
Korzystając z DIV i TAG, pomyślnie stworzyliśmy poziomy pasek nawigacyjny.
Więcej o poziomej pasku nawigacji!
Jest jeszcze kilka zabawnych rzeczy, które możesz dodać do paska nawigacyjnego, zbadajmy je.
Jak unieść link do prawej w pasku nawigacji
Jedną interesującą rzeczą, którą możesz zrobić, jest to, że możesz unosić link obecny w pasku nawigacyjnym po prawej stronie, jeśli chcesz. Ustaw właściwość Float tego konkretnego linku w prawo i zobacz zmianę.
Dom
O
Usługi
Skontaktuj się z nami
Tutaj ustawiliśmy właściwość Float ostatniego znacznika kotwicy na prawo, a ponadto przypisaliśmy ją klasę aktywną.
Wyjście
Połączenie zostało dobrze pomyślnie uniesione.
Jak utworzyć najlepszy stały pasek nawigacyjny
Aby naprawić pasek nawigacyjny na górze, nadaj kontenerowi Div ustaloną pozycję i pewną szerokość.
Html
Dom
O
Usługi
Skontaktuj się z nami
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Trochę treści.
Aby pokazać działanie stałego najlepszego paska nawigacji.
CSS
.topnavkolor tła: Gray;
Olflow: ukryty;
Pozycja: Naprawiono;
TOP: 0;
szerokość: 100%;
.treść
Wyściółka: 20px;
Wysokość: 1000px;
Przypisujemy pasek nawigacyjny ustalona pozycja i szerokość 100%. Ponadto ustawiamy górę na 0px.
Wyjście
Z powodzeniem stworzono stały pasek nawigacyjny.
Jak utworzyć stały pasek nawigacji dolnej
Możesz także utworzyć stały dolny pasek nawigacji. Oto jak to robisz.
CSS
.topnavkolor tła: Gray;
Olflow: ukryty;
Pozycja: Naprawiono;
Dół: 0;
szerokość: 100%;
Tutaj oprócz podania paska nawigacyjnego ustalona pozycja, dół został ustawiony na 0px.
Wyjście
Stały dolny pasek nawigacyjny działa poprawnie.
Jak stworzyć lepki pasek nawigacyjny
W celu utworzenia lepkiego paska nawigacyjnego użyj lepkiej wartości właściwości pozycji CSS.
CSS
.topnavkolor tła: Gray;
Olflow: ukryty;
Pozycja: lepka;
TOP: 0;
Tutaj ustawiliśmy pozycję paska nawigacyjnego na lepką.
Wyjście
Pomyślnie stworzono lepki pasek nawigacyjny.
Pionowy pasek nawigacji
W celu utworzenia pionowego paska nawigacyjnego, wszystko, co musisz zrobić, to ustawić wyświetlanie linków wewnątrz paska nawigacyjnego na blok.
CSS
.topnav aBlok wyświetlacza;
kolor biały;
Text-Align: Center;
Wyściółka: 15px 18px;
Dekoracja tekstu: Brak;
Rozmiar czcionki: 17px;
Tagi kotwicy są wyświetlane jako elementy na poziomie bloków, aby utworzyć pionowy pasek nawigacyjny.
Wyjście
Utworzono pionowy pasek nawigacyjny.
Jak wyrównać pionowy pasek nawigacji
Aby wyrównać pionowy pasek nawigacji, możesz unosić go do żądanej pozycji, a także nadać mu szerokość.
CSS
.topnavkolor tła: Gray;
Szerokość: 30%;
Float: Racja;
Olflow: ukryty;
Tutaj ustawiamy właściwość pływaka prawa i dajemy DIV szerokość 30%.
Wyjście
Pionowy pasek nawigacyjny został uniesiony w prawo.
Wniosek
Pasek nawigacyjny odgrywa istotną rolę w zwiększaniu wrażeń użytkownika witryny, dlatego możesz zrobić przyjemny pasek nawigacyjny za pomocą różnych podejść. Do tworzenia poziomego paska nawigacyjnego możesz użyć elementów listy HTML lub kombinacji DIV i TAG w CSS. Możesz zrobić wiele zabawnych rzeczy ze swoim paskiem nawigacyjnym, takich jak pływanie linku do prawej, uczynić go stałym paskiem nawigacyjnym lub uczynić go lepkim zgodnie z Twoimi wymaganiami. Poza tym możesz również utworzyć pionowy pasek nawigacyjny, wyświetlając łącza jako elementy na poziomie blokowym. Ten post prowadzi do tworzenia i projektowania paska nawigacyjnego.