3

Есть такая конструкция:

HTML:

<div class="icon"><section class="four"><a href="#" class="hmbrgr four"></a></section></div>

Скрипт:

$(function() {
$('.hmbrgr.four').hmbrgr({
    width     : 30,
    height    : 22,
    barHeight : 3,
    barRadius : 3,
    barColor  : '#2a2a2a'
});
});

(function ( $ ) {

  $.fn.hmbrgr = function( settings ){

    var config = $.extend( {
      width     : 30,
      height    : 22,
      speed     : 200,
      barHeight : 3,
      barRadius : 0,
      barColor  : '#ffffff',
      animation : 'expand',
      onInit    : null,
      onOpen    : null,
      onClose   : null
    }, settings);

    var posTop    = 0,
        posMiddle = (config.height/2) - (config.barHeight/2),
        posBottom = config.height - config.barHeight;

    function hmbrgrBuild(el){
      $(el)
      .css({
        'width'     : config.width,
        'height'    : config.height
      })
      .html('<span /><span /><span />')
      .find('span').css({
        'position'            : 'absolute',
        'width'               : '100%',
        'height'              : config.barHeight,
        'border-radius'       : config.barRadius,
        'background-color'    : config.barColor,
        'transition-duration' : config.speed+'ms'
      });

      hmbrgrSpanReset(el);
      $.isFunction(config.onInit) && config.onInit.call(this);
    }

    function hmbrgrSpanReset(el){
      $(el)
      .data('clickable', true)
      .find('span').eq(0).css({
        'top' : posTop
      });

      $(el)
      .find('span').eq(1).css({
        'top' : posMiddle
      });

      $(el)
      .find('span').eq(2).css({
        'top' : posBottom
      });
    }

    function hmbrgrCommand(el){
      $(el).on('click', function(e){
        e.preventDefault();

        if($(this).data('clickable')){

          $(this).data('clickable', false);

          $(el).toggleClass('cross');

          if( $(el).hasClass('cross') )
            hmbrgrExpand(el);
          else
            hmbrgrCollapse(el);
        }
      });
    }

    function hmbrgrExpand(el){
      $(el).find('span').css({
        top : posMiddle
      });

      setTimeout(function(){
        $(el).addClass(config.animation).data('clickable', true);
        $.isFunction(config.onOpen) && config.onOpen.call(this);
      }, config.speed);
    }

    function hmbrgrCollapse(el){
      $(el).removeClass(config.animation);

      setTimeout(function(){
        hmbrgrSpanReset(el);
        $.isFunction(config.onClose) && config.onClose.call(this);
      }, config.speed);
    }

    return this.each(function(){
      hmbrgrBuild(this);
      hmbrgrCommand(this);
    });

  };

}( jQuery ));

Скрипт - это иконка меню (три полоски), при нажатии на которую происходит анимация, и она становится крестиком. При повторном нажатии она снова преобразуется в три полоски, т.е. возвращается в исходное положение. Блок div с классом icon шириной 100%.

Нужно сделать так, чтобы при нажатии не только на иконку, но и на сам блок с классом icon, происходила анимация иконки?

Сейчас анимация иконки происходит непосредственно при нажатии на саму иконку.

css:

.icon {
    height: 42px;
    cursor: pointer;
    display: none;
    text-align: center;
}
.hmbrgr {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
.hmbrgr span {
  position: absolute;
  left: 0;
  width: 100%;
  background: #fff;
  display: inline-block;
}
.hmbrgr.expand span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hmbrgr.expand span:nth-child(2) {
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
.hmbrgr.expand span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
5
  • крестика не увидел - все три полоски сворачиваются в одну.
    – Борис
    21 июл 2015 в 21:32
  • Потому что здесь отсутствуют стили css. Но они не важны и не нужны в решении данного вопроса. 21 июл 2015 в 21:49
  • ок. у вас hmbrgr - это плагин, расширяющий конкретный элемент a.hmbrgr.four. Вы можете применить его непосредственно к блоку icon: $('div.icon').hmbrgr({настройки}); Единственно - надо что-то с шириной делать.
    – Борис
    21 июл 2015 в 22:03
  • В таком случае нарушается вся конструкция, а иконка становится размером блока icon 100%. Такой вариант, к сожалению, не вариант. 21 июл 2015 в 22:30
  • Ну тогда вам надо ваш код из плагина преобразовать во что-то иное - некий объект, который может визуально модифицировать элементы, которые ему передаются в качестве параметра и поставлять функции-обработчики событий для произвольных элементов.
    – Борис
    22 июл 2015 в 8:06

1 ответ 1

2

Как вариант костыля - эмулировать клик по иконке при клике по родителю. Нечто вроде

$('.icon').on('click', function(){
    $('.hmbrgr.four', this).click();
});
7
  • Прошу прощения за глупый вопрос, не совсем понял. Это отдельной строкой нужно вставить, или заменить какие-то строки? 22 июл 2015 в 17:03
  • Отдельной строкой, после вызова вашего плагина, т.е. после $('.hmbrgr.four').hmbrgr({ width : 30, height : 22, barHeight : 3, barRadius : 3, barColor : '#2a2a2a' }); 22 июл 2015 в 17:17
  • Да, это вариант, так работает. Но в таком случае возникает один минус - анимация происходит с задержкой, где-то в пару секунд. Как этого можно избежать? 22 июл 2015 в 18:07
  • Единственное, что приходит в голову - оптимизировать ресурсы сайта. Поужимать картинки (например, здесь compresspng.com), поужимать скрипты (jscompress.com), поужимать СSS (csscompressor.com). 22 июл 2015 в 19:04
  • Здесь, в этом случае, ресурсы вообще минимальные. Скриптом практически нет, только несколько строк, картинок также, и файл стиля минимальный. Задержка получается именно при таком варианте. Возможен ли какой-то другой вариант? Вы, я так понимаю, очень хорошо знаете jQuery, вот и хочу у вас, как у специалиста, спросить, есть ли еще какие иные варианты? 22 июл 2015 в 19:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.