Меню для сайта в стиле аккордеона

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

Вот пример того, что должно получиться (щелкните по картинке, чтобы перейти к реальному примеру):

Шаг 1.

Скачаем и подключим к документу скрипты (mootools и imageMenu), а также таблицу стилей, отвечающую за внешний вид галереи и за пути к изображениям.

<link href="imageMenu.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="mootools-1.2.1.js"></script>

  <script type="text/javascript" src="imageMenu.js"></script>

Шаг 2.

Скачаем изображения, используемые в примере (конечно, вы можете использовать и свои картинки), и укажем пути к каждой из них в таблице стилей imageMenu.css.

#imageMenu ul li.landscapes a {

background: url(images/landscap.jpg) repeat scroll 0%;

}

#imageMenu ul li.people a {

  background: url(images/people00.jpg) repeat scroll 0%;

  }

#imageMenu ul li.nature a {

  background: url(images/nature00.jpg) repeat scroll 0%;

  }

#imageMenu ul li.urban a {

  background: url(images/urban000.jpg) repeat scroll 0%;

  }

#imageMenu ul li.abstract a {

  background: url(images/abstract.jpg) repeat scroll 0%;

  width: 310px;

  }

Шаг 3.

В том месте, где вы хотите видеть вашу галерею нужно вставить следующий список, предварительно помещенный в тег <div> с идентификатором "imageMenu".

Ссылки вы можете изменить на свои.

<div id="imageMenu">

<ul>

<li class="landscapes"><a href="http://www.aaronbirchphotography.com/">Landscapes</a></li>

<li class="people"><a href="http://www.aaronbirchphotography.com/">People</a></li>

<li class="nature"><a href="http://www.aaronbirchphotography.com/">Nature</a></li>

<li class="urban"><a href="http://www.aaronbirchphotography.com/">Urban</a></li>

<li class="abstract"><a href="http://www.aaronbirchphotography.com/">Abstract</a></li>

</ul>

</div>

Шаг 4.

После этого списка нужно вставить скрипт:

 <script type="text/javascript">

  window.addEvent('domready', function(){

var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});

});

</script>

Вот и все! Надеюсь этот элемент внесет немного разнообразия в дизайн вашего сайта.