Kod

Stwórz wspaniałe menu w CSS3

CSS3 Menu Thumbnail Pojawienie się CSS3 wprowadziło świat możliwości dla projektantów stron internetowych i programistów. Dzięki animacjom, cieniom, zaokrąglonym narożnikom i innym elementom można łatwo stylizować i nadal ważyć mniej niż kiedykolwiek wcześniej.

Nawigacja strony internetowej jest jednym z najbardziej podstawowych aspektów, które mogą wpłynąć na komfort użytkownika. Zamiast ładować menu pojedynczymi obrazkami lub sprite'ami, czemu nie zrobić całej rzeczy w CSS3?

Nie ma potrzeby stosowania jQuery ani JavaScript; nie trzeba uruchamiać Photoshopa. I weźmy go w górę, dodając wspaniałą ikonę, aby dodać trochę charakteru do naszego menu.

Więc chwyć swoją ulubioną filiżankę kawy (lub jeśli jesteś podobny do mnie, lodowatą dietetyczną colę), otwórz swój ulubiony edytor kodu i zróbmy zręczne menu nawigacyjne używając tylko CSS3.

Zanim zaczniemy

Zanim przejdziemy do kodu dla naszego menu, chciałbym przejrzeć niektóre z zasobów i narzędzi, których użyjemy w tym samouczku, które możesz pobrać i używać podczas ich śledzenia. Wszystkie są zawarte w pliku .zip na końcu, który zawiera również końcowy kod.

W porządku, masz te wszystkie? Lub przynajmniej pobrać je z pełnym plikiem .zip? Świetnie, teraz zaczynajmy. Przejdziemy przez konfigurację w kawałkach, zaczynając od HTML, następnie podstawowego CSS, a na koniec spakujemy go za pomocą CSS3.

HTML

Odkąd rozwijamy się z CSS3 w naszym systemie menu, zacząłem pracę z podstawową konfiguracją HTML5. Nie musisz tu zwariować - nie budujemy całej witryny w tym samouczku, tylko menu.

Wskoczmy do kodu menu. Menu jest po prostu nieuporządkowaną listą z listami zagnieżdżonymi dla rozwijanych list. Nieuporządkowana lista jest zawijana w tag HTML5.

Jak widać, mamy pięć pozycji menu, z których cztery mają podpozycje. Następnym krokiem jest wykonanie podstawowego stylu CSS, a następnie zastosowanie CSS3 do menu i rozpiętości w celu osiągnięcia ikon.

CSS

Aby uzyskać dobrą podstawę do pracy, dodamy denimowy wzór z Subtelnych Wzorów i wyśrodkujemy menu na podstawie siatki 960.gs. Stworzymy także klasę clearfix, która jest używana w naszych systemach menu. 

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body {background: url('img/denim.png');font-family: 'Droid Sans', sans-serif;;}.clearfix {clear: both;}.wrap {width: 940px;margin: 4em auto;}

Teraz zajmiemy się stylizacją menu. Po pierwsze, stylizujemy nawigację najwyższego poziomu, aby stworzyć bardzo podstawową strukturę. 

