レスポンシブ対応グローバルナビゲーションを付けてみた

レスポンシブ対応のグローバルナビゲーションを付けてみました。

現状ちょっと見栄えが微妙な状況ですが……

参考にしたサイト

コチラの「mororeco」というサイトを参考にしました。

morobrand.net

画面幅に応じて、「1段→2段→広がるメニュー」と変わります。

カスタマイズ

色の変更以外に、ちょろっと自分用にカスタマイズしました。

変化する幅の調整

設定している文言の関係で、1段→2段にするための幅を変更しました。

/* 画面サイズが768px以下の場合に適用 */
@media only screen and (max-width: 768px) {

この箇所を

@media only screen and (max-width: 1000px) {

このように変更しました。

これで元々768px以下になると2段になるところを、1000px以下で変化するようになります。

枠線(border)

枠線の変更箇所です。ソースは抜粋したところのみになります。

2段のとき、四角く枠線がつくようにしました。

この方がボタンごとの区切りが見やすいと思ったので。

@media only screen and (max-width: 1000px) {
  #menu li a, #menu li:last-child a {
    border: 1px solid #2e0050;
  }
}

また広がるメニュー表示のときも、項目ごとの区切り線として上下に枠線を入れました。

@media only screen and (max-width: 480px) {
    #menu li a, #menu li:last-child a {
        border: none;
        border-bottom: 1px solid #2e0050;
    }
    #toggle a{
        border-top: 2px solid #2e0050;
        border-bottom: 2px solid #2e0050;
    }
}

メニューの追加箇所

実体となるリスト要素は、「ヘッダ」→「タイトル下」にセットしました。

現状を見ると「パンくずリスト」を設定しています。

その場合、記事表示にすると、パンくずリスト内にグローバルナビが入ってしまうようです……

どうしたものか……