多くのサイトでは画面遷移がしやすい等のメリットから固定ヘッダーメニューを実装するケースが増えてきました。
そこで、今回は実際に固定ヘッダーメニューのメリットデメリットを解説し、その作成方法を紹介していきます。
レスポンシブな固定ヘッダーメニューのメリット
レスポンシブな固定ヘッダーメニューには以下の二つのメリットがあると言えます。
ユーザーの回遊率を上げる
ユーザーの回遊率、つまり一度の訪問での閲覧数をあげることができます。ユーザーは画面内にリンクがなければそのサイトを離脱しようとするかもしれませんが、固定ヘッダーメニューのようなリンクを設置しておけば、他のページも閲覧してくれるかもしれません。
ランディングページのような縦に長いページでもすぐ画面遷移をおこなえる
ランディングページのような縦長になりがちなページですと、最上部と最下部にしかリンクを設置していないサイトではユーザーが画面遷移しづらいです。
しかし、固定ヘッダーメニューが設置されていればすぐ画面遷移を行うことができ、ユーザービリティが改善されます。
またスマホ画面だとさらに縦長なページになるので、より固定ヘッダーメニューが有効になってきます。
レスポンシブな固定ヘッダーメニューのデメリット
しかし、そんな固定ヘッダーメニューにもデメリットが二つあります。
画面領域が狭くなる
固定されたヘッダーメニューは常に上部の領域を使用してしまうため、本来のページの表示領域が少なくなってしまいます。
ユーザーが意図せずヘッダーメニューをタップしてしまう可能性がある
特にスマホ画面の場合、ユーザーは誤ってページ上部をタップしてしまい、意図せず画面遷移をしてしまうかもしれません。これでは、ユーザーにストレスを与えてしまい、ページを離脱する原因となってしまいます。
この問題に関しては、開閉できるヘッダーメニューやメニューの表示非表示ができるハンバーガーメニューを実装をすることで解決できます。
レスポンシブな固定ヘッダーメニューを作成する
基本的な固定ヘッダーメニュー
上記のメリットデメリットをふまえて、ここからはHTMLとCSSを使用してレスポンシブな固定ヘッダーメニューを作成します。まずはよく見かける基本的なヘッダーメニューからです。例１のページを開いてみてください。
例１ 基本的な固定ヘッダーメニュー
以下例１のコードです
HTML
<div id="wrapper"> <nav id="global-navi"> <ul class="menu"> <li><a href="">コンテンツA</a></li> <li><a href="">コンテンツB</a></li> <li><a href="">コンテンツC</a></li> <li><a href="">コンテンツD</a></li> <li><a href="">コンテンツE</a></li> </ul> </nav> </div> <div class="content"> この文章はダミーです。以下省略 </div>
CSS
#global-navi {
background:#333;
position: fixed;
top: 0;
right: 0px;
width: 100%;
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding: 30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
.content{
line-height: 1.6;
margin: 0 auto;
padding-top: 100px;
width: 800px;
}
.content p{
margin-bottom: 40px;
}
重要なのは#global-naviの「position: fixed;」です。このプロパティを適用することによって要素（今回はヘッダーメニュー）を固定することができます。
このヘッダーメニューだとスマホ画面では少し窮屈に感じてしまうので、次にスマホ画面でもスペースを確保できるレスポンシブなヘッダーメニューを実装していきます。
レスポンシブな固定ヘッダーメニュー
以下のページにレスポンシブな固定ヘッダーメニューを作成します。スマホ画面はPC画面に比べ画面が小さいので、ハンバーガーメニューとしてメニューを表示非表示させる仕組みを実装しました。例２を開いてみてください。
例２ レスポンシブな固定ヘッダーメニュー
以下例２のコードです。
HTML
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <div id="wrapper"> <p class="btn-gnavi"> <span></span> <span></span> <span></span> </p> <nav id="global-navi"> <ul class="menu"> <li><a href="">コンテンツA</a></li> <li><a href="">コンテンツB</a></li> <li><a href="">コンテンツC</a></li> <li><a href="">コンテンツD</a></li> <li><a href="">コンテンツE</a></li> </ul> </nav> </div> <div class="content"> この文章はダミーです。以下省略 </div>
CSS
#global-navi {
background:#333;
position: fixed;
top: 0;
right: 0px;
width: 100%;
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding: 30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
/*スマホ画面でハンバーガーメニューの形にする*/
@media screen and (max-width: 600px) {
#wrapper nav {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding-top: 50px;
background:#333;
font-size: 16px;
box-sizing: border-box;
z-index: 2
}
#wrapper nav ul li {
display:block;
padding: 20px 28px
}
#wrapper nav ul li a {
text-decoration: none;
color: #ddd
}
#wrapper .btn-gnavi {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
height: 24px;
z-index: 3;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span {
position: absolute;
width: 30px;
height: 4px;
background: #666;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span:nth-child(1) {
top: 0
}
#wrapper .btn-gnavi span:nth-child(2) {
top: 10px
}
#wrapper .btn-gnavi span:nth-child(3) {
top: 20px
}
#wrapper .btn-gnavi.open {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
#wrapper .btn-gnavi.open span {
background: #666
}
#wrapper .btn-gnavi.open span {
width: 24px;
}
#wrapper .contents section p {
position: absolute;
top: 50%;
width: 30%;
line-height: 1.4;
font-size: 20px;
color: #fff;
text-shadow: 0 0 6px #666
}
#wrapper .contents section:nth-child(odd) p {
left: 10%
}
#wrapper .contents section:nth-child(even) p {
right: 10%
}
}
.content{
line-height: 1.6;
margin: 0 auto;
padding-top: 100px;
}
.content p{
margin-bottom: 40px;
}
jQuery
$(function(){
$(".btn-gnavi").on("click", function(){
// ハンバーガーメニューの位置を設定
var rightVal = 0;
if($(this).hasClass("open")) {
// 位置を移動させメニューを開いた状態にする
rightVal = -300;
// メニューを開いたら次回クリック時は閉じた状態になるよう設定
$(this).removeClass("open");
} else {
// メニューを開いたら次回クリック時は閉じた状態になるよう設定
$(this).addClass("open");
}
$("#global-navi").stop().animate({
right: rightVal
}, 200);
});
});
スマホ画面ではハンバーガーメニューを実装することで、固定されていたとしても充分なスペースを確保することができました。また表示非表示の切り替えができるので、ユーザーが不要なタップをするというリスクを軽減することができます。
スマホ画面にて実装したハンバーガーメニューに関しては、以下のページで詳しく解説されてます。
【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する
まとめ
今回の記事では、レスポンシブな固定ヘッダーメニューのメリットデメリットと、その作成方法について解説してきました。
一長一短だと思われるので、自身のサイトに合わせて適宜実装してほしいと思います。
