ヘッダーメニュー2-1

ソースコード

ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。

デザインコンポーネントについて

HTML

<header class="mfc-header-001-002-1 mf-width-fullexpand">
    <nav class="mfc-navbar fixed-top" role="navigation" aria-label="main navigation" id="header_gcmf">
        <div class="mfc-navbar-brand mfc-navbar-brand-center">
            <a class="mfc-navbar-item" href="#"><img alt="サイトタイトル" src="https://via.placeholder.com/320x100/e0e0e0/000000?text=SiteName"><span>サイトタイトル</span></a>
            <a role="button" class="mfc-navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="#header_menu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div class="mfc-navbar-menu" id="header_menu">
            <div class="mfc-navbar-bg"><a data-target="#header_menu">></a></div>
            <div class="mfc-navbar-content">
                <div class="mfc-navbar-close"><a data-target="#header_menu"><span></span><span></span><span></span></a></div>
                <div class="mfc-navbar-content-inner">
                    <div class="mfc-navbar-start">
                        <div class="mfc-navbar-item has-dropdown is-hoverable">
                            <a class="mfc-navbar-link">Menu1</a>
                            <div class="mfc-navbar-dropdown">
                                <a class="mfc-navbar-item" href="#">Menu Item1</a>
                                <a class="mfc-navbar-item" href="#">Menu Item2</a>
                                <a class="mfc-navbar-item" href="#">Menu Item3</a>
                            </div>
                        </div>
                        <div class="mfc-navbar-item has-dropdown is-hoverable">
                            <a class="mfc-navbar-link">Menu2</a>
                            <div class="mfc-navbar-dropdown">
                                <a class="mfc-navbar-item" href="#">Menu Item1</a>
                                <a class="mfc-navbar-item" href="#">Menu Item2</a>
                                <a class="mfc-navbar-item" href="#">Menu Item3</a>
                            </div>
                        </div>
                        <div class="mfc-navbar-item has-dropdown is-hoverable">
                            <a class="mfc-navbar-link">Menu3</a>
                            <div class="mfc-navbar-dropdown">
                                <a class="mfc-navbar-item" href="#">Menu Item1</a>
                                <a class="mfc-navbar-item" href="#">Menu Item2</a>
                                <a class="mfc-navbar-item" href="#">Menu Item3</a>
                            </div>
                        </div>
                        <a class="mfc-navbar-item" href="#">Menu4</a>
                        <a class="mfc-navbar-item" href="#">Menu5</a>
                        <a class="mfc-navbar-item" href="#">Menu6</a>
                        <div class="mfc-navbar-end">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>

以下のコードをbodyタグ内のできるだけ後ろに配置します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  jQuery(function($) {
    var $header = $(".mfc-header-001-002-1");
    //nav
    var $nav = $header.find(".mfc-navbar");
    var headerHeight = $nav.prevAll().outerHeight();
    var navPosition = function() {
      var st = $(window).scrollTop();
      if (st > headerHeight) {
        $("body").css("padding-top",headerHeight);
        $nav.addClass("is-fixed-top");
      } else {
        $("body").css("padding-top",0);
        $nav.removeClass("is-fixed-top");
      }
    }
    $(window).scroll(navPosition);
    navPosition();

    var current_scrollY;

    $header.find(".mfc-navbar-burger, .mfc-navbar-close a, .mfc-navbar-bg a").on("click", function() {
      var $this = $(this);
      var $wrap = $("body");

      if (!$wrap.hasClass("mfc-navbar-open")) {
        current_scrollY = $(window).scrollTop();
        if ($nav.hasClass("is-fixed-top")) {
          current_scrollY = current_scrollY + headerHeight
        }
        $wrap.css({top: -1 * current_scrollY});
        $($this.data("target")).toggleClass("is-active");
        $wrap.toggleClass("mfc-navbar-open");
        $(".mfc-navbar-burger").hide();
      }else{
        $($this.data("target")).toggleClass("is-active");
        $wrap.toggleClass("mfc-navbar-open");
        $wrap.css({top:'auto'});
        $("html, body").scrollTop(current_scrollY);
        $(".mfc-navbar-burger").show();
        navPosition();
      }

    });

    //accordion
    $header.find(".mfc-navbar-item.has-dropdown").on("click", function() {
      var $this = $(this);
      $this.toggleClass("is-active");
      $this.find(".mfc-navbar-dropdown").slideToggle();
    });

  });
</script>

バリエーション

PC向けレイアウト調整

mf-widthによる表示幅が指定できます。

コンテンツ幅

<header class="mfc-header-001-002-1 mf-width-expand">
       :
</header>