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

23 сентября 2008, Написано в CSS, HTML, Javascript

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

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

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

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

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

#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:

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

и следующий код в секцию <head>:

<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

Поделись с друзьями:

28 комментариев к статье «Анимированное меню на Mootools»:

Anton:

27 Сен 2008 в 21:28

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

Ответить
Alex:

28 Сен 2008 в 11:42

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

Ответить
Интересное для веб-мастеров (03.10.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:

3 Окт 2008 в 06:49

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

Ответить
inflames:

7 Окт 2008 в 15:38

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

Ответить
БОШ:

21 Окт 2008 в 13:25

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

Ответить
Alex:

21 Окт 2008 в 13:34

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

Ответить
БОШ:

21 Окт 2008 в 14:43

Гугля, я нарвался на http://forum.mootools.net/viewtopic.php?pid=27697. До конца не разобрался, но похоже то, что нужно!

Ответить
Anton:

24 Окт 2008 в 19:43

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

Ответить
Alex:

24 Окт 2008 в 19:57

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

Ответить
Anton:

25 Окт 2008 в 15:25

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

Ответить
Anton:

28 Окт 2008 в 10:29

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

Ответить
Alex:

28 Окт 2008 в 10:36

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

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

Ответить
БОШ:

28 Окт 2008 в 22:35

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

Ответить
Anton:

29 Окт 2008 в 18:13

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

Ответить
БОШ:

30 Окт 2008 в 09:13

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

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

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

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

это я не понял

Ответить
БОШ:

13 Янв 2009 в 00:58

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

Ответить
Серёжа:

20 Янв 2009 в 21:55

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

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

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

Ответить
Серёжа:

20 Янв 2009 в 21:58

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

Ответить
КУЛЬТ:

26 мая 2009 в 21:25

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

Ответить
- Alex:
  
  26 мая 2009 в 21:57
  
  Очевидно за слайдшоу отвечает файл с slideshow.js , а навигация для него я так понимаю генериться автоматически.
  
  Почитайте мануал на сайте этого слайдшоу, проще будет разобраться.
  
  Ответить
КУЛЬТ:

26 мая 2009 в 22:15

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

Ответить
- Alex:
  
  26 мая 2009 в 22:43
  
  Откуда уверенность что навигация не скриптом генериться?
  
  В функции слайдшоу один из параметров 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
  
  … это и есть этот список с навигацией между картинками.
  
  Ответить
КУЛЬТ:

26 мая 2009 в 22:58

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

Ответить
- Alex:
  
  26 мая 2009 в 23:16
  
  Что то не вижу подключения файла slideshow.js?
  
  Ответить
КУЛЬТ:

26 мая 2009 в 23:20

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

Ответить
КУЛЬТ:

26 мая 2009 в 23:26

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

Ответить
Антон:

17 Окт 2009 в 13:04

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

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

Ответить
Антон:

17 Окт 2009 в 13:05

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

Ответить

Отменить

CSS, HTML и многое другое…