jQuery addClass example

Dropdown global menu

by s_hiroshi

HTML

<div class="menu-global">
	<div class="menu-global-switch"><img src="https://www.denso-aircool.co.jp/wordpress/wp-content/themes/denso-aircool-1709/images/common/btn-open.png" alt="open" /></div>
	<div class="menu-global-wrapper">
		<div class="menu-global__close"><i class="fa fa-2x fa-times"></i></div>
		<ul id="menu-global__nav" class="menu-global__nav clearfix"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15"><a href="https://www.denso-aircool.co.jp/product">製品案内</a>
<ul  class="sub-menu">
	<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="https://www.denso-aircool.co.jp/product/syaryou">車両用空調機器</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://www.denso-aircool.co.jp/product/gyoumu">住宅用・業務用空調機器</a></li>
</ul>
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-31 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-34"><a href="https://www.denso-aircool.co.jp/csr">サステナビリティ</a>
<ul  class="sub-menu">
	<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-31 current_page_item menu-item-35"><a href="https://www.denso-aircool.co.jp/csr">デンソーエアクールのめざす姿</a></li>
	<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="https://www.denso-aircool.co.jp/csr/csr-policy">デンソーエアクール環境方針</a></li>
	<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="https://www.denso-aircool.co.jp/csr/csr-env">環境活動報告</a></li>
	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a...

SCSS

.menu-global-wrapper {
  background: #ccc;
  clear: both;

  ul {
    margin: 0 auto;
    padding: 0;
  }

  li {
    list-style-type: none;
  }

  a {
    display: block;
    padding: 0 18px;

    &:link {
      text-decoration: none;
    }

    &:hover {
      text-decoration: none;
    }
  }
}

.menu-global__nav {
  >.menu-item {
    position: relative;
    float: left;
    width: 188px;
    line-height: 40px;

    @media (max-width: 979px) {
      width: auto;
    }

    &:last-child {
      width: 188px;

      @media (max-width: 979px) {
        width: auto;
      }
    }

    @media (max-width: 767px) {
      float: none;
      border-right: none;
      line-height: 1.5;
    }

    @media (min-width: 768px) {
      >a {
        border-right: 1px solid #ddd;
        border-bottom: 2px solid #ccc;
        text-align: center;
      }

      &.current-menu-item,
      &.current-menu-parent,
      &.current-page-ancestor {
        background: #fff;

        >a {
          border-bottom: 2px solid #ff0000;
        }
      }

      &:last-child a {
        border-right: none;
      }

      &:hover {
        background: #fff;

        >a {
          border-bottom: 2px solid #ff0000;
          ;
        }
      }
    }
  }

  .sub-menu {
    @media (min-width: 768px) {
      display: none;
      z-index: 2;
      position: absolute;
      top: 40px;
      left: 0;
      width: 187px;

      a {
        border-bottom: none;
      }

      /* a:before {
        content: "\f105\20";
        font-family: FontAwesome;
      }*/

      >.menu-item {
        background: #fff;
        border-bottom: 1px solid #eee;
      }

      >.menu-item:hover {
        background: #ff0000;

        a {
          color: #fff;
        }
      }
    }

    @media (max-width: 767px) {
      display: block;
      margin: 0 0 0 1em;
    }
  }

  .wide-item {
    .sub-menu {
      width: 320px !important;
    }
  }

  .medium-item {
    .sub-menu {
      width: 205px !important;
    }
  }
}

JavaScript

jQuery(function($) {
/**
     * メニュー制御
     *
     * @class Menu
     */
     InfoTown = {};
    InfoTown.Menu = (function() {
      /**
       * サブメニュードロップダウン設定
       *
       * sub-menuのドロップダウンを設定します。
       *
       * @method setDropDown
       * @public
       * @param {jQuery} target マウスオーバーされた要素(HTMLLIElement)のjQueryオブジェクトです。
       * @param {jQuery} items HTMLLIElementのリスト(jQuery)です。
       * @param {Object} options fadeIn, fadeOutへ渡すオプションです。
       *   @param {Number} options.duration サブメニュー表示スピードです。
       *   @param {String} options.ease サブメニュー表示エフェクトです。
       *   @param {String} options.expand 展開時に設定するクラス名です。
       * @returns {Boolean} falseを返します。
       */
      function setDropDown(target, items, options) {
        var initial, submenu;
        target = (target instanceof jQuery) ? target : $(target);
        initial = {
          duration: 300,
          ease: "swing",
          expand: ""
        };
        options = options || initial;
        submenu = target.children(".sub-menu");
        /* マウスオーバー処理 */
        target.on("mouseenter", function() {
          items.each(function() {
            $(this).children(".sub-menu").css("display", "none")
          });
          if (submenu.length > 0 && options.expand !== "") {
            $(this).addClass("expand");
          }
          submenu.slideDown(options);
          return false;
        });
        /* マウスリーブ処理 */
        target.on("mouseleave", function() {
          submenu.css({
            "display": "none"
          });
          if (options.expand !== "") {
            $(this).removeClass("expand");
          }
          return false;
        });
      }

      /**
       * サブメニュードロップダウン削除
       *
       * sub-menuクラスへ設定されたドロップダウンを削除します。
       *
       * @method setDropDown
       * @public
       * @param {jQuery} target マウスオーバーされた要素(HTMLLIElement)のjQueryオブジェクトです。
       * @param {jQuery} items HTMLLIElementのリスト(jQuery)です。
       * @returns {Boolean} falseを返します。
       */
     ...