コピペのみで完成！簡単ハンバーガーメニューの作り方

コピペだけで簡単にできる、ハンバーガーメニューの作り方をお伝えします。

ハンバーガーメニューとは、スマホサイトの右上によく表示されるハンバーガーのような見た目のアイコンのことです。このアイコンをクリックすると、メニューが表示される仕組みになっています。

スマホのような小さな画面では、掲載できる情報に限りがあるので、スマホサイトでハンバーガーメニューはとてもよく使われます。

ここでは、コピペだけでできるハンバーガーメニューの作り方をお伝えするので、ぜひ活用してくださいね。

■ このようなハンバーガーメニューが完成します！

当サイトのスマホサイトに、ハンバーガーメニューを表示させています。
そのため、完成形のハンバーガーメニューは、下記ページを見てみてください。

・このようなハンバーガーメニューの作り方をお伝えします！

ハンバーガーメニューが右上に表示されますよ。

■ ハンバーガーメニューの仕様について

ここでお伝えするハンバーガーメニューは、パソコンサイトでは表示されないで、スマホサイトで表示される仕様にしています。

パソコンサイトでは、そもそもハンバーガーメニューを表示する必要がないためです。そのため、スマホサイトのみで、ハンバーガーメニューを表示する仕様にしています。

【補足】

このハンバーガーメニューは、「自分で更新できる最短ホームページテンプレート」 にとてもフィットする形で作成しています。そのため、このテンプレートを使っていただくと、より簡単に実現できます。

■ ハンバーガーメニューの作り方の手順

手順１：CSSファイル（style.css）の共通部分に、下記のソースを入れる。

/* ハンバーガーメニュー */
.nav-icon {
    display: none;  /* パソコンではハンバーガーメニューは非表示 */
    width: 40px;  /* ハンバーガーメニューの大きさ */
    padding: 8px 8px;
    background: #fd688f;  /* ハンバーガーメニューの色 */
    transition: .5s ease-in-out;
    border-radius: 3px;
    cursor: pointer;
}

.nav-icon span {
    height: 3px;
    width: 70%;
    background: #ffffff;  /* ハンバーガーメニューの3本線の色 */
    border-radius: 9px;
    opacity: 1;
    left: 15%;
    transition: .25s ease-in-out;
    display: block;
    position: absolute;
}

.nav-icon span:nth-child(1) {
    top: 7px;
}

.nav-icon span:nth-child(2) {
    top: 15px;
}

.nav-icon span:nth-child(3) {
    top: 23px;
}

.nav-icon.open span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
}

.nav-icon.open span:nth-child(2) {
    opacity: 0;
}

.nav-icon.open span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
}

p.nav-text {
    color: #ffffff;
    font-size: 14px;
    margin: 20px 0 0 0;
    text-align: center;
}

.nav-menu .gnavi {
    display: none; /* パソコンとスマホ両方で初期状態はメニューは非表示 */
}

.clearfix:after {
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の共通部分に入れるようにします。

「共通部分」と言われると分かりづらいかもしれませんが、要するに、style.cssファイルに普通に入れれば良いだけです。

手順２：CSSファイル（style.css）のメディアクエリの箇所に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）のメディアクエリの箇所に入れるようにします。

具体的には、「@media screen and (max-width: 768px) {」の中に、上記のソースを入れます。

手順３：HTMLファイルの一番下（</body>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。

ハンバーガーメニューを表示したいページ（HTMLファイル）に、上記のソースを入れます。（基本的には全部のHTMLファイルに入れます）

なお、ソースを入れる場所は、HTMLファイルの一番下（</body>の真上）に入れるようにしてください。

手順４：スマホサイトを確認して、ハンバーガーメニューが表示されることを確認する。

スマホサイトの表示を確認して、右上に「ハンバーガーメニュー」が表示されていることを確認してください。また、ハンバーガーメニューをクリックして、メニューが表示されたら確認作業は完了です。

■ 【カスタマイズ方法】メニューの項目を増やす方法

ハンバーガーメニューの項目を増やすには、HTMLファイルに入れた記述を次のように変更します。

<li><a href="page5.html">コンテンツ５</a></li>

　　　　↓　↓　↓

<li><a href="page5.html">コンテンツ５</a></li>
<li><a href="page6.html">コンテンツ６</a></li>

こうすることで、ハンバーガーメニューの項目を増やすことができます。

なお、すでにある箇所をコピーして貼り付ける（項目を増やす）と、分かりやすいと思いますよ。

■ 【カスタマイズ方法】ハンバーガーメニューのアイコンの色を変更する方法

ハンバーガーメニューのアイコンの色は、CSSファイル（style.css）の共通部分に入れた記述を次のように変更することで、色を変えることができます。

background: #fd688f; /* ハンバーガーメニューの色 */

　　　↓　↓　↓

background: #0000ff; /* ハンバーガーメニューの色 */

「.nav-icon」の中にある「background: #fd688f;」の箇所を、たとえば、「background: #0000ff;」などに変更することで、アイコンの色を変えることができます。

■ 【カスタマイズ方法】メニューの背景色を変更する方法

ハンバーガーメニューのメニューの背景色は、CSSファイル（style.css）のメディアクエリの箇所に入れた記述を次のように変更することで、色を変えることができます。

background-color: #EE9BA4; /* ナビゲーションメニューの背景色 */

　　　↓　↓　↓

background-color: #ff964c; /* ナビゲーションメニューの背景色 */

「.nav-menu」の中にある「background: #EE9BA4;」の箇所を、たとえば、「background: #ff964c;」などに変更することで、メニューの背景色を変えることができます。

■ やり方が分からない場合は？

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

【すぐに解決する】
・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

このページのトップ↑

【よく読まれている関連記事】