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

 

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

По умолчанию у нас будет вертикальный блок, стилизованный иконками и логотипом, при наведении курсора будет происходить полный разворот блоков с подписями, смотрится достаточно красиво.

Шаг 1. HTML

Мы присваиваем ID нашей навигации, это будет общий блок в котором заключена вся навигация, затем у нас будет класс с логотипом для шапки навигации:

Затем по очередности мы добавляем блоки навигации, кроме этого для каждого отдельного блока у нас будет свой класс, в каждом из которых будет вшит своя иконка.

Как создать меню для сайта с помощью CSS3

Шаг 2. CSS

Стили не такие уж и тяжелые, нам необходимо, для начала определить общий класс контейнера и блока навигации, затем стилизовать блок с логотипом, а далее мы добавляем стили для трансформации при наведении курсора мыши:

Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.

Вот и все. Готово!