なぜか斜めに出てくるメニューを5秒で解決する（多分）

2022年9月26日

結論から書くと、多分ほとんどの原因は余白。とりあえず、CSSでメニューの余白を

margin = 0;
padding = 0;

で消してみれば、ほとんどのメニューは斜めに出てこなくなるはず。

でも余白なしのメニューじゃ困るんですけど……、と思った方も、以下の詳細を見ていただくと解決できる（多分）のでご安心を。

具体的な例で見ていく。

斜めに出てくるメニュー

サンプル（斜めに出てくるメニュー）

↓これ。押すと、メニューは下に伸びるのに、中身は右斜め下に出てくる感じが美しくない。

ドロップダウン（Dropdown）、アコーディオン（Accordion）、ハンバーガー（Hamburger）など、種類によって細かい違いはあるものの、ニュッと出てくる系のメニューを適当に作るとこんな感じになる。

コード（斜めに出てくるメニュー）

コードは以下の通り。
button要素を押すと、ul要素に class="open" が追加/削除されて表示が切り替わる簡単な仕組み。

HTML

何の変哲もないHTML.

<div id="sugokunai" class="menu">
    <button class="button">すごくないメニュー</button>
    <ul class="list">
        <li>なんか斜めに出てこない？</li>
        <li>なんか斜めに出てこない？</li>
        <li>なんか斜めに出てこない？</li>
        <li>なんか斜めに出てこない？</li>
        <li>なんか斜めに出てこない？</li>
    </ul>
</div>

CSS

何の変哲もないCSS.
heightの値の変更で表示と非表示を切り替える。（overflow: hidden; を忘れると、メニューの中身が無惨にはみ出たままになるぞ。）

/* 高さと余白を0にして、要素を見えないようにする。 */
#sugokunai .list {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 要素からはみ出る中身も表示しない。 */
    transition: .3s ease-out;
}

/* 高さと余白を設定して要素を表示。 */
#sugokunai .list.open {
    height: auto;
    padding: 20px;
}

.menu {
    width: 280px;
    margin: 20px;
}
.menu > * {
    box-sizing: border-box;
    background: #F4F9FB;
    border: 1px solid #4C85BA;
    color: #4C85BA;
}
.button {
    width: 100%;
    padding: 10px;
}
li {
    list-style: decimal inside;
}

JavaScript

↓本題とは関係ないが、今回クラス名 "open" の付け外しのために書いたコード。見ても見なくてもよいもの。

window.addEventListener ('load', function() {

    const isOpen = function(element) {
        return element.classList.contains('open');
    }

    const toggleElemnt = function(element, isOpen) {
        if (!isOpen) {
            element.classList.add('open');
        } else {
            element.classList.remove('open');
        }
    }

    const buttons = document.getElementsByClassName('button');
    for (let i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener('click', function() {
            const target = this.nextElementSibling;
            const isTargetOpen = isOpen(target);
            toggleElemnt(this, isTargetOpen);
            toggleElemnt(target, isTargetOpen);
        });
    }

});

まっすぐ出てくるメニュー

サンプル

↓続いて斜めにならないサンプル。押すと中身もまっすぐ下に出てくるはず。

コード

こちらのコードは以下の通り。
変更したのは主にCSSのpaddingのみ。HTMLとJavaScriptは基本的に同じ。

HTML

先程と同じ構造だが、divのid名などを変更したため一応貼っておく。（JavaScriptは完全に同じなので割愛。）

<div id="sugoi" class="menu">
    <button class="button">すごいメニュー</button>
    <ul class="list">
        <li>まっすぐ出てくるゴイスー</li>
        <li>まっすぐ出てくるゴイスー</li>
        <li>まっすぐ出てくるゴイスー</li>
        <li>まっすぐ出てくるゴイスー</li>
        <li>まっすぐ出てくるゴイスー</li>
    </ul>
</div>

CSS

↓6行目の、padding: 0 20px; で、元から横の余白を持った状態にした。これだけで斜めに出てこなくなる。

/* 高さと余白を0にして、要素を見えないようにする。 */
#sugoi .list {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0 20px; /* ※元から横の余白を設定しておくと、斜めに出てこない。 */
    overflow: hidden; /* 要素からはみ出る中身も表示しない。 */
    transition: .3s ease-out;
}

/* 高さと余白を設定して要素を表示。 */
#sugoi .list.open {
    height: auto;
    padding: 20px;
}

.menu {
    width: 280px;
    margin: 20px;
}
.menu > * {
    box-sizing: border-box;
    background: #F4F9FB;
    border: 1px solid #4C85BA;
    color: #4C85BA;
}
.button {
    width: 100%;
    padding: 10px;
}
li {
    list-style: decimal inside;
}

メニューが縦に伸びる時に、横の余白も0→20pxに伸びるようにしてしまうと、斜めに出てくる。