はじめに

こんにちは！@70days_jsです。
先に申し上げておくと、今日はナビバーを横からスライドインさせようとして失敗しました。
1時間あればできると思い、遅い時間から取り組み始めた慢心が原因です。全然できませんでした。

扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は29日目。(2019/11/16)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day29.html

やったこと

やろうとしたこと →　ナビバーアイコンをクリックすると、ナビバーのメニューが横からスライドインする
やったこと →　ボタンにホバーすると横から微妙な感じでメニューがスライドインしてくる

gif↓

ボタンにhoverするとメニューが横から出ています。
ご覧の通り文字が潰れていたり、色々残念な感じです・・・。

<body>
    <div class="button">ボタン</div>
    <div>
        <div class="test">メニュー1</div>
        <div class="test">メニュー2</div>
        <div class="test">メニュー3</div>
        <div class="test">メニュー4</div>
        <div class="test">メニュー5</div>
    </div>
</body>

.button:hover + div > .test {
    width:  7rem;
    color: white;
}


.test {
    width:  0px;
    height: 2rem;
    color: white;
    background-color: rgba(0, 0, 0, .8);
    transition-duration: .5s;
    transition-timing-function: ease;
    transition-property: width color;
}

実はホバー前も文字自体はすでに出ています。ですが、colorを白にすることでないように見せかけているだけです。
あと、本当はホバーではなくてactiveでクリックされたら表示という風にやりたかったのですが、うまく動いてくれなくて時間オーバーになってしまいました。

感想

不甲斐ないの一言です。1時間しか勉強時間を取らなかったのがそもそもの原因で、調子に乗っていたなと反省しております。今回うまくいかなかったことは必ず原因追求して克服します。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。