nav {padding: 0 10px;position: relative;}.menu li {float: left;position: relative;}.menu li a {color: #444;display: block;font-size: 14px;line-height: 20px;padding: 6px 12px;margin: 8px 8px;vertical-align: middle;text-decoration: none;}.menu li a:hover {color: #222;}
Step 1

Przejdźmy przez ten kod. Pasek menu będzie obejmował całą szerokość klasy .wrap, która wynosi 940 pikseli. Aby dodać odrobinę białych znaków do pierwszego elementu menu, dodajemy 10 pikseli wypełnienia po lewej i prawej stronie i ustawiamy pozycję paska nawigacji na względną. Staje się to bardzo ważną deklaracją później. Pozycje menu najwyższego poziomu są unoszone w lewo, a także mają względne położenie. Następnie robimy krok dalej i stylizujemy linki, które są ustawione do wyświetlania: block ;. Różni się to od kilku systemów menu CSS, które wyświetlają: inline; zdeklarowany.

Lista rozwijana

Menu rozwijane są zagnieżdżonymi nieuporządkowanymi listami, więc przygotujmy je dalej. Znowu idziemy z podstawowym CSS tutaj. 

/* Dropdown styles */.menu ul {position: absolute;left: -9999px;list-style: none;}.menu ul li {float: none;}.menu ul a {white-space: nowrap;}/* Displays the dropdown on hover and moves back into position */.menu li:hover ul {left: 5px;}/* Persistent Hover State */.menu li:hover a {color: #222;}.menu li:hover ul a {background: none;}.menu li:hover ul li a:hover {}
Step 2

Co? Gdzie poszło nasze menu? Pamiętaj, to jest praca w toku. Zacznie się zbierać, obiecuję. Menu .najduje pozycję absolutną (pamiętaj, że ta nieuporządkowana lista znajduje się w pozycji listy najwyższego poziomu, która jest pozycjonowana relatywnie - dlatego też. Ul ul jest pozycjonowany relatywnie do pozycji listy najwyższego poziomu). Następnie ustawiamy go poza ekranem. Jest to technika, którą wybrałem z CSSWizardy, ponieważ ta metoda zapewnia lepszy dostęp do czytników ekranu itp. Później wywołujemy ją ponownie na naszych stanach najechania.

Następnie ustawiamy rozwijane elementy listy, aby były unoszone w lewo, tworząc jednolity wygląd rozwijanego elementu. Na znaczniku kotwicy rzucamy białe znaki: nowrap; co zapobiega zawijaniu długich linków do dwóch linii. Pomaga to utrzymać jednolity wygląd i sprawia, że ​​interfejs użytkownika jest łatwy w użyciu.

Przechodząc do stanów unoszących się w powietrzu, po najechaniu na element listy najwyższego poziomu (.menu li) uruchamiamy wskaźnik myszy i kierujemy się do naszych nieuporządkowanych list oraz przenosimy listę z ekranu poza ekran do 5 pikseli po lewej stronie elementu listy . Ponownie, pozycjonowanie jest względne względem elementu listy najwyższego poziomu, więc jest przesunięte o 5 pikseli od elementu listy. Gdybyś usunął względną pozycję najwyższego poziomu li, wszystkie twoje flagi wyleciałyby pod link "Strona główna".

Teraz upewnimy się, że gdy będziemy unosić się w naszych drop-downach, najwyższy poziom li zachowuje styl, ale elementy menu rozwijanego nie mają tego stylu. To tutaj twój .menu li: hover a i .menu li: hover ul a wchodzą do gry. Ten pierwszy ustawia stały stan zawisu (czyli uczyń go takim samym jak styl najwyższego poziomu), a drugi usuwa ten styl z list podrzędnych.

Wreszcie, stylizujemy rozwijane elementy menu. Och, jest puste? Tak, to wszystko CSS3. Do tego dojdziemy za chwilę.

CSS3

Teraz doszliśmy do zabawnej części. Specyfikacja CSS3 wprowadziła wiele zabawnych i ekscytujących narzędzi dla projektantów stron internetowych i programistów korzystających z nowoczesnych przeglądarek internetowych. Oczywiście, nie wszystkie przeglądarki obsługują wszystkie specyfikacje CSS3 (sprawdź css3files.com, aby uzyskać świetny podkład na temat tego, co działa, a co nie), ale wiele specyfikacji pogarsza się z gracją i nie niszczy projektu.

Uwaga: w tym samouczku używam potężnego i niezwykle malutkiego Lea Verou (2kb) -prefix-free.js scenariusz. Jeśli nie używałeś go wcześniej i pracujesz z CSS3, zrób sobie przysługę i sprawdź to. Używa jakiegoś szalonego zaawansowanego wykrywania do przyjmowania deklaracji CSS3 i dodawania odpowiednich prefiksów dostawcy, aby zapewnić kompatybilność przeglądarki w razie potrzeby. Utrzymuje kod o wiele czystszy i ułatwia zrozumienie samouczka.

Dodajmy trochę CSS3 do paska nawigacji, listę nieuporządkowanych najwyższych poziomów i elementy listy. 

nav {background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));background-image: linear-gradient(#fff, #ccc);border-radius: 6px;box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);padding: 0 10px;position: relative;}.menu li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}
Step 3

Najpierw w powyższym kodzie znajduje się pasek nawigacji. Dodajemy gradient liniowy od białego do jasnoszarego (przy użyciu deklaracji standardowego gradientu i starego stylu), aby zachować kompatybilność ze starszymi przeglądarkami. Dopełniamy (bez gry słów) pasek nawigacji z 6-cio pikselowym promieniem obramowania .

W stanie "najechania": dodajemy przeciwny gradient liniowy, a także zaokrąglone rogi i cień pola wstawki, nadając naszym liniom wygląd, że element menu wpada na pasek nawigacji. Ogólnie rzecz biorąc, bardzo czysty wygląd. Zanim przejdziemy do stanu hover, chcę ponownie zapoznać się z HTML w związku z CSS3. Użyłem świetnej ikony o nazwie Iconic napisanej przez Some Random Dude, która jest osadzona we właściwości CSS3 @ font-face, a następnie wywoływana za pomocą znaczników span w elementach menu. Po pobraniu zestawu można zaczepić kod z pliku CSS w pliku zip, a także skopiować pliki czcionek. Jeśli zmienisz względną ścieżkę, pamiętaj o zmianie src w @ font-face. 

@font-face {font-family: 'IconicStroke';src: url("fonts/iconic/iconic_stroke.eot");src: local('IconicStroke'),url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),url("fonts/iconic/iconic_stroke.otf") format('opentype');}.iconic {color:inherit;font-family: "IconicStroke";font-size: 38px;line-height: 20px;vertical-align: middle;}

Dzięki tej deklaracji czcionki można teraz tworzyć znaczniki zakresu z określonymi klasami, aby utworzyć ikony. W przypadku mojego projektu przechowuję plik iconic.css jako całkowicie nietknięty arkusz stylów o nazwie after my style.css. Aby włączyć ikony do moich menu, nieznacznie zmienimy HTML:

Oczywiście powyższy kod aktualizuje tylko nawigację najwyższego poziomu, dodając znacznik zakresu z klasą ikon i odpowiednią klasą ikon. Teraz, gdy już to zrobimy, zrobimy ostateczną stylizację rozwijanych elementów menu, które rzucają nowe właściwości CSS3, takie jak krycie i przejście. Najpierw więc .menu ul: 

.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}

Dwie duże właściwości do przejrzenia tutaj to deklaracje krycia i przejścia. Krycie jest ustawione na 0, a przejście sprawi, że menu rozwijane przejdzie od krycia 0 do krycia równego 1 w ciągu 1 sekundy. Teraz zróbmy stan zawisu. 

.menu li:hover ul {background: rgba(255,255,255,0.7);border-radius: 0 0 6px 6px;box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);left: 5px;opacity: 1;}
Step 4

Stan zawisu jest dość skomplikowany do przemyślenia. Pójdźmy po linii.

Górna linia sprawia, że ​​tło jest czystym białym tłem, a następnie ustawia krycie na 70%, aby umożliwić przejrzenie niektórych wzorów tła.

Po drugie, mam zaokrąglone dolne dwa rogi, pozostawiając górne rogi do kwadratu, aby dać aluzję, że dropdown wychodzi z paska nawigacji.

Ale trzecia linia jest tam, gdzie pojawia się magia. Ze względu na pozycjonowanie paska nawigacyjnego i elementów listy, użycie wskaźnika Z jest praktycznie niemożliwe dla warstwowania, aby uzyskać odpowiedni wpływ. Aby uzyskać efekt, że menu rozwijane znajduje się poniżej paska nawigacji, ustawiamy podświetlony, podobny wstawiony obszar cienia, który spływa w dół. Na koniec ustaw krycie na 1, co jest skoordynowane z przejściem, które ustawiliśmy wcześniej.

Reszta CSS3 jest dość prosta i w dużej mierze powtarzalna, co już przeszliśmy: 

.menu li:hover a {background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));background-image: linear-gradient(#ccc, #ededed);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}.menu li:hover ul a {background: none;border-radius: 0;box-shadow: none;}.menu li:hover ul li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);}

Nie powinno to być zbyt niezwykłe w tym ostatnim zestawie kodów. I spójrz na nasz końcowy wynik.

Step 5

Wniosek

Cóż, masz to; gładkie i gładkie menu CSS3. Uwzględniłem wszystkie zasoby w pliku zip, co możesz Pobierz tutaj lub możesz zobacz wersję demonstracyjną tutaj .

projektowanie stron ikony nawigacja html5 css3 ikony czcionek