Оригинальное меню в стиле Mac OS.
В этом уроке мы создадим оригинальное меню в стиле Mac OS. Благодаря своей оригинальности и простоте оно может украсить любой сайт.
Шаг 1.
Подключим скачанные скрипты:
<script type="text/javascript" src="jQuery1.2.6.js"></script>
<script type="text/javascript" src="iconDock.js"></script>
Шаг 2.
Сразу за подключением вставим следующий код:
<script type="text/javascript">
var confDock = {
iconMinSide : 35,
iconMaxSide : 70,
distAttDock : 100,
coefAttDock : 2,
veloOutDock : 500,
valign: 'top'
}
jQuery(function() {
jQuery("#BarraPersonalitzada").addDockEffect(confDock);
});
</script>
Шаг 3.
Подготовим изображения для меню или используем скачанные.
Обратите внимание, что каждого изображения должно быть по паре: одно большое (размером 70х70 px) и его маленький аналог (размером 35х35 px).
Изображения должны быть названы определенным образом: name_35 и соответственно name_70 (для его пары). Вместо "name" можете писать свои названия.
Шаг 4.
В нужном нам месте вставим блок меню следующим образом:
<div id="BarraPersonalitzada">
<a href="http://ruseller.com/" name="Alertes_name" title="Google alertes">
<img src="example/alerts_35.gif" alt="Campana_alt" border="0" />
</a>
<a href="http://ruseller.com/" name="Escriptori_name" title="Google Escriptori">
<img src="example/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="http://ruseller.com/" name="Compres_name" title="Google compres">
<img src="example/froogle_35.gif" alt="Froogle_alt" border="0" />
</a>
<a href="http://ruseller.com/" name="GMail_name" title="Google mail">
<img src="example/gmail_35.gif" alt="Gmail_alt" border="0" />
</a>
<a href="http://ruseller.com/" name="Grups_name" title="Google grups">
<img src="example/groups_35.gif" alt="Grups_alt" border="0" />
</a>
<a href="http://ruseller.com/" name="Linux_name" title="Linux">
<img src="example/special_35.gif" alt="Especial_alt" border="0" />
</a>
</div>
Конечно, ссылки и названия пунктов меню, а также пути к картинкам нужно поменять на свои.
Вот и все! Готово!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.icon.cat
Перевел: Сергей Патин
Урок создан: 21 Апреля 2009
Просмотров: 51201
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.