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

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

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

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

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

автор

Автор: Михаил Беляев

Доморощенный веб-программист. Проживаю в г. Калининграде, работаю веб-мастером в веб-студии.

Разработкой сайтов занимаюсь с 2008 года. По совместительству занимаюсь дизайном и иллюстрацией.

Сайт: http://mortalbonds.ru/ – «сайт — галерея»

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

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

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

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

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

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

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

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

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

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

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

2. HTML вёрстка

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

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

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

—>

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

—>

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

+

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

—>

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

—>

ссылка (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>

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;
}


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

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

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

Заключение

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

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

киберсант-вебмастер

Автор: Беляев Михаил

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (34)

  1. Эдуард

    Очень доходчиво!
    Не сомневаюсь, что когда-нибудь пригодится.
    Большое спасибо!

  2. Отец Виктор

    Статья полезная. Попробуем применить на практике. Огромное спасибо за просвещение!!!

  3. Николай

    Здорово!
    Очень интересная идея для определйнной категории сайтов.
    Спасибо!

  4. Владимир

    ЖДАЛ С НЕТЕРПЕНИЕМ ВАШИХ УРОКОВ!Именно такой и должна быть система обучения.

  5. Наташа

    Шикарная работа! Спасибо огромное за такую красивую панель. Обязательно ее в каком-нибудь новом проекте сделаю!!!

  6. Олег

    Вот что я искал! Уже знаю где применить,как раз клиенту сайт делаю,заказал в стиле Aplle,Огромнешее спасибо!

  7. Анатолий

    Спасибо! Я, как раз занимаюсь своим сайтом. Точно то, что надо.

  8. Николай

    Супер! Спасибо!

  9. Богдан

    Клас! Нет слов!

  10. Алексей

    Красивая вещь, когда дойдет дело до создания более красивого дизайна моего блога, попробую применить.

  11. Александр

    «Очень ловко!!!» Большое Спасибо!

  12. Pocherk

    Клево! Обязательно возьму на вооружение для будующих сайтов!
    Автору большущий респект!

  13. Владимир

    Супер, спасибо!
    А еще уроки от Михаила Беляева можно получить?
    Особенно интересует реализация разных сложностей с помощью CSS, без JS.
    Таких как скругление углов div без картинок и расположение этих div-ов на странице,
    действие при наведении курсора, всплывающие окна с подсказками и ссылками.
    Ждем-с, с нетерпением!
    С уважением, Владимир.

  14. Игорь Борисович

    Очень красиво, но,к сожалению, я пока не в состоянии это сделать. По этим делам я чайник. Спасибо

  15. ольга

    Очень красиво получилось! Спасибо, очень пригодится!

  16. Александр Винница

    Спасибо, Михаил! Очень просто и доходчиво. Браво! Спасибо и Виктору с Андреем за идею и наполнения сайта.

  17. Михаил Беляев

    Огромное спасибо всем за приятные отзывы. Я очень надеюсь, что эта статья действительно будет полезна хотя бы некоторым из Вас!
    И без сомнения я буду готовить новые статьи, не менее интересные и полезные.

    М. Беляев

    • Эдуард

      В следующем уроке покажите, как сделать чтобы иконка сначала «пыгнула», и только потом перешла по ссылке.
      Заранее благодарен!

  18. Людмила

    Просто супер.

  19. Руслана

    Давно искала подобное

  20. Петр

    Спасибо. очень интересно. Возможно найду применение.

  21. Bac9ITko

    Спасибо=)

  22. rim

    Ребята у меня вопрос не по теме помогите, а есть разница между доменом 1 го уровня и 2 го и как это влияет на работу поисковых машин

    • Эдуард

      Домен 1-го уровня: rim.ru
      Домен 2-го уровня: rim.host.ru
      Поисковикам пофиг, лишь бы сайт понравился роботам, а это зависит от Вас.
      Читайте статьи по SEO.

  23. Александр

    Очень впечатляет. Обязательно сделаю себе такое же.

  24. Мухачев

    Твитанул, отличный пост.

  25. Инна Владимировна

    Добрый вечер, Михаил. Чувствуется, что Вы большой специалист, но 100% чайник и до меня все это не доходит. По образованию — филолог, сайт нужен. Я вступила в автоматизированную компанию Inweb 24.,org, где дают хостинг, домен, создается сайт с помощью шаблонов без программирования. Меня это устраивает. Но на память в папках я ваши уроки сохраню, может пригодится. Но как со специалистом, я хочу посоветоваться. В начале апреля я меняла браузер Эксплорер кажется 7 с которым купила ноутбук Виндоус 7 год назад. Он очень часто зависал, мне надоело и я сменила на Эксплорер 9, этот не отправлял почту и не показывал видео. По совету людей, поставила Мазилу F4. Этот получше, хотя тоже любит зависать. Когда я решила продолжить свою работу над книгой (около 300 стр уже есть), я не смогла ее вначале найти, потом что-то подобное вроде обнаружилось, но в зашифрованном виде. Мучаюсь больше недели, не могу понять из 7 вариантов, которые вдруг появились на экране, а текста все нет, вроде поняла, что он не пропал (несколько слов там проявились, хотя без иллюстраций, фотографий), но как полностью раскрыть, не знаю. Может Вы с подобным случаем сталкивались? Буду благодарна за любой ответ. С уважением, Инна Владимировна.

    • Эдуард

      Возможно у Вас проблема не с браузерами, а с системой.
      Попробуйте обновить.
      И ещё: драйверы на ноутбук лучше устанавливать вручную(сам попадал!), подробности: http://notebookclub.org/
      Удачи!

  26. metal

    Спасибо за отличный урок.
    Я совсем не знаю и не использую ява скрипт (джей квери), но мне все понятно ,потому как автор
    разжевал все по полной. Лично я заинтересован, буду следить за другими подобными уроками.

  27. Илья

    Добрый день ! Урок полезный и красивый.. НО очень нужна Ваша помощь… проблема в том, что когда выкладываю на своем сервере эту панель , то перестают отображаться все иконки, кроме одной..уже более недели потратил на изучение этой преблемы.. сдался и решил обратиться за помощью к профессионалам.. те к Вам.. Помогите, люди добрые !

    • Илья

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

  28. Вера

    здравствуйте, Михаил. Спасибо вам за урок, стала разбирать его и у меня сразу вопрос — почему вы используете в разметке блок с классом boofer, почему бы не использовать просто margin-top:110px у дива с классом icoblock? и еще вопрос: почему вы делаете две картинки — иконку и ее отражение, почему не сделать картинку=иконка+отражение? жду с нетерпением вашего ответа и продолжаю изучение

  29. Конон_Охрененный

    От меня завтра требуют похожую панель.
    Думал ночи не хватит…..на изучение JS ))
    а здесь она Free
    После скачки исходников куча позитивных эмоций
    Спасибо Бооольшое!!!

  30. Константин

    Прекрасно! Как раз думал как осуществить :) единственное чего не хватает для полного сходства — площадка тоже должна двигаться, но и так прекрасно смотрится :) Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree