От автора: я не пользуюсь и не собираюсь пользоваться продуктами фирмы apple, но не буду отрицать, что дизайнеры у них баклуши не бьют. Уникальная концепция дизайна и эффектов интерфейса операционной системы Mac OS ничуть не уступает, а во многом даже превосходит другие ОС. Одним из наиболее впечатляющих элементов, я, как и многие, считаю панель быстрого запуска. Правда, удовольствие от этой панели я получаю не в Mac OS, а с тем же успехом в Ubuntu. И пришла мне идейка: «а не реализовать ли мне подобную панель для веб-интерфейса сайта»?
Сейчас реализуем!
ВНИМАНИЕ! Читайте не только текстовое содержание урока, но и сам код и стили. Они старательно и доходчиво мной прокомментированы. Я прошу об этом, так как урок нацелен не на реализацию самой панели в стиле 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
Очень доходчиво!
Не сомневаюсь, что когда-нибудь пригодится.
Большое спасибо!
Статья полезная. Попробуем применить на практике. Огромное спасибо за просвещение!!!
Здорово!
Очень интересная идея для определйнной категории сайтов.
Спасибо!
ЖДАЛ С НЕТЕРПЕНИЕМ ВАШИХ УРОКОВ!Именно такой и должна быть система обучения.
Шикарная работа! Спасибо огромное за такую красивую панель. Обязательно ее в каком-нибудь новом проекте сделаю!!!
Вот что я искал! Уже знаю где применить,как раз клиенту сайт делаю,заказал в стиле Aplle,Огромнешее спасибо!
Спасибо! Я, как раз занимаюсь своим сайтом. Точно то, что надо.
Супер! Спасибо!
Клас! Нет слов!
Красивая вещь, когда дойдет дело до создания более красивого дизайна моего блога, попробую применить.
«Очень ловко!!!» Большое Спасибо!
Клево! Обязательно возьму на вооружение для будующих сайтов!
Автору большущий респект!
Супер, спасибо!
А еще уроки от Михаила Беляева можно получить?
Особенно интересует реализация разных сложностей с помощью CSS, без JS.
Таких как скругление углов div без картинок и расположение этих div-ов на странице,
действие при наведении курсора, всплывающие окна с подсказками и ссылками.
Ждем-с, с нетерпением!
С уважением, Владимир.
Очень красиво, но,к сожалению, я пока не в состоянии это сделать. По этим делам я чайник. Спасибо
Очень красиво получилось! Спасибо, очень пригодится!
Спасибо, Михаил! Очень просто и доходчиво. Браво! Спасибо и Виктору с Андреем за идею и наполнения сайта.
Огромное спасибо всем за приятные отзывы. Я очень надеюсь, что эта статья действительно будет полезна хотя бы некоторым из Вас!
И без сомнения я буду готовить новые статьи, не менее интересные и полезные.
М. Беляев
В следующем уроке покажите, как сделать чтобы иконка сначала «пыгнула», и только потом перешла по ссылке.
Заранее благодарен!
Просто супер.
Давно искала подобное
Спасибо. очень интересно. Возможно найду применение.
Спасибо=)
Ребята у меня вопрос не по теме помогите, а есть разница между доменом 1 го уровня и 2 го и как это влияет на работу поисковых машин
Домен 1-го уровня: rim.ru
Домен 2-го уровня: rim.host.ru
Поисковикам пофиг, лишь бы сайт понравился роботам, а это зависит от Вас.
Читайте статьи по SEO.
Очень впечатляет. Обязательно сделаю себе такое же.
Твитанул, отличный пост.
Добрый вечер, Михаил. Чувствуется, что Вы большой специалист, но 100% чайник и до меня все это не доходит. По образованию — филолог, сайт нужен. Я вступила в автоматизированную компанию Inweb 24.,org, где дают хостинг, домен, создается сайт с помощью шаблонов без программирования. Меня это устраивает. Но на память в папках я ваши уроки сохраню, может пригодится. Но как со специалистом, я хочу посоветоваться. В начале апреля я меняла браузер Эксплорер кажется 7 с которым купила ноутбук Виндоус 7 год назад. Он очень часто зависал, мне надоело и я сменила на Эксплорер 9, этот не отправлял почту и не показывал видео. По совету людей, поставила Мазилу F4. Этот получше, хотя тоже любит зависать. Когда я решила продолжить свою работу над книгой (около 300 стр уже есть), я не смогла ее вначале найти, потом что-то подобное вроде обнаружилось, но в зашифрованном виде. Мучаюсь больше недели, не могу понять из 7 вариантов, которые вдруг появились на экране, а текста все нет, вроде поняла, что он не пропал (несколько слов там проявились, хотя без иллюстраций, фотографий), но как полностью раскрыть, не знаю. Может Вы с подобным случаем сталкивались? Буду благодарна за любой ответ. С уважением, Инна Владимировна.
Возможно у Вас проблема не с браузерами, а с системой.
Попробуйте обновить.
И ещё: драйверы на ноутбук лучше устанавливать вручную(сам попадал!), подробности:
Удачи!
Спасибо за отличный урок.
Я совсем не знаю и не использую ява скрипт (джей квери), но мне все понятно ,потому как автор
разжевал все по полной. Лично я заинтересован, буду следить за другими подобными уроками.
Добрый день ! Урок полезный и красивый.. НО очень нужна Ваша помощь… проблема в том, что когда выкладываю на своем сервере эту панель , то перестают отображаться все иконки, кроме одной..уже более недели потратил на изучение этой преблемы.. сдался и решил обратиться за помощью к профессионалам.. те к Вам.. Помогите, люди добрые !
Спасибо, разобрался… если поменять иконки на другие, то все отлично отображается… хотя понимаю что разницы для нет… но факт , что это так… а так все отлично работает… спасибо еще раз
здравствуйте, Михаил. Спасибо вам за урок, стала разбирать его и у меня сразу вопрос — почему вы используете в разметке блок с классом boofer, почему бы не использовать просто margin-top:110px у дива с классом icoblock? и еще вопрос: почему вы делаете две картинки — иконку и ее отражение, почему не сделать картинку=иконка+отражение? жду с нетерпением вашего ответа и продолжаю изучение
От меня завтра требуют похожую панель.
Думал ночи не хватит…..на изучение JS ))
а здесь она Free
После скачки исходников куча позитивных эмоций
Спасибо Бооольшое!!!
Прекрасно! Как раз думал как осуществить
единственное чего не хватает для полного сходства — площадка тоже должна двигаться, но и так прекрасно смотрится 
Спасибо!