レスポンシブグローバルナビゲーションの作り方と設定

グローバルメニュー

どうもlisです。

そのうちブログ上部にグローバルナビゲーションを付けてみたいなぁと思い、最近よく調べていました。

まだこのブログには付けていないですが……
テスト用のブログを作って、試作品を作ってみました。

ということで、その試作品の作り方とか設定方法とかをご紹介です。

どんなものなのか？
ベースの作り方・設定方法
CSSで装飾していく
やってみた感想

どんなものなのか？

こんな感じで作りました。

PCなどの幅の広い画面のとき

PC用グローバルメニュー

スマホなどの幅の狭い画面のとき

スマホ用グローバルメニュー

ベースの作り方・設定方法

それでは具体的な作り方・設定方法をご紹介していきます。

今回はコチラのサイトの「２：【Javascript+CSS】Toggleでスマートフォン対応」を参考にしました。

www.aiship.jp

グローバルナビゲーション自体のベースの仕組みは、ココに書かれているままです。

しかしコレにリンクなどを追加して設置しても、あくまで装飾が何もされていない骨組み状態です。

この状態で表示すると「なんやねんコレ」みたいな謎の塊が誕生します(笑)

グローバルメニュー骨組み状態

なので、コレに装飾(CSS)で肉付けしていき、今回のような感じのものに変えていきます。

では順を追って説明します。
はてなブログベースで説明していきますが、他のサービスでも同様の箇所に追加していけば設定可能です。

デザインを開く

ダッシュボード→デザインを選択。 ★メニューの画像

真ん中のカスタマイズ(スパナマーク)を選択してください。

それでは、それぞれのコードを設定していきます。

1つ目のコードをヘッダに設定

ヘッダの「タイトル下」に、1つ目のコードをコピペします。

このとき、「<li<<a<HOME</a<</li<」の箇所を、設定したいリンク用に編集します。

具体的にはこんな感じ。

<li><a href="リンクさせたいURL">メニューに表示させる文言</a></li>

リンク情報の設定をした状態の例がコチラ。

<nav class="globNav-row">
 <span class="globNav-toggle">MENU</span>
 <ul class="globNav-inner">
  <li><a href="http://lisztester.hatenablog.com/">HOME</a></li>
  <li><a href="http://lisztester.hatenablog.com/archive/category/%E3%81%8A%E9%87%91">お金</a></li>
  <li><a href="http://lisztester.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
  <li><a href="http://lisztester.hatenablog.com/archive/category/PC">PC</a></li>
  <li><a href="http://lisztester.hatenablog.com/archive/category/%E9%81%A9%E5%BD%93">適当</a></li>
 </ul>
</nav>

HOMEにはトップページ。
あとは、「お金」、「ブログ」、「PC」、「適当」というカテゴリへのリンクを設定してみました。

テスト用のブログなので、適当に記事とカテゴリを作りました(笑)

また「<span class=“globNav-toggle”>MENU+</span>」の箇所ですが、「MENU+」という文字が、スマホ表示での「MENU」の文言にあたるので、変更したい場合は、ここの文字を変えればOKです。

3つ目のコードをフッタに設定

先に3つ目のコードをフッタにコピペしちゃいましょう。

JQueryの読み込みを既に設定している場合は、これだけでOK！

設定していない場合は、↓のコードを先頭にコピペしてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

