Connect with us

Cześć, czego szukasz?

Internet Maker

25 sposobów na nawigację w CSS

Arkusze stylów dają wiele możliwości na stworzenie nawigacji w serwisie. Oto bardzo subiektywny wybór 25 wysokiej jakości tutoriali i przykładów nawigacji, które mogą być zarówno inspiracją, jak i praktyczną pomocą w nauce.

Wśród polecanych tekstów zdecydowanie dominuje język angielski. To zrozumiałe ze względu na rozmiary anglojęzycznej blogosfery. Niektóre polecane przewodniki pochodzą aż z 2003 roku, podczas gdy inne były opublikowane w ciągu ostatniego roku. Język CSS rozwija się wolno i wszystkie poradniki są wciąż aktualne.

1. Poziome menu CSS z min i max-width

http://perfectionorvanity.com/2007/06/22/poziome-menu-css-z-min-i-max-width/

Tutorial na blogu Piotra Petrusa to jedyny na naszej liście poradnik napisany w rodzimym języku. Piotr tłumaczy, jak stworzyć elastyczne i działające we wszystkich popularnych przeglądarkach menu przy użyciu właściwości min-width i max-width.

2. CSS Sprite Navigation Tutorial

http://www.ehousestudio.com/blog/2008/06/27/css-sprite-navigation-tutorial/

Drugi tutorial opisuje tworzenie nawigacji z przyciskami posiadającymi trzy różne stany, gdy wszystkie znajdują się w jednym pliku graficznym. Tego rodzaju rozwiązanie likwiduje irytujący efekt ładowania pliku.

3. Drop-Down Menus, Horizontal Style

http://www.alistapart.com/articles/horizdropdowns/

A List Apart to jeden z najbardziej znanych serwisów wśród twórców stron internetowych. Wiele opisanych w nim metod wykorzystania CSS stało się wręcz kultowymi. W tym poradniku Nick Rigby tłumaczy, jak stworzyć rozwijane, pionowe menu.

4. Suckerfish Dropdowns

http://www.alistapart.com/articles/dropdowns

Suckerfish Dropdowns to znana od lat metoda tworzenia rozwijanej, poziomej nawigacji. Ten artykuł opisuje podstawy wykorzystania tej techniki. Odsyła także do innych przykładów. Jeden z nich to pokaz w serwisie htmldog.com: http://www.htmldog.com/articles/suckerfish/example/.

5. Sliding Doors of CSS

http://www.alistapart.com/articles/slidingdoors

Technika nazwana Sliding Doors pozwala stworzyć nawigację opartą o zakładki. Autor dzieli się z nami nie tylko opisem wykorzystanego kodu, ale także dokładną teorią na temat działania arkuszy stylów.

6. Turning a list into a navigation bar

http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

Jak w 11 krokach zamienić listę UL na zgrabne menu? Wyjaśnia nam to Roger Johansson ze znanego i poczytnego bloga 456bereastreet.com. Do każdego kroku dołączony został przykład, a zastosowane mechanizmy CSS zostały dokładnie wyjaśnione.

7. Inverted Sliding Doors Tabs

http://www.456bereastreet.com/archive/200406/inverted_sliding_doors_tabs/

W kolejnym poradniku Roger wykorzystuje wspomnianą już technikę Sliding Doors i modyfikuje ją tak, aby stworzyć odwrócone zakładki.

8. Advanced CSS Menu

http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Na blogu WebDesignerWall zaprezentowano wysokiej jakości poradnik opisujący przygotowanie zaawansowanego menu. Oprócz opisu kodu CSS, obejmuje także proces przygotowania plików graficznych w Photoshopie.

9. CSS Tabs Menu with Dropdowns

http://www.dave-woods.co.uk/?p=104

Na swoim blogu Dave Woods opisuje połączenie rozwijanego menu z systemem zakładek. Jest to interesujące rozwiązanie, które warto poznać.

10. Flexible navigation example

http://icant.co.uk/articles/flexible-css-menu/index.html

Kolejny przykład prezentuje inną metodę stworzenia płynnych zakładek automatycznie dostosowujących się do szerokości tekstu.

11. CSS Menu – Horizontal, Vertical

http://qrayg.com/experiment/cssmenus/

Craig Erskin, autor witryny qrayg.com, demonstruje przykład rozwijanego menu poziomego i pionowego.

12. Navigation Matrix Reloaded

http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

Ten poradnik uczy nas, jak stworzyć zaawansowane menu złożone z wielu plików graficznych. Słowo matrix nawiązuje więc raczej do macierzy elementów graficznych tworzących siatkę, niż znanego filmu science-fiction.

