Анимированное меню на Mootools

23 09/08
64

Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:

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

Анимированное меню на Mootools

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>

Пользуемся!

Оригинал: Nice animated menu using CSS and Mootools

Теги: • • •