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

23 09/08

Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки 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

Теги: • • •

Обсуждение:

  1. Anton

    Вы как обычно, на высоте!
    Спасибо, только приступил к работе над небольшим сайтом-визиткой, порадую заказчика фичей!
    Ждем ещё!
    З.Ы. не видя как выразить благодарность лучше, покликал на рекламу. Призываю всех остальных к тому же, человек старается и пишет про интересные, актуальные и нужные вещи!

    Ответить
  2. Alex

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

    Ответить
    • Андрей

      Добрый день Алексей!
      Помогите пожалуйста вот с какой проблемой.
      Мне требуется создать простое вертикальное меню.
      При этом для каждой кнопки есть по два изображения (простое, и нажатое)
      Мне нужно, чтобы по щелчку на той или иной кнопке, происходил эффект ролловера.
      А после того, как будет активированна следующая кнопка, Предыдущая бы принимала обычный (не нажатый) вид.

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

      С Уважение Андрей

      Ответить
  4. inflames

    Мне интересно как анимированное меню повлияет на производительность?

    Ответить
  5. БОШ

    В Internet Explorer содержимое меню показывается раскрытым, потом мгновенно закрывается — приводится в нормальное положение. К сожалению, такой глюк портит всю прелесть данного меню. Все перепробовал, чтоб избавиться от него, но не вышло. Автор может чем-нибудь помочь?

    Ответить
  6. Alex

    БОШ, к сожалению есть такая проблема. Но думаю это столь критично, чтобы не использовать это.

    Ответить
  8. Anton

    Приветствую снова.
    Возникла вот какая проблема с менюхой:
    При переходе по ссылке в меню из раздела «Статьи» или «Работы»(см. Ваш пример),
    всё равно раскрытым остается первый раздел «О Компании».
    Хотелось бы что бы был раскрыт активный в данный момент раздел…не поможете?

    Ответить
  9. Alex

    ANTON, в моем примере не прописаны адреса у ссылок.

    Ответить
  10. Anton

    Дык, не в том суть.
    Я прописал ссылки, все нормально переходится, но всегда развернутым остается перый раздел меню.
    Как сделать так, что бы разворачивался именно тот раздел, по ссылке которого перешел человек?

    Ответить
  11. Anton

    Уважаемые, так у моей проблемы Вы не видите решения?
    Стал от отчаяния переходить на jQuery т.к. он мне более понятен…

    Ответить
  12. Alex

    ANTON, решение думаю есть. Надо просто поинтересоваться у более компетентных людей. Я c javascript и в частности Mootools знакомлюсь также как и вы.

    Кстати в оригинальной статье, также задали этот вопрос, но ответа пока не было.

    Ответить
  13. БОШ

    accordion.display(n);
    где n — номер вкладки по умолчанию

    Ответить
  14. Anton

    БОШ
    Допустим для «n» несложно присваивать номер текущей вкладки динамически.
    но как передавать это значение от страницы к странице?
    Ведь когда вы перейдете по ссылке и загрузите новую страницу, то подгружаться будет «дефолтное»( по умолчанию) значение для «n», а не что мы назначим динамически…

    Ответить
  15. БОШ

    Антон, в инете я встречал следующие решение.

    Пункт меню является ссылкой и якорем. В зависимости от него выбирается текущая вкладка (пример http://moofx.mad4milk.net/)

    Или же можно присваивать значение n средствами php.

    «Ведь когда вы перейдете по ссылке и загрузите новую страницу, то подгружаться будет “дефолтное”( по умолчанию) значение для “n”, а не что мы назначим динамически…»

    это я не понял

    Ответить
  16. БОШ

    Отвечаю на свой же пост. У себя в блоге разместил пример, в котором меню не мерцает, а отображается сразу в требуемом состоянии. Работает на версии 1.1. Ссылка http://vkurseweba.ru/blog/slidemenu

    Ответить
  17. Серёжа

    Я, конечно, некрофил, но вот нагуглил, и ОЧЕНЬ надо.
    Если кто-нибудь поможет в ближайшее время, то я буду просто очень счастлив.

    Как сделать так, чтобы при нажатии на открытый элемент оно закрывалось, и было бы три закрытых элемента? И также открывалось не закрывая другие?
    Короче: нажал — открылось, нажал следующую — открылась и следующая, а эта не закрылась, или несколько открыл, и также несколько закрыл. Но также плавно.

    Подскажите, очень прошу.

    Ответить
  18. Серёжа

    Разобрался, спасибо БОШ, вопросов нет.
    Комментарии не публикуйте, на почту не спамьте :)

    Ответить
  19. КУЛЬТ

    Ребята, встретился с такой проблемой, задаю её вам, просто не знаю кого ещё спросить ,надеюсь что поможете разобраться.
    На этом сайте реализован вот такой аккардион — http://www.mariusroosendaal.com/ , там есть 4 скрипта и сss, я пытаюсь подогнать данный принцип работы к себе на сайт, но у меня не получается реализовать пагинации как в блоке 7,перелистование между изображениями. Не могу понять что и где за это отвечает, подскажите пожалуйста.

    Ответить
    • Alex

      Очевидно за слайдшоу отвечает файл с slideshow.js :) , а навигация для него я так понимаю генериться автоматически.

      Почитайте мануал на сайте этого слайдшоу, проще будет разобраться.

      Ответить
  20. КУЛЬТ

    спасибо) но с английским я не владах, тем более для маннуала моих знаний явно не хватит, автомотически он не генерируеться, почему такое может быть и с чем звазянно?

    Ответить
    • Alex

      Откуда уверенность что навигация не скриптом генериться?

      В функции слайдшоу один из параметров navigation со значением arrows+:

      function loadSlideShow(name, imgs, url) {
    myShow = new Slideshow(name, {
        transition: Fx.Transitions.backInOut,
        duration: [200],
        width:470,
        height:270,
        navigation: 'arrows+',
        hu: 'work/',
        images: imgs,
        url:url,
        resize:false
    });
}

      За что отвечает этот параметр можно посмотреть всё в том же файле slideshow.js:

      navigation — Optional navigation controls. The navigation appears as anchors (A) within an unordered list (UL LI). If called with the optional ‘fast’ keyword (eg. ‘arrows fast’), the slideshow will not wait until the current transition completes, but update the slide change instantly

      … это и есть этот список с навигацией между картинками.

      Ответить
  21. КУЛЬТ

    http://media-cafe.ucoz.ru/ — вот сайт, на котором я тренируюсь с этими скриптами, вроде всё правельно прикрутил, но скрипт мне так и не генерирует эту навигацию, в чём гвоздь? Всё остальное работает.

    Ответить
    • Alex

      Что то не вижу подключения файла slideshow.js?

      Ответить
  22. КУЛЬТ

    Cкрипты опущены ниже, после /head, сами окна саработали.

    Ответить
  23. КУЛЬТ

    Подключен , они стоят после тега

    Ответить
  24. Антон

    Здравствуйте!У меня проблема с этим меню…У меня все работает, но только меню не анимированное!В чём может быть дело?Сделал все как написано, только точно не знаю куда вставлять

    Подскажите пожалуйста

    Ответить
  25. Антон

    Вставлять блок «Осталось добавить саму библиотеку Mootools: (то что после)»

    Ответить
  27. shweew

    Подскажите, пожалуйста, как задать картинку вместо цвета?

    Ответить
  28. shweew

    Сам нашёл

    toggler.setStyle(‘background-image’,'url(/images/img1.gif)’);

    Ответить
  29. Васек

    БОШ,

    а куда в коде вставлять

    accordion.display(n);

    ?

    Ответить
  30. Blinker

    После opacity вставляй display: n.

    А ваще в Joomla реализован уже этот аккардион:

    window.addEvent(‘domready’, function(){ new Accordion($$(‘.panel h3.jpane-toggler’), $$(‘.panel div.jpane-slider’), {onActive: function(toggler, i){ toggler.addClass(‘jpane-toggler-down’); toggler.removeClass(‘jpane-toggler’); },onBackground: function(toggler, i) { toggler.addClass(‘jpane-toggler’); toggler.removeClass(‘jpane-toggler-down’); },duration: 300,opacity: true,alwaysHide: true, alwaysShow: false, display: 2}); });

    Ответить
  31. Алексей

    Народ, так как решили проблему с тем, что когда переключаемся в любой раздел меню, то он открывается, а остальные закрываются?

    И как настроить меню, чтобы оно сразу не разворачивалось при заходе на сайт?

    Ответить
    • Alex

      Чтобы изначально все пункты были скрыты нужно указать параметр display:-1.

      Ответить
      • Алексей

        Спасибо.

        А чтобы меню не разворачивалось, как на примере, только О КОМПАНИИ при переходе в другой раздел?
        т.е. если я кликнул в раздел СТАТЬИ, то нужно, чтобы меню развернулось только в разделе СТАТЬИ.
        А сейчас я кликнул в СТАТЬИ,а у меня почему-то развернулось опять о КОМПАНИИ.

        Ответить
        • Alex

          Чтобы указать какой именно блок должен быть открыт используйте show и номер блока.

          Ответить
          • Алексей

            1) Простите, Алексей, а где производятся эти замены в самом скрипте mootools или в CSS?
            Я пробовал заменить
            display:block;
            на
            display:-1;

            Но ничего не изменилось.

            2) И где работать/изменять «show» ?

            Спасибо.

          • Alex

            В скрипте:

            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');
        },
       display:-1
    }, $('menu'));
});
          • Алексей

            да, «-1″ нашел и и справил. Меню закрыто при входе на сайт.
            Спасибо.

            А вот что делать с «show»?
            По умолчанию стоит «show:false», Вы пишите «Чтобы указать какой именно блок должен быть открыт используйте show и номер блока.»
            А в коде нет номеров, так только id и class:

            О компании

            Миссия
            Документация

            Преимущества

            Преимущества технологии

            Технология

            Описание технологии
            Технические характеристики

  32. Алексей

    так что нужно указать к коде, чтобы кликнув на меню СТАТЬИ (ваш пример) и кликая на подпункты раздела СТАТЬИ меню не закрывалось. Я просто пока не понял по нашей переписке.

    Ответить
    • Alex

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

      Ответить
  33. anton

    Спасибо! Меню понравилось. Но есть вопросик. Как можно сделать так чтовы при клике на раздел открывалось по 2 раздела?
    Я хочу подогнать это меню к сайту, но вот с js не дружу ;(
    Подскажите, плиз.

    Ответить
    • Alex

      При клике на раздел открывалось по 2 раздела это как?

      Ответить
  34. anton

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

    Ответить
    • Alex

      Ну для начала вы бы поконкретней написали, что именно нужно. Может и подскажут вам.

      Ответить
  35. Im

    Друзья, а как реализовать трехуровневое меню в данном примере? Т.е. чтобы при нажатии на «Ссылка 1″ в блоке «О компании» появлялись еще подпункты пункта «Ссылка 1″?

    Ответить
  36. Олег

    установил меню на этом сайте. Со стилями возился правда долго, чтоб отоброжалось как мне надо. Спасибо огромное за выложенную информацию, пусть это не ваша статья, однако вы ее перевели и дали русским людям — и это уже большой труд. У меня проблема возникла одна, решить которую не получается. Я хочу чтоб названия, при нажатие на которые вылазиит подменю, были в виде ссылок. А если их делать ссылками то меню не работает, так как при клике открывается ссылка. Как мне сделать чтоб меню открывалось при наведении мыши? Очень прошу помочь, тех кто знает

    Ответить
  37. Артур

    Спасибо огромное! Главное в IE6 не косячит!))

    На MODx все прошло как маслу ибо он уже подключен по умолчанию к mootools)

    Ответить
  38. Евгений

    делаю сайт для детского сада http://sad25semicvetik.narod.ru/

    решил использовать это меню, вот только что то не получается

    сейчас библиотека Mootools отключена (ссыль в index.html) на нее не идет…
    пункты все время раскрыты,
    а если библиотеку подключить… — меню вообще пропадает…

    как наладить это меню, что я не правильно сделал????

    Ответить
    • Евгений

      P.S. очень сильно торопят со сроками…. — нужна помощь…..
      Заранее благодарен.

      Ответить
    • Alex

      У вас структура меню не совсем такая как в примере. Попробуйте убрать класс .menusection у внешнего ul.

      Ответить
  39. Евгений

    теперь закрылось и не раскрывается…..
    а перед первыми пунктами — точки…

    Ответить
    • Alex

      Сравните внимательно пример и ваш код.

      Ответить
  40. Евгений

    извиняюсь, хотел вставить код из index.html, а вставились пункты меню….

    Ответить
  41. Евгений

    получается, что нельзя, чтобы первые пункты не раскрывались?

    Ответить
  42. Евгений

    Подправил в соответствии с вашим примером… — все работает.
    Спасибо

    Ответить
  43. Марина

    Спасибо, забрала на свой сайт. Да, хорошо, что в IE все прекрасно работает. Еще раз спасибо!

    Ответить
  44. Павел

    Спасибо автору за подробные объяснения этого инструмента. Вот пример что вышло — armawir.ru.
    Есть вопрос небольшой: в IE показывается меню 1-го уровня хорошо, а во всех других обозревателях оно как бы ужимается (т.е. надпись раздела почти сливается) как это исправить ума не дам

    Ответить
  46. Александр

    Спасибо за скрипт.
    Есть правда вопрос — можна ли сделать пункты меню, которые в тегах также ссылками?
    Если можна то как?

    Задание состоит в том чтобы активировать пункты меню, в которых нет подпунктов.
    Если дописывать просто перед названием пункта меню — теряется вся прелесть разработки.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*