Menu icon Foundation
Mobile version Drop down

Dear All,
Finally, the drop down is done, but there is another problem, in the mobile version, if i use my mobile, the menu appear, but doesn't disappear. I've read all the CSS and my conclusion is that the problem is in the javascript, i don't know, I'm new with this all.

If someone can help me, Thank you.

Responsivedropdownmobile

Dear All,
Finally, the drop down is done, but there is another problem, in the mobile version, if i use my mobile, the menu appear, but doesn't disappear. I've read all the CSS and my conclusion is that the problem is in the javascript, i don't know, I'm new with this all.

If someone can help me, Thank you.

This post has been closed. No new replies can be added.

Rafi Benkual almost 6 years ago

Can you post an example or the code?

Lander almost 6 years ago

I don't have any idea about Javascript, so here you have all the Javascript of "foundation.dropdown.js"
```Javascript
Foundation.libs.dropdown = {
name : "dropdown",

version: "5.0.3",

settings : {
active_class: 'open',
is_hover: false,
opened: function(){},
closed: function(){}
},

init : function (scope, method, options) {
  Foundation.inherit(this, 'throttle');

  this.bindings(method, options);
},

events : function (scope) {
  var self = this;

  $(this.scope)
    .off('.dropdown')
    .on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
      var settings = $(this).data('dropdown-init') || self.settings;
      e.preventDefault();

      self.closeall.call(self);

      if (!settings.is_hover || Modernizr.touch) self.toggle($(this));
    })
    .on('mouseenter.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
      var $this = $(this);
      clearTimeout(self.timeout);

      if ($this.data('dropdown')) {
        var dropdown = $('#' + $this.data('dropdown')),
            target = $this;
      } else {
        var dropdown = $this;
            target = $("[data-dropdown='" + dropdown.attr('id') + "']");
      }

      var settings = target.data('dropdown-init') || self.settings;

      if($(e.target).data('dropdown') && settings.is_hover) {
        self.closeall.call(self);
      }

      if (settings.is_hover) self.open.apply(self, [dropdown, target]);
    })
    .on('mouseleave.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
      var $this = $(this);
      self.timeout = setTimeout(function () {
        if ($this.data('dropdown')) {
          var settings = $this.data('dropdown-init') || self.settings;
          if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
        } else {
          var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
              settings = target.data('dropdown-init') || self.settings;
          if (settings.is_hover) self.close.call(self, $this);
        }
      }.bind(this), 150);
    })
    .on('click.fndtn.dropdown', function (e) {
      var parent = $(e.target).closest('[data-dropdown-content]');

      if ($(e.target).data('dropdown') || $(e.target).parent().data('dropdown')) {
        return;
      }
      if (!($(e.target).data('revealId')) && 
        (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') || 
          $.contains(parent.first()[0], e.target)))) {
        e.stopPropagation();
        return;
      }

      self.close.call(self, $('[data-dropdown-content]'));
    })
    .on('opened.fndtn.dropdown', '[data-dropdown-content]', function () {
        self.settings.opened.call(this);
    })
    .on('closed.fndtn.dropdown', '[data-dropdown-content]', function () {
        self.settings.closed.call(this);
    });

  $(window)
    .off('.dropdown')
    .on('resize.fndtn.dropdown', self.throttle(function () {
      self.resize.call(self);
    }, 50)).trigger('resize');
},

close: function (dropdown) {
  var self = this;
  dropdown.each(function () {
    if ($(this).hasClass(self.settings.active_class)) {
      $(this)
        .css(Foundation.rtl ? 'right':'left', '-99999px')
        .removeClass(self.settings.active_class);
      $(this).trigger('closed');
    }
  });
},

closeall: function() {
  var self = this;
  $.each($('[data-dropdown-content]'), function() {
    self.close.call(self, $(this))
  });
},

open: function (dropdown, target) {
    this
      .css(dropdown
        .addClass(this.settings.active_class), target);
    dropdown.trigger('opened');
},

toggle : function (target) {
  var dropdown = $('#' + target.data('dropdown'));
  if (dropdown.length === 0) {
    // No dropdown found, not continuing
    return;
  }

  this.close.call(this, $('[data-dropdown-content]').not(dropdown));

  if (dropdown.hasClass(this.settings.active_class)) {
    this.close.call(this, dropdown);
  } else {
    this.close.call(this, $('[data-dropdown-content]'))
    this.open.call(this, dropdown, target);
  }
},

resize : function () {
  var dropdown = $('[data-dropdown-content].open'),
      target = $("[data-dropdown='" + dropdown.attr('id') + "']");

  if (dropdown.length && target.length) {
    this.css(dropdown, target);
  }
},

css : function (dropdown, target) {
  var offset_parent = dropdown.offsetParent(),
      position = target.offset();

  position.top -= offset_parent.offset().top;
  position.left -= offset_parent.offset().left;

  if (this.small()) {
    dropdown.css({
      position : 'absolute',
      width: '95%',
      'max-width': 'none',
      top: position.top + target.outerHeight()
    });
    dropdown.css(Foundation.rtl ? 'right':'left', '2.5%');
  } else {
    if (!Foundation.rtl && $(window).width() > dropdown.outerWidth() + target.offset().left) {
      var left = position.left;
      if (dropdown.hasClass('right')) {
        dropdown.removeClass('right');
      }
    } else {
      if (!dropdown.hasClass('right')) {
        dropdown.addClass('right');
      }
      var left = position.left - (dropdown.outerWidth() - target.outerWidth());
    }

    dropdown.attr('style', '').css({
      position : 'absolute',
      top: position.top + target.outerHeight(),
      left: left
    });
  }

  return dropdown;
},

small : function () {
  return matchMedia(Foundation.media_queries.small).matches &&
    !matchMedia(Foundation.media_queries.medium).matches;
},

off: function () {
  $(this.scope).off('.fndtn.dropdown');
  $('html, body').off('.fndtn.dropdown');
  $(window).off('.fndtn.dropdown');
  $('[data-dropdown-content]').off('.fndtn.dropdown');
  this.settings.init = false;
},

reflow : function () {}

Rafi Benkual almost 6 years ago

We don't have any reference for what you are asking. Are you referring to topbar? If so, we will need to see your topbar HTML code.

If you have not changed anything in the JS files then we do not need to see that?

Eric almost 6 years ago

Are you saying that when you try your page from a mobile device the menu automatically expands but does not close?

Lander almost 6 years ago

Sorry for the troubles, it's solved, I forgotten to insert a class tag on the html.

Thank you very much.