コレを入れないとレスポンシブ対応の動作が動きません。
ということで入れた場合の全景はこうなります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
    $(function(){
        $(".globNav-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

globNav-toggleクラスをクリック時にスライドで出し入れしてるんですね。なるほど。

2つ目のコードをデザインCSSに設定

それでは2つ目のコードを、デザインCSSにコピペしましょう。

大枠のくくりとしては、下記コードのコメントのようになっています。

/* 全体的な設定 */
.globNav-toggle { display: none;}
.globNav-inner{ overflow: hidden;}
.globNav-inner > li { float: left;}
/* スマホ表示のとき */
@media only screen and (max-width: 480px){
.globNav-toggle { display: block;}
.globNav-inner{ display: none}
.globNav-inner > li { float: none;}
}
/* PC表示のとき */
@media only screen and (min-width: 481px){
.globNav-inner{ display: block!important;}
}

これで骨組みは完成です。

冒頭でも行ったとおり、この状態ではただ骨組み……

なので装飾(CSS)で肉付けしていき、謎の塊から見れるメニューにしていきましょう！

CSSで装飾していく

それでは見た目を作っていきましょう！

今回こんなイメージで作りました。

シンプルな感じ
濃青ベース
マウス乗せたらわかるようにしたい
スマホ表示時、「MENU」と要素の間に区切りが欲しい
スマホ表示時、リンクはセンタリングで表示したい

それぞれ説明していきますが、各説明のところは必要箇所をコピペしてください。
元からあったモノを誤って消してしまうと、うまく表示されない可能性があります。

それではいきましょう。

表示のベースを作る

まずは背景色ですね。
今回はコチラの色を設定しました！
~~適当でいいやーって思って#123456にしたらなんかいい感じの色になりました~~

.globNav-row { background-color: #123456; }

色部分は好きな色に設定してください。
色の調べ方はコチラをご参考に。

www.lisz-works.com

今回、背景色を暗めの色に設定したので、文字色を白にしました。

.globNav-toggle {
  color: #fff;
}

.globNav-inner > li > a {
  color: #fff;
}

.globNav-inner > li > a:hover {
  color: #fff;
}

@media only screen and (max-width: 480px) {
  .globNav-inner > li > a {
    color: #fff;
  }
}

ちなみに「:hover」は選択時の設定です。

マウス乗せたら下線が出るようにする

ぼくがマウスを乗せるとピンクの下線が引かれるようにしました。

.globNav-inner > li {
  /* 下線を背景色と同じ色で隠す */
  border-bottom: solid 3px #123456;
  /* 幅調整 */
  padding: 0px 10px 0px 10px;
  margin: 6px 2px 3px 2px;
}

@media only screen and (min-width: 481px) {
  .globNav-inner > li:hover {
    /* 選択時、下線をピンクで表示 */
    border-bottom: solid 3px #a0a;
  }
}

なぜ通常時に背景色と同じ色で下線を隠しているのかというと…

マウスを乗せたときに、3px分の下線が追加されます。

このとき、元あったところに3px分たされるせいで、下線の表示とともに文字が少し上にズレるんですね。

選択時に文字がポコポコ動くほうがいい！っていうならいいかもしれませんが、今回はシュシュシュッと動くバーをイメージしていたので、事前に3px分ズラすために同色で下線を仕込んでいます。

これは単純に線を追加しただけですね。

背景が濃青だったので、それより更に濃い青で地味に区切りをつけました。

@media only screen and (max-width: 480px) {
  .globNav-row > span { border-bottom: solid 3px #122334; }
}

スマホ表示時、リンクはセンタリングで表示したい

これもただセンタリングするだけです。

@media only screen and (max-width: 480px) {
  .globNav-inner > li {
    text-align: center; 
  }
}

はじめ<a>にコレを付けたら凄いずれて、よくよく考えたら「1要素の大本は<li>じゃん」と気付きコチラに収まりました。

完成形

ぼくの作った完成形はコチラ。

/* 共通 */
.globNav-row { background-color: #123456; }
.globNav-toggle {
  display: none;
  color: #fff;
  text-align: center;
}
.globNav-inner { overflow: hidden; }
.globNav-inner > li {
  float: left;
  list-style:none;
  border-bottom: solid 3px #123456;
  padding: 0px 10px 0px 10px;
  margin: 6px 2px 3px 2px;
  text-align: center; 
}
.globNav-inner > li > a {
  text-decoration: none;
  color: #fff;
}
.globNav-inner > li > a:hover {
  color: #fff;
}
/* スマホ表示 */
@media only screen and (max-width: 480px) {
  .globNav-toggle { display: block;}
  .globNav-row > span { border-bottom: solid 3px #122334; }
  .globNav-row > ul {
    padding: 0px;
    margin: 0px;
  }
  .globNav-inner { display: none }
  .globNav-inner > li {
    float: none;
    text-align: center; 
  }
  .globNav-inner > li:hover {
    border-left: solid 3px #a0a;
  }
  .globNav-inner > li > a {
    text-decoration: none;
    color: #fff;
  }
}
/* PC表示 */
@media only screen and (min-width: 481px) {
  .globNav-inner { display: block!important; }
  .globNav-inner > li {
    width: 15%;
  }
  .globNav-inner > li:hover {
    border-bottom: solid 3px #a0a;
  }
}

やってみた感想

ベースとなるものがあったので、仕組みがそのまま導入できたのでかなり楽でしたね。

CSSによる装飾については、正直にわか知識なので調べながら軽く奮闘していましたが、「思った以上に簡単にできたな」というのが、率直な感想です。

「大変だった」というよりは、「こうしたらキレイかな？」というイメージに対して、作り込んでいくのがだんだん楽しくなっていきました。

とか言いつつ、幅調整がなんかうまくいっていない。

にわか知識なりに頑張ってみたものの、CSSムズカシイ……

ひょんなことで解決しそうな気もしますが……

というかそもそも、やるだけやって、このブログにまだつけてないんですけどね……

なにをメニューに載せようか悩んでいる最中なので、そのうち突然つけるかもしれません。

できればメニューを階層化させるのが夢です。

みなさんもよければ試してみてくださいー

lisz-works

プログラミングと興味を貴方に