Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:
HTML представляет собой следующую структуру. У нас есть div с id="menu", который является контейнером для меню, заголовоки секций (элемент h3) а также меню секций (элемент ul):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="menu"> <h3 class="toggler menusection">Секция 1</h3> <ul class="element menusection"> <li><a href="">Ссылка 1</a></li> <li><a href="">Ссылка 2</a></li> <li><a href="">Ссылка 3</a></li> <li><a href="">Ссылка 4</a></li> </ul> <h3 class="toggler menusection">Секция 2</h3> <ul class="element menusection"> <li><a href="">Ссылка 1</a></li> <li><a href="">Ссылка 2</a></li> </ul> <!-- По необходимости добавьте дополнительные секции... --> </div> |
Вы можете добавить дополнительные секции, используя структуру кода как в предыдущих секциях.
CSS код текущего примера следующий, однако оформление вы можете изменить по своему вкусу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #menu h3{ background:#E8D7B7; padding:4px; font-size:12px; color:#000; border-bottom:solid 2px #9C8B7B; cursor:pointer; font-weight:normal; text-transform:uppercase } #menu ul{ list-style:none } #menu li{ border-bottom:solid 1px #DEDEDE } #menu li a{ padding:3px 6px; display:block; color:#5CA8CC; text-decoration:none } #menu li a:hover{ background:#EFEFEF } |
Осталось добавить саму библиотеку Mootools:
1 | <script type="text/javascript" src="mootools.js"></script> |
и следующий код в секцию <head>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> window.addEvent('domready', function(){ var accordion = new Accordion('h3.menusection', 'ul.menusection', { opacity: false, onActive: function(toggler, element){ toggler.setStyle('color', '#333333'); toggler.setStyle('background', '#F7F1E5'); }, onBackground: function(toggler, element){ toggler.setStyle('color', '#333'); toggler.setStyle('background', '#E8D7B7'); } }, $('menu')); }); </script> |
Пользуемся!