Панель для сайта в стиле MacOS с помощью jquery

Дата публикации: 2011-04-15

панель для сайта

От автора: я не пользуюсь и не собираюсь пользоваться продуктами фирмы apple, но не буду отрицать, что дизайнеры у них баклуши не бьют. Уникальная концепция дизайна и эффектов интерфейса операционной системы Mac OS ничуть не уступает, а во многом даже превосходит другие ОС. Одним из наиболее впечатляющих элементов, я, как и многие, считаю панель быстрого запуска. Правда, удовольствие от этой панели я получаю не в Mac OS, а с тем же успехом в Ubuntu.

И пришла мне идейка: «а не реализовать ли мне подобную панель для веб-интерфейса сайта»?

Сейчас реализуем!

ВНИМАНИЕ! Читайте не только текстовое содержание урока, но и сам код и стили. Они старательно и доходчиво мной прокомментированы. Я прошу об этом, так как урок нацелен не на реализацию самой панели в стиле Mac OS, а на воспитание способности находить пути реализации подобных, не сложных и более сложных идей.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Также скачайте исходники себе на компьютер!

Приступим к разработке

1. Изображения (фоны и иконки)

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

Фон панели я вырезал из дефолтовых обоев рабочего стола Mac OS.

Плоскость панели пришлось самостоятельно лепить в графическом редакторе (если вы можете себе позволить, то — photoshop, если же нет, то весьма достойная альтернатива — GIMP).

Иконками интернет завален, как бесплатными так и не очень. Я выбрал хороший пак содержащий как png так и psd исходники — http://www.artbees.net/artbees-social-icons/

Отражения иконок делал ручками в графическом редакторе (много времени эта процедура не отнимает).

панель для сайта

2. HTML вёрстка

Внимательно ознакомьтесь с вёрсткой, Вы должны как следует разобраться в объектном ориентировании этого виджета, в противном случае Вы можете столкнуться сложностями отображения!

приблизительный план DOM:

Основной блок с фоном (1)

—>

блок с фоном в виде плоскости панели (1)

—>

пустой блок для фиксированного отступа от верхней границы родительского блока (1)

Блок, содержащий элементы панели (1)

—>

Блок, содержащий один из элементов (7)

—>

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

ссылка (1)

—>

иконка (1)

HTML код

<!-- вступление в документ header -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Мак панель">
<meta name="keywords" content="Мак панель">

<!-- Подключаем файл со стилями CSS -->
<link rel="stylesheet" href="style.css" type="text/css"/>

