Loading

3D меню для сайта со смещением на CSS3 и HTML

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

 

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

Шаг 1. HTML

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

Каждый пункт меню имеет свой классификатор, который привязан к действию которое вызывает данная кнопка, также каждый пункт имеет установленный уникальный параметр действия.

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

Шаг 2. CSS

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

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

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

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

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

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

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

 

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля