Оригинальное меню в стиле 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>

Конечно, ссылки и названия пунктов меню, а также пути к картинкам нужно поменять на свои.

Вот и все! Готово!