24 авг 2015
Навигация профиля для сайта при помощи CSS3 и JS
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Навигация профиля для сайта при помощи CSS3 и JS .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Навигация профиля сайта при помощи CSS3 и JS

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



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

Шаг 1. HTML

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

<div class="accordion-wrap">
<div class="accordion">
<a href="#" class="active"><i class="fa fa-user"></i>Профиль</a>
<div class="sub-nav active">
<div class="html about-me">
<div class="photo">
<div class="photo-overlay">
<span class="plus">+</span>
</div>
</div>
<h4>@khadkamhn</h4>
<p>Привет, меня зовут Давид и вы попали на мою страницу профиля на сайте Rudebox.</p>
<div class="social-link">
<a class="link link-twitter" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="link link-codepen" href="#" target="_blank"><i class="fa fa-codepen"></i></a>
<a class="link link-facebook" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="link link-dribbble" href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
<a href="#"><i class="fa fa-comments"></i> Чат</a>
<div class="sub-nav">
<div class="html chat">
<div class="user user-khadkamhn clearfix">
<span class="text-msg pull-right">Привет, как твой день?</span>
</div>
<div class="user user-khadkamhn clearfix">
<span class="text-msg pull-right">Хорошо, сегодня закончу новые уроки для сайта.</span>
</div>
<div class="user user-dribble clearfix">
<span class="photo pull-left" data-username="dribbble"><i class="fa fa-dribbble"></i></span>
<span class="text-msg">Желаю удачи и жду, чтобы прочитать</span>
</div>
<div class="user user-dribble clearfix">
<span class="photo pull-left" data-username="dribbble"><i class="fa fa-dribbble"></i></span>
<span class="text-msg">Уроки будут очень скоро и про параллакс, ждем ребятки.... :)</span>
</div>
</div>
</div>
<a href="#"><i class="fa fa-envelope"></i> Сообщения <span class="pull-right alert-numb">21</span></a>
<div class="sub-nav">
<a href="#">Входящие<span class="pull-right alert-numb">11</span></a>
<a href="#">Закладки <span class="pull-right alert-numb">10</span></a>
<a href="#">Отправленные</a>
<a href="#">Черновики</a>
<a href="#">Корзина</a>
<a href="#">Все сообщения</a>
</div>
<a href="#"><i class="fa fa-dribbble"></i> Dribbble подписка</a>
<div class="sub-nav">
<div class="html invite">
<p>Следите за мной в <span class="dribbble">dribbble</span> сети</p>
<p>Ты уже подписался на обновления?</p>
<a class="btn" href="#" target="_blank">Подписаться</a>
</div>
</div>
</div>
</div>


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

Шаг 2. CSS

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

.accordion{
width:100%;
margin:auto;
max-width:280px;
overflow:hidden;
border-radius:3px;
background:#B7AFA3;
box-shadow:0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
}
.accordion&gt;a{
color:#374046;
padding:15px;
display:block;
text-decoration:none;
transition:all .3s ease-in-out 0s;
}
.accordion&gt;a:not(:last-child){
border-bottom:1px solid rgba(0,0,0,.2);
}
.accordion&gt;a:hover,
.accordion&gt;a.active{
background:#E8D0A9;
}
.accordion&gt;a.active{
color:#B77F24;
}
.accordion&gt;a&gt;.alert-numb,
.accordion&gt;.sub-nav&gt;a&gt;.alert-numb{
color:#eee;
right:10px;
height:22px;
min-width:40px;
font-size:12px;
font-weight:600;
line-height:22px;
border-radius:15px;
text-align:center;
background:#665e51;
}
.accordion&gt;a.active&gt;.alert-numb,
.accordion&gt;.sub-nav&gt;a.active&gt;.alert-numb{
background:#d0a051;
}
.accordion .sub-nav{
display:none;
color:#374046;
overflow:hidden;
background:#ecf0f1;
}
.accordion .sub-nav.open{
display:block;
}
.accordion .sub-nav a{
display:block;
color:inherit;
font-weight:300;
padding:10px 15px;
text-decoration:none;
transition:all .2s ease-in-out 0s;
}
.accordion .sub-nav a:not(:last-child){
border-bottom:1px solid rgba(0,0,0,.1);
}
.accordion .sub-nav a:hover{
background:#c2ced1;
box-shadow:5px 0 0 #8ca3a8 inset;
}

.accordion .html{
padding:15px;
}
.accordion .about-me{
text-align:center;
position:relative;
}
.accordion .about-me h4{
margin-bottom:0;
}
.accordion .about-me p{
font-size:14px;
font-weight:300;
margin-bottom:0;
}
.accordion .about-me .photo{
width:95px;
height:95px;
margin:auto;
overflow:hidden;
border-radius:50%;
position:relative;
border:4px solid #fff;
box-shadow:0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2);
}
.accordion .about-me .photo .photo-overlay{
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
visibility:hidden;
position:absolute;
background:rgba(0,0,0,.4);
}
.accordion .about-me .photo .photo-overlay .plus{
top:50%;
left:50%;
width:30px;
height:30px;
color:#1a1a1b;
cursor:pointer;
font-size:24px;
font-weight:100;
margin-top:-15px;
margin-left:-15px;
position:absolute;
line-height:30px;
border-radius:50%;
text-align:center;
background:#e8d0a9;
transform:scale(0) rotate(0);
transition:all .1s ease-in-out 0s;
}
.accordion .about-me .photo:hover .photo-overlay{
opacity:1;
visibility:visible;
}
.accordion .about-me .photo:hover .photo-overlay .plus{
transform:scale(1) rotate(90deg);
}

.accordion .about-me .social-link{
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
padding-top:48px;
visibility:hidden;
position:absolute;
background:rgba(0,0,0,.3);
transition:opacity .5s ease-in-out 0s;
}
.accordion .about-me .social-link.active{
opacity:1;
visibility:visible;
}
.accordion .about-me .social-link .link{
width:30px;
padding:0;
color:#eee;
height:30px;
margin:0 4px;
line-height:28px;
border-radius:50%;
display:inline-block;
transform:translateY(-80px) scale(0);
border:1px solid rgba(0,0,0,.2);
}


Шаг 3. JS

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

$(function(){
Profile.load();
});

Profile = {
load:function(){
this.links();
this.social();
this.accordion();
},
links:function(){
$('a[href="#"]').click(function(e){
e.preventDefault();
});
},
social:function(){
$('.accordion .about-me .photo .photo-overlay .plus').click(function(){
$('.social-link').toggleClass('active');
$('.about-me').toggleClass('blur');
});
$('.social-link').click(function(){
$(this).toggleClass('active');
$('.about-me').toggleClass('blur');
});
},
accordion:function(){
var subMenus = $('.accordion .sub-nav').hide();
$('.accordion &gt; a').each(function(){
if($(this).hasClass('active')){
$(this).next().slideDown(100);
}
});
$('.accordion &gt; a').click(function(){
$this = $(this);
$target = $this.next();
$this.siblings('a').removeAttr('class');
$this.addClass('active');
if(!$target.hasClass('active')){
subMenus.removeClass('active').slideUp(100);
$target.addClass('active').slideDown(100);
}
return false;
});
}
}


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

Готово!

Скачивание файлов доступно только зарегистрированным пользователям










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