Javascript 使用mootools进行快速响应的顶栏导航 我与MOOToo工具合作，并以基金会作为我的CSS“框架”。 我使用导航顶部酒吧从基础和伟大的。然而，反应灵敏的设计却遭到了破坏

因为我没有使用jquery

---

我自己做的，我想如果有人需要，我会和大家分享

<原始文件是：“jQuery .Fask.TopBar .js” 新文件是：“MOOToo.Frase.TopBar .js”< /P> 只是添加基础。CSS

mootools-core-1.4.5，mootools-more-1.4.0.1（我两者都有原因，因为这是一个巨大的项目，但我想你只能使用core…）

MOOToo.Fut.TopBar。JS

当然，请运行以下命令：

addEvent（'domready'，function（）{
window.foundationTopBar（）；

});

“MOOToo.Fase.TopBar .js”：

` /** * MooToo.Fuff.TopBar * *从基础。 * * *作者：伊丹·亨：idandush@gmail.com */

；（函数（$，窗口，未定义）{
"严格使用",；
/*只需创建设置对象*/
变量设置={
索引：0，
断点：940，//设置为9999以强制其始终响应
初始化：false
};
var方法={
初始化：函数（选项）{
返回函数（）{
settings=Object.merge（设置，选项）；//settings=$.extend（设置，选项）；
settings.window=窗口；
settings.topbar=$$（'nav.top bar'）；
settings.titlebar=settings.topbar.getChildren（'ul'）[0]；//getElement（）只需返回#
如果（！settings.initialized）{
方法：汇编（）；
settings.initialized=true；
}
如果（！settings.height）{
方法：largestUL（）；
}
$$（'.top bar.toggle topbar'）.getParent（）.addEvent（'click.fndtn:relay（.top bar.toggle topbar'），函数（e）{//live切换到addEvent
e、 预防默认值（）；
if（methods.breakpoint（））{
settings.topbar.toggleClass（'expanded'）；
settings.topbar.setStyle（'min-height'，''）；//css
}
});
//单击显示下拉级别
$$（'.top bar.has dropdown>a'）.getParent（）.addEvent（'click.fndtn:relay（.top bar.has dropdown>a'），函数（e）{
e、 预防默认值（）；
if（methods.breakpoint（））{
var anchor=$（此），
selectedLi=anchor.getParent（'li'），//最近->getParent
section=anchor.getParents（'section'）[0]，//最近->getParents
大的；
设置。索引+=1；
selectedLi.addClass（'moved'）；
section.setStyle（'left'，-（100*settings.index）+'%'）；
section.getElements（'>.name'）.setStyle（'left'，100*settings.index+'%'）；
//户外照明
anchor.getsides（'ul'）.setStyle（'height'，（settings.height+settings.titlebar.getSize（）.y））；
settings.topbar.setStyle（'min-height'，settings.height+settings.titlebar.getSize（）.y*2）//outerHeight
}
});
//点击上一级
$$（'.top bar.has dropdown.back'）.getParent（）.addEvent（'click.fndtn:relay（.top bar.has dropdown.back'），函数（e）{
e、 预防默认值（）；
var anchor=$（此），
movedLi=anchor.getParent（'li.moved'），
section=anchor.getParents（'section'）[0]，
previousLevelUl=movedLi.getParent（）；
设置。索引-=1；
section.setStyle（'left'，-（100*settings.index）+'%'）；//css
section.getElements（'>.name'）.setStyle（'left'，100*settings.index+'%'）；//查找
如果（settings.index==0）{
settings.topbar.setStyle（'min-height'，0）；//将topbar从$topbar更改为$topbar
}
setTimeout（函数（）{
movedLi.removeClass（'moved'）；
}, 300);
});
}.call（window.document.HTMLDocument）；
},
断点：函数（）{
返回settings.window.getSize（）.xa:'，section.getElements（'.has dropdown>a'）；
section.getElements（'.has dropdown>a'）。每个（函数（e）{
e、 每个（函数（e）{
//console.log（'section'，section'）；
变量链接=$（e），
dropdown=link.getsides（'.dropdown'），//sides
//

a=新元素（'a'{
href:“#”
}),
h5=新元素（'h5'，{}），
titleLi=新元素（'li'{
'class'：'title back js generated'
})；//section.getChildren（'ul li'）；//back js generated'）；
//log（'dropdown:'，dropdown）；
h5.1（a）；
titleLi.grab（h5）；
//将链接复制到subnav
titleLi.getElements（'h5>a'）.set（'html'，（link.get（'html'））；//查找->getElements
下拉。抓取（标题为“顶部”）；
});
});
//将元素放回DOM中
settings.topbar[0].grab（section[0]）；//section.appendTo（settings.topbar）；
},
最大的：函数（）{
;(function ($, window, undefined) {
  'use strict';

    /* just create settings object */
    var settings = {
        index : 0,
        breakPoint : 940, // Set to to 9999 to force it into responsive always
        initialized : false
      };
    var  methods = {        
        init : function (options) {
          return function () {            
            settings = Object.merge(settings, options); //settings = $.extend(settings, options);
            settings.window = window;
            settings.topbar = $$('nav.top-bar');
            settings.titlebar = settings.topbar.getChildren('ul')[0]; // getElement() just return #


            if (!settings.initialized) {
              methods.assemble();
              settings.initialized = true;
            }

            if (!settings.height) {
              methods.largestUL();
            }
            $$('.top-bar .toggle-topbar').getParent().addEvent('click.fndtn:relay(.top-bar .toggle-topbar)', function (e) { //live switched to addEvent
              e.preventDefault();
              if (methods.breakpoint()) {
                settings.topbar.toggleClass('expanded');
                settings.topbar.setStyle('min-height', ''); //css
              }
            });

            // Show the Dropdown Levels on Click            
            $$('.top-bar .has-dropdown>a').getParent().addEvent('click.fndtn:relay(.top-bar .has-dropdown>a)', function (e) {
              e.preventDefault();
              if (methods.breakpoint()) {
                var anchor = $(this),
                    selectedLi = anchor.getParent('li'), // closest -> getParent
                    section = anchor.getParents('section')[0],// closest -> getParents
                    largestUl;

                settings.index += 1;
                selectedLi.addClass('moved');
                section.setStyle('left', -(100 * settings.index) + '%');
                section.getElements('>.name').setStyle('left', 100 * settings.index + '%');

                //outerHeight
                anchor.getSiblings('ul').setStyle('height', (settings.height + settings.titlebar.getSize().y));
                settings.topbar.setStyle('min-height', settings.height + settings.titlebar.getSize().y * 2) //outerHeight
              }
            });

            // Go up a level on Click
            $$('.top-bar .has-dropdown .back').getParent().addEvent('click.fndtn:relay(.top-bar .has-dropdown .back)', function (e) {
              e.preventDefault();

              var anchor = $(this),
                movedLi = anchor.getParent('li.moved'),
                section = anchor.getParents('section')[0],
                previousLevelUl = movedLi.getParent();

              settings.index -= 1;
              section.setStyle('left', -(100 * settings.index) + '%'); //css
              section.getElements('>.name').setStyle('left', 100 * settings.index + '%'); // find

              if (settings.index === 0) {
                settings.topbar.setStyle('min-height', 0); // changed topbar from $topbar
              }

              setTimeout(function () {
                movedLi.removeClass('moved');
              }, 300);
            });
          }.call(window.document.HTMLDocument);
        },
        breakpoint : function () {
          return settings.window.getSize().x < settings.breakPoint; //width()
        },
        assemble : function assemble() {
          var section = settings.topbar.getElements('section')[0];

          // Pull element out of the DOM for manipulation          
          section = section.dispose(); //detach

          //console.log('section.getElements.n>a : ', section.getElements('.has-dropdown>a'));
          section.getElements('.has-dropdown>a').each(function(e){
            e.each(function (e) {                
                //console.log('section' , section);
                var link = $(e),
                    dropdown = link.getSiblings('.dropdown'), //siblings                    
                    //<li class="title back js-generated"><h5><a href="#"></a></h5></li>
                    a = new Element('a', {
                        href: '#'
                    }),
                    h5 = new Element('h5', {}),
                    titleLi = new Element('li', {
                        'class': 'title back js-generated'
                    });//section.getChildren('ul li');// back js-generated');

//                    console.log('dropdown: ', dropdown);
                    h5.grab(a);
                    titleLi.grab(h5);
                    // Copy link to subnav
                    titleLi.getElements('h5>a').set('html', (link.get('html') ) ); // find -> getElements
                    dropdown.grab(titleLi, 'top');
                });
            });
          // Put element back in the DOM
            settings.topbar[0].grab(section[0]); // section.appendTo(settings.topbar); 
        },
        largestUL : function () {
          var uls = settings.topbar[0].getElements('section ul ul'), // find -> getElements
              largest = uls.getFirst(),
              total = 0;
          uls.each(function(ul){
            if (ul.getChildren('li').length > largest.getChildren('li').length) { //length -> getSize().x
              largest = ul;
            }
          });

          largest.getChildren('li').each(function (li) { total += li.getComputedSize().height; }); //outerHeight(true); -> getSize().y          
          settings.height = total;
        }
  };

  /**
   * this function is added to the window -> need to add it myself
   * apply is call ...
   */
  window.foundationTopBar = function (method) 
  {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return  methods.init.apply(this, arguments);
    } else {
      $.error('Method ' +  method + ' does not exist on jQuery.foundationTopBar');
    }
  };
}($, this));