広告を邪魔しないナビゲーションメニューをアコーディオンを使い横向きに表示する方法

前々からタイトルの下のところにナビゲーションメニューを表示したかったのだけれどカテゴリを挿入してしまうと下にみょんと伸びてしまい広告を他のコンテンツを隠してしまう可能性があったので作成できないままでいた。

そんなこんなで悩んでいたらinputタグと用いたアコーディオンメニューであればページそのものが動くためコンテンツの上に覆い被さってしまう可能性がない事がわかった。

ただ根気よく探してみたもののナビゲーションメニューとして横向きに表示する方法を載せているページが見当たらなく、あったとしても横に開くページがヒットするばかりであったので試行錯誤でまだ完成ではないものの記載しようと思う。

アコーディオンメニュー

アコーディオンメニューとは、Webページなどの表示・操作要素の一つで、選択した項目がその場で広がって詳細な内容を表示する形式のメニューのこと。限られた範囲で多数の項目を一覧でき、かつ詳細な内容を即座に参照できるメニュー形式として利便性が高い。
横長の見出しが縦に並んでおり、そのうちの一つをクリックやタップで選択するとその項目の表示領域が他の項目を押しのけて縦に広がり、詳細な内容が表示される。もう一度その項目を選択すると広がった領域が狭まっていき、元の見出しのみの表示に戻る。
ある項目が開いてるときに他の項目を選択すると、開いていた項目が閉じて、選択した項目が開く。このように途中の部分が伸びたり縮んだりする様子を、楽器のアコーディオンの蛇腹部分になぞらえてアコーディオンメニューと呼んでいる。

アコーディオンメニューとは - IT用語辞典 e-Wordsより引用

いわゆるこんなやつ

この中で特に注目したい箇所が

クリックやタップで選択するとその項目の表示領域が他の項目を押しのけて縦に広がり、詳細な内容が表示される。

である。この表示方法であればページそのものが動くので他のコンテンツを隠してしまう心配がない。

という訳でこれをナビゲーションメニューとして用いれば便利なのでは？と思い作成方法を探してみたものの横並びの状態で下に開くものを解説しているサイトを見つける事ができなかった。

つまりこの様にしたかった

が見当たらなかったので試行錯誤の末何とか完成したので記録を兼ねて掲載

仕組み

とりあえず仕組みを記載する。ソースコードは下にあるので興味がなければそちらまで飛ばしてほしい

開閉動作

クリックしてメニューが開閉する動作はhtmlのlabelとinputタグを用いている。

inputタグのchekboxのtypeを用いることでクリックした時のONとOFFが切り替えることができ、それをCSSで非表示にしている。

非表示を解除すると実際にはこの様になっている

このinputタグの箇所をlabelタグで囲んでクリックによるチェックボックスの動作時の表示を変えている。

<label for="nav_bar1">menu01</label>
<input type="checkbox" id="nav_bar1" class="accordion">

横並び

正直ここが一番難しかった。

一番最初にやってみたのはCSSのfloatこれを使うと要素を指定した値の通りに配置することができるので横並びにする際によく用いられるのだけれど今回のアコーディオンメニューでは横並びにはできなかった。

次に試してみたのは同じくCSSのdisplay:tableで要素をテーブルとして表示するため、こちらも横並びにする際によく用いられているが残念ながらこれも上手く横並びにならなかった。

そこで使ってみたのがFlexboxである。FlexboxはCSSのdisplayプロパティで要素の表示形式指定することができる。

参考になったサイトはこちら

www.webcreatorbox.com

上記のサイトが非常にわかりやすいのでそちらを参考にした方が理解しやすいと思うので答えだけ言えば、displayの値をflexにすることで要素がFlexboxになる。

横並びにしたい要素(今回で言えばlabelとinputの部分とその下にぶら下がっているリンク)の親要素をflexに指定することで子の要素が横並びなる。

<div>
    <label for="nav_bar1">menu01</label>
    <input type="checkbox" id="nav_bar1" class="accordion">
    <ul id="link1">
        <li><a href="">link01</a></li>
        <li><a href="">link02</a></li>
        <li><a href="">link03</a></li>
        <li><a href="">link04</a></li>
    </ul>
</div>

・label
・input
・ulと下のli
を１つの子の要素として<div>で囲いその上の親要素のdisplayをflexにすれば横並びする事ができる。

コード

ソースコードは以下通りとなった。

HTML

   <div class="nav">
        <div>
            <label for="nav_bar1">menu01</label>
            <input type="checkbox" id="nav_bar1" class="accordion">
            <ul id="link1">
                <li><a href="">link01</a></li>
                <li><a href="">link02</a></li>
                <li><a href="">link03</a></li>
                <li><a href="">link04</a></li>
            </ul>
        </div>
        <div>
            <label for="nav_bar2">menu02</label>
            <input type="checkbox" id="nav_bar2" class="accordion">
            <ul id="link2">
                <li><a href="">link01</a></li>
                <li><a href="">link02</a></li>
                <li><a href="">link03</a></li>
                <li><a href="">link04</a></li>
            </ul>
        </div>
    </div>

CSS

.nav {
    display:flex;/*子の要素を横並びにする*/
    justify-content: center;
}
.nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000000;
    line-height: 1;
}
.nav label {
    display: block;
    position: relative;
    margin: 2px 1px 2px 1px;
    padding: 12px;
    line-height: 1;
    color: #ffffff;/*labelの文字色*/
    background: #000000;/*labelの背景色*/
    cursor: pointer;
    width:300px;
}
.nav input {
    display: none;/*chekboxを非表示*/
}
.nav ul {
    margin: 0;
    padding: 0;
    background: #f4f4f4;/*開閉部分の背景色*/
    list-style: none;
}
.nav li {
    max-height: 0;
    overflow-y: hidden;
    transition: all 0.5s;/*開閉時の速度*/
}
/*ulとliのリンクを結びつける.要素の数に応じて変更する*/
#topnav1:checked ~ #link1 li, #topnav2:checked ~ #link2 li {
    max-height: 46px;
    opacity: 1;

}

おそらくこれで上手くナビゲーションバーは作成できると思う。

その他参考にしたサイト

www.htmq.com

copypet.jp

qiita.com

www.webcreatorbox.com