Menu icon Foundation

My Posts

  • 5
    Replies
  • Mobile version Drop down

    By Lander

    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... (continued)

    Last Reply by Lander over 5 years ago



My Comments

Lander commented on Lander 's post over 5 years

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

Thank you very much.

Lander commented on Lander 's post over 5 years

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 () {}

Lander commented on Lander 's post over 5 years

Thank you but still not working. I have to create de id="drop" on the CSS?
HTML
<a href="#" data-dropdown="drop" class="button dropdown"><img src="img/hamburger.svg" alt="icono menu"/></a>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Lander 's post over 5 years

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

Thank you very much.

You commented on Lander 's post over 5 years

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 () {}

You commented on Lander 's post over 5 years

Thank you but still not working. I have to create de id="drop" on the CSS?
HTML
<a href="#" data-dropdown="drop" class="button dropdown"><img src="img/hamburger.svg" alt="icono menu"/></a>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content