Slidemenu и Mootools

03 декабря 2008 года
Mootools
  • Содержание

В этой статье речь пойдет о создании всплывающего меню, которое обязательно украсит ваш сайт. Для его создания используем компактный JavaScript-фреймворк Mootools v 1.1.

Наше меню будет выглядеть примерно так.

HTML-код следующий: 

<ul id="slide_menu">
<li>
	<h3>menu 1</h3>
	<ul class="container">
		<li><a href="#submenu11">submenu 1.1</a></li>
		<li><a href="#submenu12">submenu 1.2</a></li>
		<li><a href="#submenu13">submenu 1.3</a></li>
	</ul>
</li>
<li>
	<h3>menu 2</h3>
	<ul class="container">
		<li><a href="#submenu21">submenu 2.1</a></li>
		<li><a href="#submenu22">submenu 2.2</a></li>
		<li><a href="#submenu23">submenu 2.3</a></li>
	</ul>
</li>
<!— аналогичным образом добавьте необходимые пункты —>
</ul>

Каждое меню является элементом списка slide_menu. В тег <h3> заключаем раздел меню, затем идет список раскрывающегося подменю.

В таблице стилей убираем маркер для списка и добавляем элементу <h3> курсор в виде руки, что создаст эффект кнопки. Остальное оформление на ваш вкус.

h3 { 
	border: 1px solid #616161;
	padding: 2px;
	background-color: #DEDEDE;
	cursor: pointer;
}
#slide_menu {
	width: 160px;
	list-style: none;
}
.container {
	margin: 2px 0px;
	list-style: none;
}
.container li { 
	padding: 2px;
	text-align : left;
}

Подключим библиотеку Mootools.

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

Вставим следующее событие domready

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

	var headings = $$('#slide_menu li h3');
	var list = $$('#slide_menu li ul.container');
	var collapsibles = new Array();

	headings.each( function(heading, i) {
		var collapsible = new Fx.Slide(list[i], {
			duration: 'short',
			transition: Fx.Transitions.quadIn
		});
		collapsibles[i] = collapsible;
		heading.onclick = function(){
			for(var j = 0; j < collapsibles.length; j++)
				if(j!=i)
					collapsibles[j].slideOut();
			collapsible.toggle();
			return false;
		}
		collapsible.hide();
	});

});

Можно немного поэкспериментировать с опциями, меняя параметры меню. В строчке:

var collapsible = new Fx.Slide(list[i], {
	duration: 'short',
	transition: Fx.Transitions.quadIn
});

duration определяет время выдвижения скрипта в миллисекундах. Также возможны константы:

  • ’short’ - 250ms
  • ‘normal’ - 500ms
  • ‘long’ - 1000ms

transition определяет способ выдвижения меню. Возможные значения:

  • Fx.Transitions.linear
  • Fx.Transitions.Bounce.easeOut
  • Fx.Transitions.quadIn

Более подробную информацию Вы можете найти здесь.

Качаем исходник.

Вот собственно и все. Спасибо.

Понравилась статья? Подпишись на RSS.

Советую почитать:

Плавная смена фона
jQuery Slidermenu с ползунком
Многоуровневое выпадающее меню

Pagination Class в CodeIgniter

Комментарии

  • parazitexe написал 16 августа 2009 года

    а можно тоже самое только для кодировки 1251, а тут для utf

    Ответить
  • Александр написал 04 сентября 2009 года

    Файлы примера сохранены в кодировке 1251.
    Если нужна перекодировка, используйте текстовый редактор, например, notepad++.

    Измените только кодировку в мета-теге примера на windows-1251.

    Ответить
  • Алексей написал 13 октября 2010 года

    Как будет себя вести меню, когда я кликну на подменю menu 1 / submenu 1.2 ?

    При переходе в раздел submenu 1.3, допустим, menu 1 не закроется?

    Ответить
  • Александр написал 14 октября 2010 года

    Меню примет исходное состояние. Однако вы можете добавить класс 'active'  к выбранному меню и код, который будет открывать соответствующий подраздел

    Ответить
  • N написал 17 октября 2010 года

    "Однако вы можете добавить класс 'active'  к выбранному меню и код, который будет открывать соответствующий подраздел"
    А подсказать с кодом не могли бы?

    Ответить
  • Александр написал 17 октября 2010 года

    Пример Slidemenu. Также обновил код для более новой версии фреймворка.

    Ответить
  • ConstantA написал 24 февраля 2011 года

    Огромное спасибо, Александр, именно то, что я искал.

    Ответить