<!-- Подключаем файл jquery из googleapis (можно скачать и подключить свой http://docs.jquery.com/Downloading_jQuery#Download_jQuery) -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- подключаем файл с нашим javascript -->
<script src="js/js.js" type="text/javascript"></script>
<title>Мак панель</title>
</head>
<body> 

<!-- произвольное содержание страницы -->
<div class="all" align='center'>
<!-- / произвольное содержание страницы -->

 <!-- основной div панели для отображения главного фона -->
<div class="mac">
 <!-- div панели, для отображения плоскости панели -->
 <div class="macp" valign='bottom'>
 
  <!-- div для стабильного отступа панели от родительского diva -->
  <div class='boofer'> </div>
 
  <!-- div содержащий группу элементов панели -->
  <div class='icoblock'>
 
 <!-- div class='item' - div содержащий один из элементов панели.
 Этот див существует для разделения объектов с абсолютным позиционированием.
-->
 <div class='item'> <!-- ссылка --> <a href="#" class="icon"> <!-- иконка --> <img src="img/facebook.png" alt="" /></a> <!-- отражение иконки --> <img class="ref" src="img/facebookr.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/twitter.png" alt="" /></a><img class="ref" src="img/twitterr.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/lastfm.png" alt="" /></a><img class="ref" src="img/lastfmr.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/linkedin.png" alt="" /></a><img class="ref" src="img/linkedinr.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/myspace.png" alt="" /></a><img class="ref" src="img/myspacer.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/delicious.png" alt="" /></a><img class="ref" src="img/deliciousr.png" alt="" /></div>
 <div class='item'><a href="#" class="icon"><img src="img/google.png" alt="" /></a><img class="ref" src="img/googler.png" alt="" /></div>
 <!-- / div содержащий группу элементов панели -->
  </div>
 
 <!-- / div панели, для отображения плоскости панели -->
 </div>
 
 <!-- / основной div панели для отображения главного фона -->
</div>
<!-- произвольное содержание страницы -->
</div>
<!-- / произвольное содержание страницы -->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Мак панель</title>

</head>

<body>

<!-- div class='item' - div содержащий один из элементов панели.

Этот див существует для разделения объектов с абсолютным позиционированием.

-->

</div>

</div>

</div>

</div>

</body>

</html>

3. Файл стилей CSS

CSS стили собирают виджет панели из html разметки и каждая их деталь крайне существенна.

Внимательно изучаем!

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

Но IE всё же есть и с его существованием приходится считаться.

К чему я веду: IE очень плохо работает с PNG файлами. При регулировке их прозрачности по средствам стилей или javascript, он начинает всё портить. Поэтому я рекомендую заведомо регулировать прозрачность отражений иконок в графическом редакторе.

теперь сам CSS

*
{
margin:0px;
padding:0px;
}
/* убиваем рамку ссылок при клике в IE и FF */
a
{
outline: none;
}

/* убиваем границы ссылок в IE и FF */
a img
{
border:0px;
}

.all
{
width:100%;
}

/* блок для фона панели */
.mac
{
margin-top:50px;
width:600px;
height:180px;
box-shadow:4px 4px 15px #a9a9a9;
-moz-box-shadow:8px 8px 20px #a9a9a9;
background:url(img/bg.jpg);
overflow:hidden; /* необходимо для скрытия элементов, выезжающих за пределы дива */
position:relative /* необходимо для скрытия элементов, выезжающих за пределы дива, так как у этих элементов абсолютное позиционирование */
}

/* блок для плоскости панели */
.macp
{
width:600px;
height:180px;
background:url(img/macbg.png) no-repeat bottom;

}
/* блок для стабильного отступа панели от верхнего края родительского дива */
.boofer
{
height:110px;
width:100%;
}

/* блок содержащий элементы панели */
.icoblock
{
height:70px;
margin-left:25px;
}



/* блок содержащий один из элементов панели */
.item
{
margin-left:25px;
float:left;
width:50px;
height:50px;
padding:0px;
text-align:left;
}

/* свойства иконок (определяется как дочерний элемент diva) */
.item img
{
position:absolute;
width:50px;
height:50px;
float:left; 
}




/* свойство отражённых иконок (для IE необходимо указывать свойство filter: alpha(opacity=20);) для регулировки прозрачности */

.ref
{
width:50px;
height:50px;
margin-top:40px;
opacity:0.2;
filter: alpha(opacity=20);
position:absolute;
}

{

margin:0px;

padding:0px;

}

/* убиваем рамку ссылок при клике в IE и FF */

{

outline: none;

}

/* убиваем границы ссылок в IE и FF */

a img

{

border:0px;

}

.all

{

width:100%;

}

/* блок для фона панели */

.mac

{

margin-top:50px;

width:600px;

height:180px;

box-shadow:4px 4px 15px #a9a9a9;

-moz-box-shadow:8px 8px 20px #a9a9a9;

background:url(img/bg.jpg);

overflow:hidden; /* необходимо для скрытия элементов, выезжающих за пределы дива */

position:relative /* необходимо для скрытия элементов, выезжающих за пределы дива, так как у этих элементов абсолютное позиционирование */

}

/* блок для плоскости панели */

.macp

{

width:600px;

height:180px;

background:url(img/macbg.png) no-repeat bottom;

}

/* блок для стабильного отступа панели от верхнего края родительского дива */

.boofer

{

height:110px;

width:100%;

}

/* блок содержащий элементы панели */

.icoblock

{

height:70px;

margin-left:25px;

}

/* блок содержащий один из элементов панели */

.item

{

margin-left:25px;

float:left;

width:50px;

height:50px;

padding:0px;

text-align:left;

}

/* свойства иконок (определяется как дочерний элемент diva) */

.item img

{

position:absolute;

width:50px;

height:50px;

float:left;

}

/* свойство отражённых иконок (для IE необходимо указывать свойство filter: alpha(opacity=20);) для регулировки прозрачности */

.ref

{

width:50px;

height:50px;

margin-top:40px;

opacity:0.2;

filter: alpha(opacity=20);

position:absolute;

}

Результат у нас такой: всё выглядит как надо, осталась анимация…

панель для сайта

4. Заключительный этап: JavaScript анимация

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

JavaScript

$(document).ready(function() {  // ждём пока DOM загрузится, чтобыт jquery знал над чем издеваться

$('.icon').hover(function(){ // вылавливаем событие - наведение мыши на иконку
$('img', this).stop().animate({'width':'80px','height':'80px','margin-top':'-30px','margin-right':'-15px','margin-left':'-15px'}, 200); // увеличиваем иконку и изменяем отступы
$(this).next('img').stop().animate({'width':'80px','height':'80px','margin-top':'50px','margin-left':'-15'}, 200); // увеличиваем отражение и изменяем отступы
},
function(){ // вылавливаем событие - уход мыши от иконки
$('img', this).stop().animate({'width':'50px','height':'50px','margin-top':'0px','margin-right':'0px','margin-left':'0px'}, 200); // уменьшаем иконку и изменяем отступы в исходное положение
$(this).next('img').stop().animate({'width':'50px','height':'50px','margin-top':'40px','margin-left':'0px'}, 200); // уменьшаем отражение и изменяем отступы в исходное положение
}
);

$('.icon').click(function(){ // вылавливаем событие - клик мыши по иконке
$('img', this).stop().animate({'height':'30px','margin-top':'20px'}, 100, // пресуем иконку и соответственно меняем отступы
 function(){
  $(this).animate({'height':'80px','margin-top':'-30px'}, 200) // возвращаем иконке исходную высоту и отступы
 }
);
$(this).next('img').stop().animate({'height':'30px'}, 100, // пресуем отражение и соответственно меняем отступы
 function(){
  $(this).animate({'height':'80px'}, 200) // возвращаем отражению исходную высоту и отступы
 }
);
});



}); //конец ready

$(document).ready(function() { // ждём пока DOM загрузится, чтобыт jquery знал над чем издеваться

$('.icon').hover(function(){ // вылавливаем событие - наведение мыши на иконку

$('img', this).stop().animate({'width':'80px','height':'80px','margin-top':'-30px','margin-right':'-15px','margin-left':'-15px'}, 200); // увеличиваем иконку и изменяем отступы

$(this).next('img').stop().animate({'width':'80px','height':'80px','margin-top':'50px','margin-left':'-15'}, 200); // увеличиваем отражение и изменяем отступы

function(){ // вылавливаем событие - уход мыши от иконки

$('img', this).stop().animate({'width':'50px','height':'50px','margin-top':'0px','margin-right':'0px','margin-left':'0px'}, 200); // уменьшаем иконку и изменяем отступы в исходное положение

$(this).next('img').stop().animate({'width':'50px','height':'50px','margin-top':'40px','margin-left':'0px'}, 200); // уменьшаем отражение и изменяем отступы в исходное положение

}

);

$('.icon').click(function(){ // вылавливаем событие - клик мыши по иконке

$('img', this).stop().animate({'height':'30px','margin-top':'20px'}, 100, // пресуем иконку и соответственно меняем отступы

function(){

$(this).animate({'height':'80px','margin-top':'-30px'}, 200) // возвращаем иконке исходную высоту и отступы

}

);

$(this).next('img').stop().animate({'height':'30px'}, 100, // пресуем отражение и соответственно меняем отступы

function(){

$(this).animate({'height':'80px'}, 200) // возвращаем отражению исходную высоту и отступы

}

);

});

}); //конец ready

Заключение

Стиль Mac OS — тут имеет совершенно посредственное значение. Эти эффекты без фона и плоскости и близко не напоминают панель макос. Это фундамент вашей фантазии!

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