25 sposobów na nawigację w CSS

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/...

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/bl...

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/arti...

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/arti...

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/arti...

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/...

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/...

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...

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...

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/fl...

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/cs...

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

12. Navigation Matrix Reloaded

http://superfluousbanter.org/a...

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-d...

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/dy...

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/u...

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/artic...

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/artic...

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/exa...

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/note...

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...

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/arti...

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...

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...

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/...

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/...

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