Меню для сайта является, пожалуй, самой важной частью в структуре любого сайта, а красивое меню позволяет осуществлять навигацию по сайту при этом радовать взор посетителей ресурса. В сегодняшнем уроке мы расскажем как сделать красивое меню, с простой анимацией и некоторыми эффектами с помощью технологий CSS3. Несомненно, что особенности CSS3 (трансформации и анимации) позволяют придать дизайну проекта более утонченный вид.  Вот что у нас с этого получается..

Недавно мы публиковали пост, о том как создать подобное меню, но без различных эффектов.

Структура HTML кода для меню используется стандартная для таких случаев:

Как можно заметить, разметка не сложная, в ней мы используем простой класс li. Следующим шагом будет создание стилей CSS, выполняем сброс для элемента ul:

Элемент #menu является основным для нашего меню. Градиенты, тени и скругленные углы помогут нам создать следующее оформление для него:

Отключаем обтекание:

Теперь оформим элементы списка:

Обратите внимание на селектор #menu li:hover > a . Он работает следующим образом: выбрать элемент “a”, который является потомком элемента “li” ; элемент “li” должен иметь предка “#menu”.

С помощью трансформаций CSS3 мы можем анимировать изменения свойств CSS, таких как margin или opacity. Воспользуемся данной возможностью для оформления эффектного появления подменю:

Теперь займемся первым и последним пунктом в списке подменю:

Теперь jQuery. IE6 требует дополнительных действий:

Так как псевдо-класс :hover не работает в других элементах, кроме ссылки, нужно добавить небольшой код jQuery для устранения проблемы. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: