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

 

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

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

Шаг 1. HTML

Нам необходимо создать всю разметку, для этого у нас будет общий класс accordion-wrap, который будет содержать в себе весь блок с установленными параметрами, также мы добавляем класс accordion, который будет отвечать за построение аккордеона.

В конце блока с навигацией мы добавляем «sub-nav«- данный класс отвечает за построение блока навигации с подпиской на пользователя и его контактную информацию.

Навигация профиля сайта при помощи CSS3 и JS

Шаг 2. CSS

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

Шаг 3. JS

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

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

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