Question

i am working with mootools , and with foundation as my css “framework”.
i am using the navigation top-bar from foundation and its great. yet the responsive design was ruined.

since i am not working with jquery ….

http://jsfiddle.net/idanhen/3LXQb/ <– this is the foundation code.
http://foundation.zurb.com/docs/navigation.php <- navigation documentation

i cant understand the jquery script they did to convert it.
anyone know of a mootools responsive navigation bar ?

Answer 1

Made it myself , thought i would share if someone will ever need it .

original file is : “jquery.foundation.topbar.js”
new file is : “mootools.foundation.topbar.js”

1. just add foundation.css
2. mootools-core-1.4.5 , mootools-more-1.4.0.1 ( i have both cause its a huge project , but i guess u can only use the core … )
3. mootools.foundation.topbar.js

and ofcourse run the following command :

<script type="text/javascript">
window.addEvent('domready', function() {
window.foundationTopBar();
});
</script>


“mootools.foundation.topbar.js” :

`
/**
* mootools.foundation.topbar
*
* taken from foundation.topbar.js
* http://foundation.zurb.com
*
* Written by Idan Hen : [e-mail]
*/

;(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));

`