Zenn
📖

Javascriptで作るドロワーメニュー(1)

2024/07/27に公開
CSS
HTML
JavaScript
HTML 5
tech

ドロワーメニュー

この記事ではwebサイトでよく使われているドロワーメニューの簡単な作り方について書いていきます。
サンプルコードや画像でわかりやすくまとめていますのでぜひ参考にしてください。

今回作るドロワーメニューのイメージ

開閉前

開閉後

上の画像のように、＜ボタンを押すと左側にあるメニューが開かれるといったものになります。

実際に作ってみる

プログラムを書く前にどのような動作をしているのかを説明をします。
1.buttonが押されるとjavascriptのclickイベントが呼び出される。
2.javascriptにclassにtoggle関数でclassを追加したり消去したりする。
３.cssが追加されたclassを参照して動く。

という順番になっています。
文字に起こすと、工程はそこまで多くなくて簡単です。
 

 

HTML実装

まずは基礎となるhtmlをかいていきます。

index.htlm
    <html>
    <link rel="stylesheet" href="./style.css">
    <body>
        <div class="right-content open">
            <button id="demo"></button>
            <a href=""><div class="">HOME</div></a>
            <a href=""><div class="">COMPANY</div></a>
            <a href=""><div class="">NEWS</div></a>
            <a href=""><div class="">CONTACT</div></a>
        </div>
    </body>
    <script src="./script.js"></script>
    </html>

htmlはこれだけで終わりです。
今書いたプログラムのスタイルを見てみましょう。

このように左上揃えになってしまっているので次にcssを使ってスタイルを整えていきます。

CSS実装

cssはこのようになります。

style.css
html {
    background-color: #666;
    overflow-x: hidden;
}
.right-content button {
    position: absolute;
    top: 0; left: -30;
    background-color: black;
    border: none;
    width: 30px; height: 60px;
    transition: 0.3s;
}
.right-content.open button::after {
    content: '\003e';
    color: white;
}
.right-content button::after {
    content: '\003c';
    color: white;
}
.right-content {
    position: absolute;
    top: 0; right: -160px;
    background-color: black;
    color: white;
    width: 160px; height: 100%;
    transition: 0.5s;
}
.right-content.open {
    right: 0px;
}
.right-content a {
    text-decoration: none;
    color: white;
}
.right-content div {
    padding: 30px;
}

みなくていい人は下のjavascriptまで飛ばしてください。

*一度説明したものは二度目の説明を省きます

html

background-color: #666;
背景色を#666に設定。
overflow-x: hidden;
横側にはみ出したものを消す。

.right-content button

position: absolute;
位置を相対参照にする
top: 0;
位置を上から0pxのところに固定
left: -30；
左側の位置を設定する
border: none;
枠線を消去する
width: 30px;
height: 60px;
高さと横幅設定
transition: 0.3s;
実行時間を0.3秒に設定

.right-content.open button::after

content: '\003e';
utf-8で>を指定
color: white;
文字色を白色に設定

.right-content button::after

content: '\003c';
utf-8で<を指定

.right-content

right: -160px;
ドロワーメニューを枠外に設定する

.right-content.open

right: 0px;
ドロワーメニューを枠内に設定する

.right-content div

padding: 30px;
div内の幅、上下左右30pxづつ開ける

Javascript実装

script.js
document.getElementById('demo').addEventListener('click', function(){
    var right_content = document.querySelector('.right-content');
    right_content.classList.toggle('open');
})

上から順にプログラムの説明をします
document.getElementById('demo').addEventListener('click', function(){}
getelementbyid('demo')でid='demo'のついているボタンを押した時に実行される

var right_content = document.querySelector('.right-content');
right_contentにqueryselectiorで、class='right-content'を持ってくる

right_content.classList.toggle('open');
right_contentのclassにopenを追加する。
toggleは、right_contentにopenがついているとopenを外し、
openがついていないと、openを追加するプログラムです。

最後に

ここまで見てくれてありがとうございます。
これからも様々なプログラムを書いていこうと思っているので、フォローといいねをしてくれると励みになります。

何か質問があれば下の質問箱にお願いします。
https://zenn.dev/leitul/scraps/3124979c888172

Discussion