Nawigacja na stronach internetowych jest formą listy, a nawigacja na kartach jest jak pozioma. Tworzenie poziome nawigacji po kartach przy użyciu CSS jest dość łatwe, ale CSS 3 daje nam jeszcze więcej narzędzi, aby wyglądały jeszcze ładniej.
Ten samouczek poprowadzi cię przez HTML i CSS potrzebne do utworzenia menu z kartami CSS. Kliknij ten link, aby zobaczyć, jak będzie wyglądać.
To menu z kartami używabrak obrazów, tylko HTML i CSS 2 i CSS 3. Można je łatwo edytować, aby dodać więcej kart lub zmienić tekst w nich.
Obsługa przeglądarki
To menu kart zadziaławszystkie główne przeglądarki. Internet Explorer nie wyświetli zaokrąglonych rogów, ale w przeciwnym razie wyświetli karty podobne do Firefox, Safari, Opera i Chrome.
Napisz swoją listę menu
Wszystkie menu i karty nawigacyjne są po prostu nieuporządkowaną listą. Pierwszą rzeczą, którą chcesz zrobić, jest napisanie nieuporządkowanej listy linków do miejsca, w którym ma działać nawigacja z kartami.
W tym samouczku założono, że piszesz swój HTML w edytorze tekstu i wiesz, gdzie umieścić kod HTML swojego menu na swojej stronie internetowej.
Napisz swoją nieuporządkowaną listę w ten sposób:
class = "tablist">CSS 3id = "current"> TabsDlaMenu
class = "tablist"iid = "current".Pierwszy jest wymagany. Jeśli nie umieścisztablistaklasę na twojej nieuporządkowanej liście, karty nie będą działać. Drugi jest opcjonalny. Połóżid = "current"na dowolnej karcie, którą chcesz podświetlić na tej stronie. Zwykle używamy tego do podświetlenia strony, na której się znajdujemy, ale można jej użyć do wyróżnienia najważniejszej zakładki. Lub możesz go całkowicie usunąć.
Rozpocznij edycję arkusza stylów
Możesz użyć zewnętrznego arkusza stylów lub wewnętrznego arkusza stylów. Przykładowa strona menu używa wewnętrznego arkusza stylów w
dokumentu.Najpierw zaprojektujemy UL
Tu używamy klasytablista .w kodzie HTML. Zamiast stylizować etykietę UL, która będzie stylizować wszystkie nieuporządkowane listy na twojej stronie, powinieneś stylizować tylko klasę UL.tablista Zatem pierwszy wpis w twoim CSS powinien wyglądać tak:
.tablist {}
Lubimy wstawiać nawiasy klamrowe (}) przed czasem, więc nie zapominamy o tym później.
Mimo że używamy nieuporządkowanej listy do listy menu kart, ale nie chcemy, aby wkradły się w niej liczby punktorów lub liczb. Zatem pierwszym stylem, który powinieneś dodać, jest.styl listy: brak; To mówi przeglądarce, że podczas gdy jest to lista, jest to lista bez wcześniej ustalonych stylów (takich jak punktory czy liczby).
Następnie możesz ustawić wysokość swojej listy tak, aby pasowała do miejsca, które chcesz wypełnić. Wybraliśmy 2em na nasz wzrost, ponieważ jest to podwójny standardowy rozmiar czcionki i daje około połowy wartości nad i pod tekstem karty. Wcześniejszewzrost: 2em; Ale możesz ustawić szerokość do dowolnego rozmiaru. Znaczniki UL automatycznie zajmują 100% szerokości, więc jeśli nie chcesz, aby był mniejszy niż bieżący pojemnik, możesz zostawić szerokość na zewnątrz.
Na koniec, jeśli twój główny arkusz stylów nie ma presetów dla znaczników UL i OL, będziesz chciał je umieścić. Oznacza to, że powinieneś wyłączyć granice, marginesy i dopełnienie na UL. wypełnienie: 0; margin: 0; granica: brak; Jeśli już wyzerowałeś znacznik UL, możesz zmienić marginesy, dopełnienie lub obramowanie do czegoś, co pasuje do Twojego projektu.
Twoja ostateczna klasa .tablist powinna wyglądać tak:
.tablist {styl listy: brak; wzrost: 2em; wypełnienie: 0; margin: 0; granica: brak; }
Edytowanie elementów listy LI
Po stylizacji nieuporządkowanej listy musisz umieścić w niej znaczniki LI. W przeciwnym razie będą one działać jak standardowa lista, a każdy przejdzie do następnego wiersza bez prawidłowego umieszczenia kart.
Najpierw skonfiguruj swoją własność stylu:
.tablist li {}
Następnie chcesz unieść swoje karty tak, aby były wyrównane w płaszczyźnie poziomej. float: left;
Nie zapomnij dodać marginesu między kartami, aby nie łączyć się razem. margin-right: 0.13em;
Twoje style li powinny wyglądać tak:
.tablist li {float: left; margin-right: 0.13em; }
Tworzenie zakładek wyglądających jak karty z CSS 3
Aby wykonać większość podnoszenia ciężarów w tym arkuszu stylów, kierujemy się linkami na nieuporządkowaną listę. Przeglądarki rozpoznają, że linki robią więcej na stronie internetowej niż inne znaczniki, więc łatwiej jest uzyskać starsze przeglądarki, aby zachować zgodność z takimi stanami, jak stany na hover, jeśli dołączasz je do tagu kotwicy (linki). Napisz najpierw właściwości swojego stylu:
.tablist li a {} .tablist li a: hover {}
Ponieważ te karty powinny działać jak karty w aplikacji, chcesz, aby cały obszar karty był klikalny, a nie tylko tekst połączony. Aby to zrobić, musisz przekonwertować znacznik A ze zwykłego stanu "wbudowanego" w element blokowy. Blok wyświetlacza; (Jeśli chcesz dowiedzieć się więcej na temat różnicy, przeczytaj artykuł Blokuj poziom a elementy liniowe).
Następnie można łatwo wymusić wzajemne symetryczne zakładki, ale mimo to dopasować je do szerokości tekstu, aby zrobić prawą i lewą podkładkę tak samo. Użyliśmy skróconej właściwości dopełnienia, aby ustawić górną i dolną wartość 0, a prawą i lewą - 1em. dopełnienie: 0 1em;
Zdecydowaliśmy się również usunąć podkreślenia linków, aby karty wyglądały mniej jak linki.Ale jeśli twoja publiczność może być zdezorientowana przez to, pomiń tę linię. link-decoration: none;
Umieszczając cienką ramkę wokół zakładek, wygląda ona jak karty. Wykorzystaliśmy stenię graniczną, aby umieścić granicę wokół wszystkich czterech stron granica: 0,06em stałe # 000; A następnie wykorzystał właściwość border-bottom, aby usunąć ją z dołu. border-bottom: 0;
Następnie wprowadziliśmy korekty czcionki, koloru i tła kart. Ustaw te style, które pasują do Twojej witryny. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kolor: # 000; background-color: #ccc;
Wszystkie powyższe style powinny iść w selektorze.tablist li a, reguła tak, aby wpłynęły ogólnie na znaczniki zakotwiczenia. Aby zwiększyć widoczność zakładek, dodaj kilka reguł stanu.tablist li a: hover.
Chcemy zmienić kolor tekstu i tła, tak aby zakładka była wyświetlana po najechaniu myszą na niego. tło: # 3cf; kolor: #fff;
I dodaliśmy przypomnienie dla przeglądarek, że chcemy, aby link nie był podkreślony. dekoracja tekstowa: brak; Inną popularną metodą jest ponowne włączenie podkreślenia po najechaniu myszą na kartę. Jeśli chcesz to zrobić, zmień to na dekoracja tekstowa: podkreślenie;
Ale gdzie jest CSS 3?
Jeśli zwracasz uwagę, prawdopodobnie zauważyłeś, że nie ma żadnych stylów CSS 3 używanych w arkuszu stylów. Ma to tę zaletę, że działa w dowolnej nowoczesnej przeglądarce, w tym Internet Explorer. Ale nie sprawia, że zakładki wyglądają jak kwadraty. Dodając promień obramowania wywołania stylu CSS 3 (i powiązane z nim połączenia specyficzne dla przeglądarki), można zaokrąglić krawędzie, aby wyglądały bardziej jak karty w folderze manila.
Style, które powinieneś dodać do .tablist li a zasada to: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Oto ostatnie reguły stylu, które napisaliśmy:
.tablist li a {display: block; dopełnienie: 0 1em; dekoracja tekstowa: brak; granica: 0,06em stałe # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kolor: # 000; background-color: #ccc; / * CSS 3 elementy * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; kolor: #fff; dekoracja tekstowa: brak; }
Dzięki tym stylom masz menu z zakładkami, które działa we wszystkich głównych przeglądarkach i wygląda jak ładne drukowane zakładki w przeglądarkach zgodnych z CSS 3. Na następnej stronie znajdziesz jeszcze jedną opcję, dzięki której możesz ubierać się jeszcze bardziej.
Zaznacz bieżącą kartę
W utworzonym przez nas kodzie UL miał jeden element listy z identyfikatorem. To pozwala ci nadać LI inny styl od reszty. Najczęstszą sytuacją jest, aby obecna karta wyróżniała się w jakiś sposób. Innym sposobem na myślenie o tym jest to, że chcesz wyszarzyć karty, które nie są aktywne. Następnie zmieniasz, gdzie id jest na różnych stronach.
Projektujemy zarówno znacznik #current A, jak i #current A: hover sta, więc oba są nieco inne. Możesz zmienić kolor, kolor tła, a nawet wysokość, szerokość i dopełnienie tego elementu. Wprowadź wszelkie zmiany w swoim projekcie.
.tablist li # current a {background-color: # 777; kolor: #fff; } .tablist li # current a: hover {background: # 39C; }
I jesteś skończony! Właśnie stworzyłeś menu z zakładkami do swojej witryny.
