Kodowanie pełnego menu nawigacyjnego w CSS3
Menu nawigacyjne i łącza są prawdopodobnie najważniejszymi elementami interfejsu do układu strony. Są to jedyne sklepy dla użytkowników podróżować między stronami i wchodź w interakcję z całą zawartością, którą stworzyłeś. Breadcrumb oferuje podobną funkcjonalność z dodatkową zaletą śledzenie aktualnej pozycji. Będziesz w stanie wyświetl wszystkie poprzednie ścieżki łącza gdy użytkownik przechodzi przez hierarchię witryny.
W tym samouczku stworzymy genialne menu nawigacyjne z niektórymi efektami CSS3. Zostało to przetestowane pod kątem działania we wszystkich głównych przeglądarkach zgodnych z CSS3, nawet starsze przeglądarki, które nie obsługują CSS3, nadal będą go renderować poprawnie w większości przypadków.
Zanim zagłębimy się w kod, porozmawiamy trochę o funkcjonalności naszego nawigatora, pełnego samouczka na skoku!
Oferowanie szlaku
Ścieżka nawigacyjna nie jest bardziej skomplikowana niż jakiekolwiek inne menu. Nasze style będą wykorzystywać znacznie bardziej złożone właściwości CSS niż większość przykładów, ale nasz szablon z pustymi kośćmi jest nadal na miejscu, aby prowadzić użytkowników z jednej strony na drugą.
W tym przykładzie będziemy odtwarzać podobny styl jak menu pomocy Google. Możesz wyświetlić ich menu na stronie pomocy Gmaila, aby dowiedzieć się, dokąd zmierzamy. Ostatecznie chcemy zapewnić naszym użytkownikom najlepsze wrażenia, niezależnie od ich systemu operacyjnego lub oprogramowania przeglądarki, dlatego zbudowałem 2 różne przykłady kodu wspierające łagodną degradację wśród starszych przeglądarek.
Pierwszy jest zbudowany przy użyciu niestandardowe obrazy tła i odpowiednie wyrównania CSS. Wszystkie zdarzenia na zawisie i aktywne zdarzenia są wstępnie zbudowane za pomocą kilku stylów CSS, ale użytkownicy, którzy mają wyłączone obrazy, nie będą mogli doświadczyć tych efektów! Dlatego też skonstruowałem podobne menu z gradientami CSS, zaokrąglonymi rogami i cieniami.
Jeśli denerwujesz się wspierając oba style, możesz wybierać między nimi dla własnej strony. Większość odwiedzających będzie używać obrazów domyślnie, ale przekopać się przez narzędzie do analizy witryny, jeśli chcesz bardziej precyzyjnych danych odwiedzających.
Dość słów, wskoczmy do projektu! Zaczniemy od skonstruowania podstawowej struktury HTML i przejścia do różnych efektów stylizacji. Po pierwsze musisz pobrać obraz wymagane dla projektu.
Bare-Bones HTML
Zaczynam swój dokument za pomocą standardowy szablon strony HTML5. Obejmuje to domyślny doctype, połączony CSS i wszystkie podstawowe elementy. Dodałem poniższy kod, jeśli chcesz w ten sposób uruchomić własny dokument. Zwróć uwagę, że nie powinno to wpływać na to, jak wyświetla się Twój breadcrumb, więc jeśli chcesz, możesz użyć własnego szablonu strony.
Strona domyślna
Podzielę kod na dwa różne bloki. Pierwszy blok ze zdjęciami jest zbudowany w nieco inny sposób, a następnie nasze menu bez obrazów. Każdy zestaw ma swój własny ID dzięki czemu możemy łatwiej zidentyfikować treść. Jeśli jesteś fanem jQuery, możesz użyć Selektor #ID manipulować wszystkimi wewnętrznymi elementami DOM.
Najpierw mamy zawierające div z identyfikatorem “bułka tarta“. W pliku demo użyłem tego do oddzielenia naszego kodu i przeniesienia go na stronę z dodatkowymi marginesami. Możesz usunąć ten zewnętrzny div, ale będziesz musiał zmienić styl wszystkiego, aby pasował do nowego szablonu. Opuszczenie pojemnika naprawdę nie zaszkodzi, ponieważ łatwiej będzie ci sterować pozycjonowaniem.
Wewnętrznie zbudowałem nawigację używając nieuporządkowanej listy. Jest tak wiele unikalnych sposobów dostosowywania stylizowanych list HTML, a bułka tarta to tylko jedna z nich. Możesz zauważyć, że podałem element listy początkowej a klasa z “pierwszy“. Jest to potrzebne do dodatkowego dopełnienia, aby utrzymać pozycje menu w linii. Dodatkowo mały blok przęsła jest dodany, więc mamy odpowiednią lewą krawędź, która nie pokrywa się z obrazem tła.
Dodatkowo każde ogniwo kotwiczące jest obsadzone malejącą liczbą dla indeks Z własność. Będziemy potrzebować zdjęć czy każdy z naszych łączy się pokrywa aby poprawnie wyświetlić strzałkę nawigacyjną. Najłatwiejszym sposobem osiągnięcia tego jest dostosowywanie indeksu Z więc każdy link nakłada się na następny. Zacząłem od 9 i stamtąd spadł, ale jeśli masz więcej linków w swoim menu, zacznij od wyższej liczby całkowitej.
Menu bez obrazów
Do z wdziękiem degraduj naszą bułkę potrzebujemy dodatkowego zestawu elementów listy HTML. Jeśli próbujesz wycofać się z pojedynczej nawigacji, możesz użyć jQuery do wykrycia agenta przeglądarki i odpowiedniego zastosowania identyfikatora. Niestety nie zawsze jest to niezawodne (na przykład dla niektórych użytkowników telefonów komórkowych). Innym rozwiązaniem jest dołącz arkusz stylów specyficzny dla IE i ukryj lub pokaż, które menu działa najlepiej - ale oczywiście ta opcja dotyczy tylko przeglądarki Internet Explorer.
breadcrumb2 to nasz nowy identyfikator używany do kierowania do menu bez obrazów. Trzymając się tego wzoru, którego użyłem okruchy2 jako klasa dla listy nieuporządkowanej. Zwróć uwagę na powód, dla którego używamy klasy jest dla niego prostota powielania tych menu, więc jeśli chcesz mieć kilka różnych okruchów na swojej stronie, w tych klasach nigdy nie będzie to problemem.
Zatrzymaliśmy .pierwszy klasa, ale dodatkowo dołączona .ostatni, ubiegły, zeszłyklasa na ostatnim elemencie listy. Bez obrazów nie możemy powielać strzałek dla każdego elementu menu nawigacyjnego, dlatego użyłem niektórych zaokrąglone rogi urozmaicić drugie menu. .pierwszy klasa i .ostatni, ubiegły, zeszły manipuluj promieniem granicy na samych krawędziach naszego menu, aby stworzyć naprawdę fajny styl wyglądający na Web 2.0.
Przesuwne obrazy tła CSS
Dla niektórych prostszych efektów połączyłem obie bułki tartej razem podczas budowania właściwości. Jest to przydatne, ponieważ nie tylko oszczędza trochę miejsca, ale gdy wracasz do edycji stylów, jest to łatwiej dostosować twój własny wygląd.
Dla obu #breadcrumb i # breadcrumb2 Ustawiłem styl listy: brak; więc wszystkie wewnętrzne elementy nie będą miały znaczników. Możesz je zostawić, jeśli podoba ci się efekt, ale uważam, że HTML staje się męczący, aby pracować, a tworzenie nowych ikon jest znacznie łatwiejsze. Zacznijmy od naszego .bułka tarta klasa.
.okruchy display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visited color: # 666; Blok wyświetlacza; float: left; rozmiar czcionki: 12px; margin-left: -13px; dopełnienie: 7px 17px 11px 25px; pozycja: względna; dekoracja tekstowa: brak; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); powtórz tło: nie powtarzaj; pozycja tła: 100% 0; pozycja: względna; .crumbs li a: hover color: # 333; pozycja tła: 100% -48px; cursor: pointer; .crumbs li a: active color: # 333; pozycja tła: 100% -96px; .crumbs li.first a span height: 29px; szerokość: 3px; border-left: 1px solid # d9d9d9; pozycja: absolutna; top: 0px; left: 0px; My ustaw naszą nieuporządkowaną listę na blok więc nic nie skrada się po okolicy. Zwróć uwagę, że elementy listy są wyświetlane w wierszu podczas gdy każde łącze kotwicowe ma znacznie więcej miejsca do rozłożenia. Chcemy, aby cała przestrzeń w naszym menu była klikalna, więc to wymaga budowanie naszych kotwic jako elementów blokowych.
Użyłem obrazu o nazwie bg-crumbs.png na tło. Jest to znane jako prosty arkusz sprite w CSS lub alternatywnie drzwi przesuwne technika. Oznacza to, że gdy użytkownik najedzie lub kliknie łącze, zmieniamy położenie tła, aby wyświetlić zaktualizowany styl. Ten pojedynczy obraz zawiera wszystkie 3 projekty, których potrzebujemy do utworzenia tła nawigacyjnego w różnych pozycjach, abyśmy mogli użyć pozycja tła właściwość do przeniesienia na podstawie interakcji użytkownika.
Niestandardowe efekty z CSS3
Oryginalny projekt breadcrumb jest znacznie prostszy w tworzeniu. Jest to zauważalne, ponieważ wiele właściwości CSS jest bardziej podstawowych niż można by sobie wyobrazić, ale teraz zaczynamy skupiać się na duplikowaniu tych efektów tylko za pomocą CSS3!
Poszczególne style zajmują dużo miejsca, więc podzielę je na 2 bloki kodu.
.crumbs2 display: block; margin-left: 27px; dopełnienie: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visited color: # 666; Blok wyświetlacza; float: left; rozmiar czcionki: 12px; dopełnienie: 7px 16px 7px 19px; pozycja: względna; dekoracja tekstowa: brak; border: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a obraz-tła: -webkit-gradient (liniowy, lewy dolny, lewy górny, zatrzymanie koloru (0.45, rgb (241 241 241)), zatrzymanie koloru (0.73, rgb (245,245,245))); background-image: -moz-linear-gradient (środkowe dno, rgb (241 241 241) 45%, rgb (245 245,245) 73%); / * Dla Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Dla Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
The .okruchy2 menu jest używane Gradienty CSS aby powielić efekty tła. Jeśli nie jesteś z nimi zaznajomiony, bardzo polecam przewodnik CSS Tricks na temat gradientów CSS3, który powinien pomóc Ci w efektywnym wykorzystaniu gradientów CSS3. Zawierają one kilka dodatkowych właściwości dla przeglądarek Microsoft i Opera, ale nie są one w pełni obsługiwane we wszystkich przypadkach. Nie umieściłem ich tutaj w kodzie demo - ale dobrze jest zrozumieć wszystkie opcje.
-webkit-gradient i -moz-linear-gradient to podstawowe rozwiązania, które wykonują większość pracy. Dołączyłem starszy kod do starszych wersji Internet Explorera, ale to nie jest gwarantowane wyświetlać poprawnie cały czas (w końcu używamy potężnych technik renderowania obrazu). Zauważ, że ustawiłem oba kody kolorów RGB i hex między właściwościami tła. Możesz zachować jedną lub drugą metodę, jeśli jesteś bardziej komfortowy.
The promień granicy kod jest stosowany tylko do naszej nawigacji pomocniczej. Daje to zgrabny efekt w lewym górnym i prawym dolnym rogu całego naszego menu nawigacyjnego. Pasek wydaje się niemal wyskakiwać ze strony - naprawdę fantastyczny efekt w przeglądarkach, które obsługują style, ale obejmują one tylko domyślne stany naszych linków. Zbudujmy teraz efekty najechania podobne do tych, które wykorzystaliśmy powyżej.
CSS3 Borders and Shadows
Za każdym razem, gdy użytkownik najedzie kursorem na link, chcemy zaktualizować kilka rzeczy. Najpierw musimy przyciemnij kolory obramowania na górze i na dole naszego aktywnego elementu. Widać to zarówno na obrazach, jak i w stanach aktywacji i aktywacji.
.okruchy 2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (liniowy, lewy dolny, lewy górny, zatrzymanie koloru (0,45, rgb (241,241,241)), zatrzymanie koloru (0,73, rgb (248,248,248))); background-image: -moz-linear-gradient (środek dołu, rgb (241 241 241) 45%, rgb (248 248 248) 73%); / * Dla Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Dla Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; kolor: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (liniowy, lewy dolny, lewy górny, zatrzymanie koloru (0.45, rgb (224,224,224)), zatrzymanie koloru (0.73, rgb (235,235,235))); background-image: -moz-linear-gradient (środkowy dół, rgb (224,224,224) 45%, rgb (235 235 235) 73%); / * Dla Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Dla Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada wstawka; -webkit-box-shadow: -1px 1px 1px 0px #dadada wstawka; -moz-box-shadow: -1px 1px 1px 0px #dadada; kolor: # 333;
Używam dokładnie tego samego kodu gradientu, którego używaliśmy powyżej, ale tym razem kolory są znacznie inne, jeśli zauważysz nasze wartości RGB. Każdy ze stanów przyciemni kolor tekstu # 333, jeszcze inne deskryptory zostały nieco zmienione, aby odpowiadały poleceniom użytkownika.
Na zawisie zobaczysz błyszczący wytłoczony efekt które w połączeniu z zaciemnione granice daje style wyskakujące strony. Jeśli klikniesz i przytrzymasz, przejdziesz do stanu aktywnego, który zawiera zaciemniony gradient tła. Ten efekt powoduje, że przyciski wyglądają tak, jakby były “prasowany” na stronie.
Aplikujemy również box-shadow właściwości z nowych specyfikacji CSS3. -webkit, -moz, i domyślne style są używane z tymi samymi ustawieniami. Najechanie wyświetla a jasny cień wychodzi z dołu wybranego łącza. Gdy jest aktywny, cień zostanie utworzony na górnej, prawej i dolnej krawędzi. Ten efekt jest tworzony za pomocą wstawka słowo kluczowe dodane na końcu każdej linii właściwości box-shadow. Znowu CSS Tricks jest twoim najlepszym przyjacielem tutaj z niesamowitym artykułem na temat box-shadow, ponieważ mówi o składni i jej właściwym użyciu w CSS3.
Bonus: więcej stylów
Oprócz kodu samouczka dodałem dodatkowe obrazy tła z dostosowanymi schematami kolorów. Próbowałem z oryginalnego tła i korzystałem z Adobe Photoshop, aby stworzyć kilka odmian, które możesz zastosować na swojej własnej stronie.
Te pliki dodatkowe są zawarte w pliku źródłowym które można pobrać w formacie archiwum .zip w sekcji poniżej.
Możesz sprawdzić obrazek powyżej, aby dowiedzieć się, o czym mówię. Jeśli potrzebujesz określonego schematu kolorów, otwórz go Photoshop> Obraz> Dopasowania> Barwa / Nasycenie aby zmodyfikować schemat kolorów, aby dopasować swój własny szablon, pamiętaj o zaznacz opcję Koloruj w panelu Barwa / Nasycenie, jeśli kolor w ogóle się nie zmienił.
Wniosek
Ten samouczek powinien zapoznać Cię z nowszymi technikami CSS3. Stworzyliśmy dwa fantastyczne menu typu breadcrumb stylizowane w podobny sposób i zbudowaliśmy je w taki sposób, aby mogło się z łatwością obniżyć w starszych przeglądarkach. Dodatkowo zaoferowałem mój kod demo i kilka dodatkowych zdjęć do zabawy.
Czy szczególnie podoba Ci się styl, który tu stworzyliśmy? A może masz pytania lub pomysły na ulepszenie kodu samouczka? Podziel się swoimi przemyśleniami z nami w obszarze dyskusji poniżej i nie zapomnij pobrać plików źródłowych, aby móc grać z demo!
Więcej samouczków CSS3
Chcesz więcej CSS3? Poniżej przedstawiamy nasze artykuły, aby zrozumieć CSS3 teoretycznie i praktycznie!
- CSS3: Utwórz logo kanału RSS
- CSS3: Utwórz pole wyszukiwania
- CSS3: Utwórz formularz kontaktowy AJAX
- CSS3: Budowanie stron HTML5 / CSS3
