HUGOにCSSだけでヘッダーグローバルメニューを作る

最終更新日:2022-06-15 公開日:2022-05-24
約2100字約9分で読めます
カテゴリー:HUGO

たかし

HUGOで作ったページのヘッダーを作りたいな。

参考にできるコードとかない？

スゴショウ

丸パクリで使えるコードを用意しました。

そのまま使えばアニメーションつきのメニューができますよ！

今回、HUGOで作ったサイトにグローバルメニューを作成しました。

WordPressとかだと最初からグローバルメニューがあるけど、HUGOだと自分で実装する必要があります。
ヘッダーができるとサイトがシマりますよね。

決まった項目を並べるだけならカンタンですが、セクションを自動挿入するとなると関数も書く必要があり少し面倒くさくなります。

コードも掲載するのでサイト作成の参考にしてみてください。

今回HUGOに実装するCSSだけで作るグローバルメニュー
- 完成イメージ
- HUGOの環境
- 注意点など
HUGOでグローバルメニューを作る手順
- セクションメニューを呼び出す関数を作成
- ヘッダー部分のHTMLの調整
- CSSでの装飾

今回HUGOに実装するCSSだけで作るグローバルメニュー

まず、完成イメージやHUGOの環境などの基本情報を先に共有します。

完成イメージ
HUGOの環境

順番に見ていきましょう。

完成イメージ

今回作るグローバルメニューの完成イメージはこちらです。
HUGOのグローバルメニュー

プルダウンメニューが使えるメニューになります。

HUGOの環境

こちらのHUGO環境は以下です。

カテゴリ管理：Section機能
バージョン：0.98.0
仕様テーマ：自作

テーマは自作ですが特にライブラリも何も使っていない、HTMLとCSSで書いてるものです。
色々つまづきながら今の環境まで来たので、注意するポイントも含めて共有していきます。

HUGOでグローバルメニューを作る手順

では、実際にHUGOで作ったサイトにグローバルメニューを実装していきましょう。

セクションメニューを呼び出す関数の作成
ヘッダー部分のHTMLの記述
CSSでの装飾

上記の順番で進めていきます。

セクションメニューを呼び出す関数の作成

まず、Sectionメニューを呼び出す関数を作成しましょう。
いきなり完成形です。

grobal.html
        {{ define "gnav-list" }}
        <ul>
            {{ range .Sections }}
            <li>
                <a href="{{.Permalink}}">{{ .Title }}</a>
                {{ if (len .Sections) }}
                <ul>
                    {{ range .Sections }}
                    <li>
                        <a href="{{.Permalink}}">{{ .Title }}</a>
                    </li>
                    {{ if (len .Sections) }}
                    {{ template "gnav-list" . }}
                    {{ end }}
                    {{ end }}
                </ul>
                {{ end }}
                {{ end }}
            </li>
        </ul>
        {{ end }}
        {{ template "gnav-list" .Site }}

Sectionが2階層になっている場合の関数です。

サイドバーにSectionを載せるだけだったり、階層が1つならサイドバーに使っている下の関数で大丈夫です。

grobal.html
  {{ define "gnav-list" }}
  <ul>
    {{ range .Sections }}
    <li>
      <a href="{{.Permalink}}">{{ .Title }}({{ len .RegularPagesRecursive }})
      </a>
      {{ if (len .Sections) }}
      {{ template "gnav-list" . }}
      {{ end }}
      {{ end }}
    </li>
  </ul>
  {{ end }}
  {{ template "gnav-list" .Site }}

2階層にしてプルダウンの機能を実装しようとすると、セレクタの指定や値の打ち消しとかの管理が面倒なので、1つ目のコードを採用しています。

2階層目まで関数を書いたらテンプレート化する必要ない気もするのですが、テンプレートを実行する形式にしないと記事ページやSectionページでメニューの表示が変わります。

全ページで動作させるために、テンプレート化してい呼び出す形にする必要があるのです。

ヘッダー部分のHTMLの記述

ベースとなる関数ができたら、ヘッダーに記入しましょう。

今回はそのままheader.htmlに入れる形にしていますが、nav.htmlなどのファイルを作ってヘッダーで呼び出すのもアリです。

header.html
<header>
    <nav class="gnav-wrap">
        {{ define "gnav-list" }}
        <ul class="gnav-list">
            {{ range .Sections }}
            <li class="gnav-item">
                <a href="{{.Permalink}}">{{ .Title }}</a>
                {{ if (len .Sections) }}
                <ul class="gnav-droplist">
                    {{ range .Sections }}
                    <li class="gnav-dropitem">
                        <a href="{{.Permalink}}">{{ .Title }}</a>
                    </li>
                    {{ if (len .Sections) }}
                    {{ template "gnav-list" . }}
                    {{ end }}
                    {{ end }}
                </ul>
                {{ end }}
                {{ end }}
            </li>
        </ul>
        {{ end }}
        {{ template "gnav-list" .Site }}
    </nav>
</header>

使っている環境によって打ち消す必要があるCSSが違うので、とりあえず各要素にクラス名をつけています。

CSSでの装飾

HTMLが書けたらCSSを実装してきましょう。
まとめて貼っても良いのですが、2段階に分けて貼ります。

先に動作なしで問題なく表示されるところまで進めて、そのあとに動作を実装する流れでいきましょう。

先に指定しているCSSによるズレ等もあるので、一気にコピペするより2−3つの塊ごとにコピペして確かめながらの実装をオススメします。

style.css
/* アイテムの配置 */
.gnav-list {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
}

.gnav-item {
    width: 100%;
    height: 4rem;
    position: relative;
    list-style: none;
    transition: all .3s;
}

/* ホバーによる変化 */
.gnav-item:hover {
    background-color: #333333;
}

.gnavi-item:not(:first-child)::before {
    content: "";
    width: 0.1rem;
    height: 100%;
    background-color: #f7f7f7;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnav-item:hover::before {
    background-color: #0071BB;
}

.gnav-item a {
    display: flex;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    color: #444444;
    font-size: 1.5rem;
    font-weight: bold;
    transition: all .3s;
}

.gnav-item:hover a {
    color: #777777;
}

これをいれたら、メニューの原型っぽいものが出るはずです。

スゴショウ

ここで自分の環境に合わせた見た目に整えるのがオススメです。

細かいmarginやらpaddingを調整してスッキリさせましょう。
positionも環境によっては、値の調整が必要です。

見た目が整ったら動作を実装しましょう。

style.css
/* ドロップの開閉動作 */
.gnav-droplist {
  transform: scaleY(0);
  transform-origin: center top;
  transition: all .3s;
  width: 100%;
  top: 4rem;
  z-index: 2;
}
.gnav-item:hover .gnav-droplist {
  transform: scaleY(1);
}

/* ドロップメニュー部とホバーでの調整 */
.gnav-dropitem {
  background-color: #666666;
  height: 4rem;
  transition: all .3s;
  position: relative;
  list-style: none;
  z-index: 2;
}
.gnav-dropitem:not(:first-child)::before{
  content: "";
  width: 100%;
  height: 0.1rem;
  background-color: #f7f7f7;
  position: absolute;
  top: 0;
  left: 0;
}
.gnav-dropitem:hover {
  background-color: #aaaaaa;
}
.gnav-dropitem a {
  display: flex;
  justify-content: center;
  color: #f7f7f7;
  text-decoration: none;
  position: relative;
}

今回もコードを一気にコピペするのではなく、塊ごとにコピペして確認しながら進めましょう。

まとめ：HUGOでグローバルメニューの実装は3ステップでOK

HUGOでグローバルメニューの実装は3ステップでOK

もう一度完成形のイメージを掲載します。
HUGOのグローバルメニュー

ドロップダウンでメニューが表示できると、ヘッダー部分がコンパクトにまとまりますね。
掲載したコードをベースに進めればグローバルメニューが完成します。

スゴショウ

2-3ブロックずつコピーしながら実装しましょう。

カテゴリー:HUGO