Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@lucas07-jp

【コピペで使える!】HTML・CSSだけでハンバーガーメニューの作り方

プレビュー

まず、今回制作するハンバーガーメニューの完成プレビューは以下のようなものになります。
現在、僕が運用しているサイト L's (https://osaru.site/) でも使用しています。
レスポンシブ対応もしていますので、ぜひ使ってみてください!

表示していないとき 表示しているとき
close.png open.png

手順

今回は以下のサイト構成だと仮定して説明していきます。

サイト構成
/index.html
/inquiry
  |  /index.html
/contents
  |  /index.html

あらかじめメニューに表示したいページを把握しておくと制作しやすいと思います。

手順1

以下のコードを入力しましょう。
メニューコンテンツなのでheaderタグ内に入れると良いと思います。

index.html
<div id="menu">
    <input type="checkbox" id="menu-btn-check">
    <label for="menu-btn-check" id="menu-btn"><span></span></label>
    <div id="menu-content">
        <ul>
            <li><p>サイトメニュー</p></li>
            <li><a href="index.html">TOP</a></li>
            <li><a href="inquiry/">お問い合わせ</a></li>
            <li><a href="contents/">コンテンツ</a></li>
            <li><p>外部リンク</p></li>
            <li><a href="https://twitter.com/">Twitter</a></li>
            <li><a href="https://facebook.com">Facebook</a></li>
        </ul>
    </div>
</div>

解説


<div id="menu">

"menu"というブロックを追加してCSSでスタイルを調整しやすくしています。
PCでは違うメニューを表示したいという方などはidを"pc-menu"にし、スマートフォン向け(ハンバーガーメニュー)のidを"sp-menu"というようにしてあげるとよいと思います。

<input type="checkbox" id="menu-btn-check">

メニューを開いている、もしくは閉じている状態を管理するものです。
この要素は後程CSSで非表示にします。

<label for="menu-btn-check" id="menu-btn">

状態を管理する要素と連携しています。
この要素をクリックすることで状態を管理する要素をクリックしたことになります。

手順2

以下のコードを入力しましょう。

style.css
#menu-btn {
    position: fixed;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(242, 234, 211, 0.75);
    border: 1px solid rgba(46, 15, 13, 1);
    border-radius: 25%;
}
#menu-btn span,
#menu-btn span::before,
#menu-btn span::after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: rgba(46, 15, 13, 1);
    position: absolute;
    transition: all 0.5s;
}
#menu-btn span::before {
    bottom: 8px;
}
#menu-btn span::after {
    top: 8px;
}
#menu-btn-check:checked ~ #menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ #menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ #menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check:checked ~ #menu-content {
    left: 0;
}
#menu-btn-check {
    display: none;
}
#menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: rgba(242, 234, 211, 0.95);
    transition: all 0.5s;
    border-left: 2.5px solid rgba(46, 15, 13, 1);
}
#menu-content ul {
    padding: 70px 10px 0;
}
#menu-content ul li {
    border-bottom: solid 1px rgba(46, 15, 13, 1);
    list-style: none;
}
#menu-content ul li p {
    display: block;
    font-weight: bold;
    width: 100%;
    font-size: 125%;
    box-sizing: border-box;
    color: rgba(46, 15, 13, 1);
    text-decoration: none;
    padding: 40px 25px 10px 10px;
    position: relative;
}
#menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 100%;
    box-sizing: border-box;
    color: rgba(46, 15, 13, 1);
    text-decoration: none;
    padding: 15px 25px 10px 10px;
    position: relative;
}
#menu-content ul li a::before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: solid 2px rgba(46, 15, 13, 1);
    border-right: solid 2px rgba(46, 15, 13, 1);
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

解説


Q.それぞれの要素の色を変更したい。

それぞれの要素に"rgba(x, x, x, x)"が入力されています。
そこを変更することで色を変更することができます。

完成

これで完成です!

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
lucas07-jp
Webエンジニアになりたい現役高校生。 全て独学でプログラミングしてます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?