07 июн 2011
Футер в стиле Facebook (часть №2)
wiillow Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Футер в стиле Facebook (часть №2)

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Футер в стиле Facebook (часть №2)

Если вы не видели первую часть, то вот она!
Шаг №2 - HTML & CSS

Нам необходимо разместить встроенную субпанель в списке. Можете взглянуть на изображение ниже.
<li id="alertpanel">
<a href="#" class="alerts">Alerts</a>
<div class="subpanel">
<h3><span> &ndash; </span>Notifications</h3>
<ul>
<li class="view"><a href="#">View All</a></li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
</ul>
</div>
</li>
<li id="chatpanel">
<a href="#" class="chat">Friends (<strong>18</strong>) </a>
<div class="subpanel">
<h3><span> &ndash; </span>Friends Online</h3>
<ul>
<li><span>Family Members</span></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
</ul>
</div>
</li>

CSS

Поскольку в первой части мы уже определили стили для элементов списка, нам необходимо их отменить для того, чтобы использовать обычные ссылки в субпанелях.
#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
text-indent: 0;
width: auto;
height: auto;
padding: 0;
float: none;
color: #00629a;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset hover
style for sub-panel links--*/

Теперь необходимо придать контейнеру субпанели абсолютное позиционирование (над главной панелью футера - 27 пикселей от футера панели). Далее создадим заголовки используя тег

.
#footpanel .subpanel {
position: absolute;
left: 0; bottom: 27px;
display: none; /*--Hide by default--*/
width: 198px;
border: 1px solid #555;
background: #fff;
overflow: hidden;
}
#footpanel h3 {
background: #526ea6;
padding: 5px 10px;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
font-size: 1.5em;
float: right;
line-height: 0.6em;
font-weight: normal;
}

Следующая секция это место где будет скролл. Используйте overflow: auto; для разрешения появления скролла, когда высота контента превысит высоту
<ul>

#footpanel .subpanel ul{
padding: 0; margin: 0;
background: #fff;
width: 100%;
overflow: auto;
padding-bottom: 2px;
}
#footpanel .subpanel li{
float: none; /*--Reset float--*/
display: block;
padding: 0; margin: 0;
overflow: hidden;
clear: both;
background: #fff;
position: static; /*--Reset relative positioning--*/
font-size: 0.9em;
}

Футер в стиле Facebook (часть №2)

#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
padding: 5px;
background: #fff;
color: #777;
float: left;
}
#chatpanel .subpanel li a img {
float: left;
margin: 0 5px;
}
#chatpanel .subpanel li a{
padding: 3px 0; margin: 0;
line-height: 22px;
height: 22px;
background: #fff;
display: block;
}
#chatpanel .subpanel li a:hover {
background: #3b5998;
color: #fff;
text-decoration: none;
}

Футер в стиле Facebook (часть №2)

#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
border-top: 1px solid #f0f0f0;
display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
background: url(delete_x.gif) no-repeat;
float: right;
width: 13px; height: 14px;
margin: 5px;
text-indent: -9999px;
visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
text-align: right;
padding: 5px 10px 5px 0;
}


Шаг №3 - jQuery

Настройка высоты субпанелей

Очень важно сделать так, чтобы в субпанеле контент не растягивался за пределы зоны видимости.
Футер в стиле Facebook (часть №2)

Для того, чтобы гарантировать это необходимо использовать следующую функцию для подсчета и ресайза высоты панели с учетом размера зоны видимости.
Футер в стиле Facebook (часть №2)


jQuery

//Настроить высоту панели
$.fn.adjustPanel = function(){
$(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Сброс высоты субпанели и ul

var windowHeight = $(window).height(); //Взять высоту зоны видимости
var panelsub = $(this).find(".subpanel").height(); //Взять высоту субпанели
var panelAdjust = windowHeight - 100; //Высота зоны видимости - 100px
var ulAdjust = panelAdjust - 25; //Посчитать размер ul после подстройки субпанели

if ( panelsub > panelAdjust ) { //Если субпанель выше, тогда max height...
$(this).find(".subpanel").css({ 'height' : panelAdjust }); //Выравнивание субпанели на max height
$(this).find("ul").css({ 'height' : panelAdjust}); ////Настроить ul субпанели на новый размер
}
else if { //Если субпанель меньше тогда max height...
$(this).find("ul").css({ 'height' : 'auto'}); //Настроить ul субпанели на auto (размер по умолчанию)
}
};

//Выполнить функцию при загрузке
$("#chatpanel").adjustPanel(); //Выполнить функцию adjustPanel на #chatpanel
$("#alertpanel").adjustPanel(); //Выполнить функцию adjustPanel на #alertpanel

//Каждый раз когда зона видимости меняется, выполнять функцию
$(window).resize(function () {
$("#chatpanel").adjustPanel();
$("#alertpanel").adjustPanel();
});

Добавить функцию переключения

Поскольку обе панели складывающиеся, нам необходимо относиться к ним следующим образом: когда одна открывается, вторая должна закрываться. Также нам необходимо, чтобы они закрывались при клике вне их зоны.
//Событие нажатия на Chat Panel и Alert Panel
$("#chatpanel a:first, #alertpanel a:first").click(function() { //Если нажата первая ссылка #chatpanel и #alertpanel...
if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
$(this).next(".subpanel").hide(); //Спрятать активную субпанель
$("#footpanel li a").removeClass('active'); //Убрать класс active с субпенели
}
else { //Если субпанель не активна...
$(".subpanel").hide(); //Hide all subpanels
$(this).next(".subpanel").toggle(); //Включить субпанель
$("#footpanel li a").removeClass('active'); //Убрать класс active с субпенели
$(this).toggleClass('active');
}
return false;
});

//При клике вне зоны субпанели
$(document).click(function() { //Click anywhere and...
$(".subpanel").hide(); //Спрятать субпанель
$("#footpanel li a").removeClass('active'); //Убрать класс active с субпенели
});
$('.subpanel ul').click(function(e) {
e.stopPropagation();
});

//Показать/спрятать иконки delete на Alert Panel
$("#alertpanel li").hover(function() {
$(this).find("a.delete").css({'visibility': 'visible'});
},function() {
$(this).find("a.delete").css({'visibility': 'hidden'});
});

Футер в стиле Facebook (часть №2)


Заключение

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










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ZerCool | 7 июня 2011 23:37
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Ни хрена не понил как сделать !!!

kirill2702 | 8 июня 2011 10:19
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

Цитата: ZerCool
Ни хрена не понил как сделать !!!

так ты ведь ни хрена не понимаешь!

wiillow | 8 июня 2011 14:11
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

kirill2702, Согласен! Урок для первоклассников!

Jolyn | 7 июня 2012 20:27

It's spooky how cleevr some ppl are. Thanks!

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