Меню с выпадающими кнопками на Mootools

11 ноября 2008, Написано в Javascript

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

Меню с выпадающими кнопками на Mootools

HTML код представляет собой обычный список, вложенный в контейнер:

<div id="menu">
  <ul>
    <li><a href="" title="">Главная</a></li>
    <li><a href="" title="">О нас</a></li>
    <li><a href="" title="">Портфолио</a></li>
    <li><a href="" title="">Контакты</a></li>
  </ul>
</div>

Внешний контейнер вовсе необязательно использовать. В данном случае это обусловлено тем что у меню есть общий фон, а IE6 делает высоту списка равной высоте самого высокого элемента в нём, соответственно при анимации, высота списка становится равной высоте выдвинутой кнопки. Выглядит это не очень хорошо. Если же делать меню, похожее на это, то можно обойтись без лишних элементов.

CSS:

#menu{
  position:relative;
  height:30px;
  background:#F04F31;
  border-bottom:solid 3px #000;
  margin-bottom:10px
  z-index:100;
}
  #menu ul{
    position:absolute;left:0;top:0
    list-style:none;
    font-size:0.85em;
  }
    #menu li{
      float:left
    }
      #menu li a{
        display:block;
        float:left;
        height:30px;
        line-height:30px;
        padding:0 20px;
        background:#F04F31;
        color:#fff
        text-decoration:none;
      }

Меню в данном случае имеет абсолютное позиционирование, для того чтобы не влиять на общий поток элементов при анимации.

Теперь собственно сам эффект. Подключаем в секцию head сам фреймворк :

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

и небольшой javascript код:

<script type="text/javascript">
window.addEvent('domready', function(){
  $$('#menu a').each(function(el) {    
    var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Bounce.easeOut,link:'cancel'});  
    el.addEvents({  
      'mouseenter': function() {fx.start({'padding-top':30, 'background-color':'#000'});},
      'mouseleave': function() {fx.start({'padding-top':0, 'background-color':'#F04F31'});}
    });  
  });   
});
</script>

Если не нравится текущий вариант анимации, можно попробовать другой, изменяя параметр transition. О различных вариантах анимации можно почитать в статье «Анимация в MooTools. Основы и не только.»

11 комментариев к статье «Меню с выпадающими кнопками на Mootools»:

  1. Real Web Starz | rotorweb.ru | Проблемы и решения в Web-дизайне:
    12 Ноя 2008 в 03:21

    [...] меню с выпадающими кнопками на moootools. Ай, Лебедев! Секреты в [...]

    Ответить
  2. Меню с выпадающими кнопками. Как сделать? | Веб 2.0 вещи от Bubble Babe. Все для веб-мастера и блогера:
    12 Ноя 2008 в 17:28

    [...] не фанат всяких изысков, типа выпадающих меню и т.п. Но данный изящный способ покорил мое черствое [...]

    Ответить
  3. Интересное для веб-мастеров (14.11.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    14 Ноя 2008 в 06:16

    [...] Меню с выпадающими кнопками на Mootools В этой статье я покажу как сделать меню с выпадающими кнопками, с помощью Mootools… [...]

    Ответить
  4. Life on the Internet » Архив сайта » Real Web Starz:
    13 Дек 2008 в 02:34

    [...] меню с выпадающими кнопками на moootools. Ай, Лебедев! Секреты в [...]

    Ответить
  5. Real Web Starz | JavaScript, PHP, CSS - Избранные статьи:
    27 Янв 2009 в 14:02

    [...] меню с выпадающими кнопками на moootools. Ай, Лебедев! Секреты в [...]

    Ответить
  6. Егор:
    4 мая 2009 в 10:08

    Вопрос. А есть ли пример данного эффекта на jQuery?

    http://jqueryui.com/demos/effect/ – там есть отличный эффект Bounce.

    Вот как выглядит код в mootools

    //

    а как бы он выглядел в jquery?

    Ответить
    • Alex:
      4 мая 2009 в 10:17

      Егор, можно посмотреть как сделал данный эффект в приведенном вами примере и адаптировать под меню.

      Ответить
  7. Просте меню з анімацією на MooTools | MooTools українською:
    19 Июн 2009 в 23:36

    [...] до теми раджу подивитися на статтю Олексія Ільїна Меню с выпадающими кнопками на Mootools. У цій статті він показує як зробити меню з кнопками, [...]

    Ответить
  8. 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM:
    25 Мар 2010 в 13:04

    [...] Меню с выпадающими кнопками на Mootools | Демо версия [...]

    Ответить
  9. Виталий:
    26 Мар 2010 в 14:39

    почему если делать 2 меня внизу и вверху выпадает только верхнее как исправить???

    Ответить

Оставь комментарий: