Оригинальное меню в стиле Mac OS.

В этом уроке мы создадим оригинальное меню в стиле Mac OS. Благодаря своей оригинальности и простоте оно может украсить любой сайт.

demosourse

Шаг 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
Просмотров: 51110
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^