レスポンシブWebデザインに対応したメニューの作り方【追記あり】

できあがりはこちらのサンプルをご覧ください。

それでは作り方を解説していきます。

HTML

まずはHTMLです。

  
menu
  

    
html
    
css
    
javascript
    
php
    
CGI
    
Python
    
Ruby
    
java
  

id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。

CSS

続いてCSSです。まずは全体を載せます。

#menu{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background: #444;
}
#toggle{ 
 display: none;
}
@media only screen and (max-width: 768px) {
    #menu li{
    width: 25%;
    border-bottom: 1px solid #444;
  }
}
@media only screen and (max-width: 480px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}

では、部分ごとで解説していきます。

最初の状態

CSSはごく普通のメニューですので問題ないと思います。今回は横に8つ並ぶメニューですので、1つの横幅は12.5%にしています。

#menu{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background: #444;
}
#toggle{ 
 display: none;
}

全体の横幅は100%ですが、1920pxなど大きなディスプレイで100%になると広すぎて逆に見にくいので、max-width: 960px;を指定しています。

最近はモバイルファーストで小さいディスプレイから設計する場合も多いようですが、IE8以下はメディアクエリに対応していないこともあり、今はまだPCから考える方がいいかと個人的には考えています。

もちろんIE8以下でもメディアクエリを有効にする方法はあります。下のコードを追加するだけです。

768px以下の場合

続いて、タブレットなどを想定した768px以下のディスプレイで見た場合のスタイルです。

@media only screen and (max-width: 768px) {
    #menu li{
    width: 25%;
    border-bottom: 1px solid #444;
  }
}

メニューの幅を12.5%から25%へと倍にすることで、1列から2列になります。上下の区切りが分かるように下線を引いています。

横線を引いてもいいかもしれません。横線を引く場合は「box-sizing: border-box」を指定する必要があります。指定しないと3つで折り返してしまいます。

「box-sizing: border-box」については先日書いたこの記事をご参考に。

480px以下の場合

最後はスマホなど480px以下のディスプレイで見た場合のスタイルです。ここでガラッと変わります。初期状態ではメニューの内容は表示されず、「menu」と書かれたボタンのみ表示されています。その「menu」をクリックするとメニューの内容がスライドして現れます。

クリックしてメニューが現れる仕組みはjQueryで実装します。コードはCSSの後で紹介しています。

@media only screen and (max-width: 480px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }

#menuの表示をいったん消して、メニュー1つの幅を100%にします。

  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

いったん消したメニューを開くためのボタンを作ります。最初に消していた#toggleをここで表示するようにします。後で指定する擬似要素の基準となるため、position: relativeを指定します。

最後に左のアイコンです。画像を使ってもいいですが、CSSで表現できるものはCSSでおこないたいです。

  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}

ちょっと分かりにくいかもしれませんのでボタンの構造を画像にしてみました。

白い正方形の上に黒い長方形を2つ乗せて3本線を表現しています。

この3つの要素はすべて擬似要素で作られています。この辺の使い方は慣れるまで難しいかもしれませんが、使い慣れるとCSSの幅がぐっと広がります。

では、縦の位置の調整について、ボタンの部分をもっと拡大して解説します。

top: 50%;を指定することで、擬似要素の上の位置が画像の点線部分になります。

白い正方形にあたる「#toggle:before」の場合は高さ20pxの半分にあたる10pxを「margin-top: -10px」で上げることで上下中央に表示されます。

続いて、白い正方形を区切る2つの黒い長方形について、「#toggle a:before」は真ん中の太い点線部分から6px上げて（上の点線）、「#toggle a:after」は点線部から2px下げて（下の点線）表示しています。

jQuery

#toggleを押してメニューを開く仕組みはjQueryで実装します。jQueryファイルは各自指定しておいてください。

    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }

ということで、以下のようになっています。

$(function(){
  $("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 480;
    if(win > p){
      $("#menu").show();
    }
  });
});

#toggleをクリックするたびに#menuがスライドして開閉します。jQueryを知らない方でもイメージできるようなシンプルなコードです。この辺がjQueryの親しみやすさかなと思ったりしています。

まとめ

ということで、レスポンシブにデザインする際に使えそうな横メニューの作り方を解説しました。

今回は8個のメニューということで、3パターンに変形するようにしました。これが7つになると2列にはしにくいので、今回のようにはいかないと思います。かといってあまり早い段階で縦1列にするとメニューの幅が広くなりすぎてスペースの無駄使いになります。

どのポイントでどのように変形させるかは、メニューの数によって様々だと思います。

また、メニューと直接関係ないかもしれませんが、3本線の作り方は役に立ちますので、ぜひ覚えていってください。