arielsalminen / TinyNav.js

Responsive navigation plugin that weighs just 443 bytes
http://tinynav.viljamis.com/
635 stars 207 forks source link

Submenu spacing (prepend) #4

Closed axpro closed 12 years ago

axpro commented 12 years ago

It would be nice if you could add an option to prepend a character or space before submenus like here: https://github.com/mattkersley/Responsive-Menu

axpro commented 12 years ago

I combined it with: https://github.com/mambows/mobilemenu and it works but I'm sure that there are better ways to do it.

(function ($, window, i) {
  $.fn.tinyNav = function (options) {
    var settings = {
      'active' : 'selected',
      subMenuClass: 'sub-menu',
      subMenuDash: '   '
    };
    return this.each(function () {
      i++;
      var $nav = $(this),
        namespace = 'tinynav',
        namespace_i = namespace + i,
        l_namespace_i = '.l_' + namespace_i,
        $select = $('<select/>').addClass(namespace, namespace_i);
        $nav.find('ul').addClass(settings.subMenuClass);
      if (options) {
        $.extend(settings, options);
      }
      if ($nav.is('ul,ol')) {
        $nav
          .addClass('l_' + namespace_i)
          .find('a').each(function () {

            var $this   = $(this),
                optText = '&nbsp;' + $this.text(),
                optSub  = $this.parents( '.' + settings.subMenuClass ),
                len         = optSub.length,
                dash;

            if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
                            dash = Array( len+1 ).join( settings.subMenuDash );
                            optText = dash + optText;
                        }

            $select.append(
              $('<option />', {
                    "value" : this.href,
                    "html"  : optText,
                    "selected" : (this.href == window.location.href)
                })
            );
          });
        $select
          .find(':eq(' + $(l_namespace_i + ' li')
          .index($(l_namespace_i + ' li.' + settings.active)) + ')')
          .attr('selected', true);
        $select.change(function () {
          window.location.href = $(this).val();
        });
        $(l_namespace_i).after($select);
      }
    });
  };
})(jQuery, this, 0);
arielsalminen commented 12 years ago

Hmm, but why not just use Matt Kersley's plugin if you need this functionality? I'm not really planning to add more options/functionality to this plugin right now. : )

axpro commented 12 years ago

I think I chose yours because is simpler and smaller but I needed the spacing feature. Anyway great plugin.