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

 

Вы можете найти много интересных материалов для себя, а также бесплатные шаблоны и не только у наших партнеров ниже, попробуйте и не пропустите интересные предложения:

Как создать красивое меню для сайта

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

Как создать красивое меню для сайта

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

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

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

Как создать красивое меню для сайта

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

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

Как создать красивое меню для сайта

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

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

Как создать красивое меню для сайта

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

Как создать красивое меню для сайта

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

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