13. Side Navigation Tooltip / Popup Bubble

http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/

To jeden z najnowszych poradników w naszej kolekcji. Opisuje technikę tworzenia dodatkowych „dymków” pojawiających się po najechaniu kursorem myszy na daną pozycję menu,

14. Chrome CSS Drop Down Menu

http://www.dynamicdrive.com/dynamicindex1/chrome/

Kolejny już przykład rozwijanej nawigacji poziomej. Sam serwis Dynamic Drive (http://www.dynamicdrive.com) prezentuje wiele innych rozwiązań, które mogą okazać się dla ciebie przydatne.

15. CSS navigation menu

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

W tym tutorialu, opublikowanym na łamach webmasterskiego serwisu Webcredible (http://www.webcredible.co.uk), autor uczy nas tworzenia prostego, atrakcyjnego dla oka menu.

16. Nifty Navigation Tricks Using CSS

http://www.sitepoint.com/article/navigation-using-css/

Serwis SitePoint (http://www.sitepoint.com) od lat cieszy się dużą renomą w webmasterskim świecie. W tym tutorialu autor opisuje dokładnie kilka metody na zamianę zwykłej listy nieuporządkowanej w zaawansowane menu.

17. CSS and Round Corners: Build Accessible Menu Tabs

http://www.sitepoint.com/article/accessible-menu-tabs/

W drugim polecanym tutorialu opublikowanym na łamach SitePoint, krok po kroku opisano technikę tworzenia zakładek z zaokrąglonymi rogami.

18. CSS Pop-Out Menu Tutorial

http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp

Kolejny przykład rozwijanego menu pionowego? Atrakcyjnych rozwiązań nigdy dosyć. Szczególnie, jeśli autor nie tylko opisuje wykorzystany kod, ale przy okazji przekazuje czytelnikom sporą dawkę wiedzy na temat CSS.

19.Accessible Image-Tab Rollovers

http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

W tutorialu, który znajdziesz w innym znanym serwisie SimpleBits (http://www.simplebits.com), autor demonstruje stworzoną z poszanowaniem zasad dostępności nawigację, która przypomina system zakładek.

20. Light Weight Low Tech CSS Tabs

http://www.fiftyfoureleven.com/weblog/web-development/css/light-weight-css-tabs

Ile razy można opisywać metody tworzenia zakładek? Okazuje się, że bardzo wiele, a za każdym razem nieco inaczej. W tym tutorialu znajdziesz prosty opis tworzenia zakładek w kilku wersjach kolorystycznych.

21. Hoverbox Menu

http://www.designmeme.com/articles/hoverboxmenu/

Tym razem nawigacja nazwana Hoverbox Menu przyciąga uwagę oryginalnością formy i kreatywnością. Sam kod CSS nie jest zbyt mocno skomplikowany.

22. Flickr like horizontal menu

http://woork.blogspot.com/2008/01/flickr-like-horizontal-menu.html

Myślałeś kiedyś o posiadaniu nawigacji przypominającej tę zastosowaną w znanym serwisie Flickr.com? Na łamach bloga Woork (http://woork.blogspot.com) opisano sposób jej tworzenia przy użyciu odrobiny JavaScriptu.

23.Digg-like Navigation Bar

http://woork.blogspot.com/2008/01/digg-like-navigation-bar-using-css.html

Drugi interesujący tutorial opublikowany na blogu Woork demonstruje możliwości stworzenia menu przypominającego to znajdujące się na stronie digg.com.

24.CSS Dock Menu

http://www.ndesign-studio.com/blog/mac/css-dock-menu

A może zastosować na stronie menu przypominające obszar dokowania w Mac OS X? Jeżeli masz na to ochotę, to rozwiązanie CSS Dock Menu, stworzone przy wykorzystaniu jQuery ułatwi ci to zadanie.

25. Apple Style Rollover Menu

http://www.codeitred.com/2008/08/12/apple-style-menu-tutorial-css-sprites

Nawigacja w stylu witryny Apple.com? Autor tego poradnika opisuje krok po kroku jej tworzenie wraz z przygotowaniem odpowiednich plików graficznych.

Prowadzący bloga poświęconego użyteczności oraz właściciel firmy realizującej audyty serwisów internetowych.

Może cię też zainteresować

Newsy

Trójwymiarowe zdjęcia satelitarne z lat 1984-2020 tworzą niepokojącą historię.

Newsy

Funkcja trafi do systemu w iOS 14.5.

Newsy

Dotychczasowy lektor został zastąpiony przez maszynę.