ヘッダーメニューを全幅で表示する。【ドロップダウンも画面いっぱいにする】初心者向け、コピペ可。

グローバルナビを画面幅に合わせる

完成図【デモ画面】

See the Pen ヘッダー全幅 by ゆけむ (@yukemu) on CodePen.

cssの最上部にてbodyとulの余白のみリセットしています。

デモは当サイトのヘッダーをも併せてご参照ください。

プルダウンは親1メニューのみ実装しています。ホバーの上ご確認ください。

解説

各コードの概要を説明します。

HTML

<header>
  <!--タイトル -->
  <div class="container">
    <span>
      タイトル
    </span>
    <!--メニュー -->
    <ul class="pulldown-head">
      <li>
        <a href="#" class="parent-menu first">親1</a>
        <ul id="active" class="children-menu">
          <li> <a href="#">子1</a></li>
          <li> <a href="#">子2</a></li>
          <li> <a href="#">子3</a></li>
          <li> <a href="#">子4</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="parent-menu">親2</a>
      </li>
      <li>
        <a href="#" class="parent-menu">親3</a>
      </li>
    </ul>
  </div>
</header>

headerタグを大きなボックスとして、その中の「左側にspanタグ（タイトル）」「右側にulタグ（メニュー）」と配置するためのマークアップになります。

ホバー時に表示する子メニューは、親メニューとなるliの中へ記述します。

CSS

body,
ul {
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  justify-content: center;
  height: 70px;
  width: 100%;
  background-color: black;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 960px;
}
span {
  font-size: 20px;
  color: white;
}
a {
  text-decoration: none;
  font-size: 16px;
  color: white;
  padding: 23px 16px;
}
ul {
  display: flex;
  list-style: none;
  padding: 23px 16px;
}
.children-menu {
  position: absolute;
  margin-top: 23px;
  left: 0;
  width: 100%;
  background-color: green;
  justify-content: center;

  /* 初めはメニューを隠す */
  opacity: 0;
  visibility: hidden;
  transition: 300ms;
}
/* jsでクラスを付けて表示 */
.active {
  opacity: 1;
  visibility: visible;
}

bodyとulのmarginとpaddingはブラウザがデフォルトで付けてしまう余白をリセットしています。head内にリセット用のCSSを読み込ませることが一般的ですので、適宜対応してください。

headerタグのdisplay:flex;で子要素のspanとulを横並びにし、justify-contentで左右の真ん中に配置しています。height;70pxで高さを指定、width:100%で画面幅いっぱいに広げ、background-color:blackで背景を黒色で塗ります。

containerクラスを付けたdivタグで囲うことで、spanとulを960pxのコンテナの両端に設置しています。justify-content:space-between;が両端ぞろえの命令文になり、align-items:center;で上下の中央にテキストを揃えています。

spanで左上のタイトルの文字色を白、サイズを20pxとしています。

aタグのtext-decoration:none;でデフォルトで付与されている下線のついた青色のデザインをリセットし、padding:23px 16px;でクリックできる幅を上下に23pxずつ、左右16pxずつ広くしています。

font-size:16px;の要素の高さは24pxになるので、24px + padding[上下] 23px = 70px　となり、headerの高さと同じになります。

ulタグはメニューのテキストのデザインを調整しています。親、子の両方に適用されます。display:flex;で横並びに、list-style:none;でli要素にデフォルトで付与されている丸いぽちマークを消しています。

.children-menuはホバー後に出てくる子要素のメニューのデザインを調整しています。ulタグで指定したpaddingの下側についている23px分をmargin-top:23px;で調整し、ボックスのすぐ下に配置されるよう指定しています。left:0;にすることで画面の一番左に配置し、width:100%;でその位置から画面右端いっぱいまで要素を広げています。

opacity:0;で初期値を透明にして隠し、visibility:hidden;で要素そのものを触れないようにしています。オパシティのみだと透明になっているだけなのでこのプロパティも併せて指定しましょう。

transition:300ms;で0.3秒かけて動作させるように命令します。

.activeクラスの付け外しでホバー後の子要素を隠したり見せたりします。

JS

$(function () {
  $('.first,.children-menu').hover(
    function () {
      $('#active').addClass('active');
    },
    function () {
      $('#active').removeClass('active');
    }
  );
});

$function(){}　はjqueryを実行するときに必要になるコードです。

上記の中に記述されている、$(‘.first,.children-menu’).hover　で「親1」に付与した.firstクラスをホバーしたときと、ホバーされている間表示しておきたい子要素に付与されている.children-menuクラスをホバーしている間という命令になります。

その下のfunction(){　の1つ目でホバーしたときの挙動、2つ目のfunction(){　でホバーを外した時の処理を記述します。

$(‘#active’).addClass(‘active’);で.children-menuと同じulタグに付与しておいたid=”active”要素に.activeクラスを付けてくださいと命令しています。

removeClassはその逆で、クラスを外してくださいと命令しています。