Навігація в списках і блокові посилання

Колись навігаційні панелі робилися з таблиць, заповнених намальованими в Фотошопі кнопками. Останнім часом, коли з'явилася можливість все більше і більше покладатися на можливості CSS, відбувається рух у бік більшої семантичного. З точки зору семантики, навігаціоннное меню - це список посилань. З цієї точки зору ми на нього і будемо дивитися.

З допомогою CSS можна з легкістю досягти безлічі ефектів, для яких раніше довелося нарізати б безліч графічних елементів. Зрозуміло, чим складніше ефект, тим краще браузер потрібно для його підтримки, тому варто в будь-якій складний ефект включати який-небудь простий елемент, щоб забезпечити зручність для відвідувачів зі старими версіями. Зараз ми розглянемо декілька цікавих ефектів для вертикального меню. Горизонтальні меню в даний час менш зручні в реалізації списками, оскільки зазвичай вимагають підтримки псевдоклассов : before,: after,: first-child, властивості content та інших складних речей.

Підготовча робота

Нам знадобиться список з декількох посилань і найпростіші базові стилі для початку роботи: