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

 

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

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

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

 

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