메뉴 호버효과

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>menu</title>
      <style>
          *{margin:0;padding:0;border:0;box-sizing: border-box}
          li {list-style: none}
          .menu_box{position: relative;max-width:1280px;margin:0 auto;}
          .menu{font-size: 0;}
          .menu_lst {display: inline-block;padding:10px;font-size: 16px}
          .under_bar{position: absolute;left: 0;bottom: 0;width:100px;height:2px;transform-origin: left center;}
      </style>
  </head>
  <body>
  <div class="menu_box">
      <ul class="menu">
          <li class="menu_lst">112312321312</li>
          <li class="menu_lst">2safsdfdfa</li>
          <li class="menu_lst">3asfsaf</li>
          <li class="menu_lst">4safsadfas</li>
          <li class="menu_lst">5</li>
          <li class="menu_lst">sadfsdfa6</li>
          <li class="menu_lst">sdfdsf7</li>
          <li class="menu_lst">8</li>
          <li class="menu_lst">9sdfsdfsdf</li>
      </ul>
      <span class="under_bar"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
      (function (win, $) {
          var menuEffect = {
              init: function () {
                  this.setElements();
                  this.configures();
                  this.initLayouts(this.initNum, this.bgColor);
                  this.bindEvents();
              },
              configures: function () {
                  this.underBarDuration = '0.3s';
                  this.initNum = 0;
                  this.bgColor = '#000';
              },
              setElements: function () {
                  this.gnbMenu = $('.menu')
                  this.gnbMenuList = $('.menu_lst');
                  this.underBar = $('.under_bar');
              },
              bindEvents: function () {
                  // $.proxy 두번째 매개변수 : 참조 객체
                  // $.proxy 첫번째 매개변수 : 참조 객체의 프로퍼티
                  this.gnbMenuList.hover($.proxy(this.mouseOver, this), $.proxy(this.mouseOut, this))
                  this.gnbMenuList.on('click', $.proxy(this.clickEvent, this));
              },
              initLayouts: function (num, color) {
                  if (!num || num >= this.gnbMenuList.length || num < 0) num = 0;
                  var a = this.gnbMenuList[num].offsetWidth / 100;
                  this.underBar.css({
                      transform: `scaleX(${a})`,
                      backgroundColor: color,
                  });
              },
              mouseOver: function (e) {
                  var l = e.target.offsetLeft;
                  var n = e.target.offsetWidth / 100;
                  this.underBar.css({
                      transform: `translateX(${l}px) scaleX(${n})`,
                      transitionDuration: this.underBarDuration,
                      transitionProperty: 'transform',
                      backgroundColor: this.bgColor,
                  })
              },
              mouseOut: function () {
                  var o = this.gnbMenu.find('.on');
                  if (o.length > 0) {
                      var l = o[0].offsetLeft;
                      var w = o[0].offsetWidth / 100;
                      this.underBar.css({
                          transform: `translateX(${l}px) scaleX(${w})`,
                          transitionDuration: this.underBarDuration,
                          transitionProperty: 'transform',
                      })
                  } else {
                      this.underBar.css({
                          backgroundColor: 'transparent',
                      })
                  }
              },
              clickEvent: function (e) {
                  $(e.target).addClass('on').siblings().removeClass('on');
              }
          }
          menuEffect.init();
      })(window, window.jQuery)
  </script>
  </body>
  </html>
LHJ

메뉴 호버효과

메뉴 호버효과

Related Posts
