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

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

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

Шаг 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>

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.phatfusion.net
Перевел: Сергей Патин
Урок создан: 21 Марта 2009
Просмотров: 75811
Правила перепечатки


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

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

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

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

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

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

^ Наверх ^