はじめに
こんにちは!@70days_jsです。
先に申し上げておくと、今日はナビバーを横からスライドインさせようとして失敗しました。
1時間あればできると思い、遅い時間から取り組み始めた慢心が原因です。全然できませんでした。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は29日目。(2019/11/16)
よろしくお願いします。
サイトURL
やったこと
やろうとしたこと → ナビバーアイコンをクリックすると、ナビバーのメニューが横からスライドインする
やったこと → ボタンにホバーすると横から微妙な感じでメニューがスライドインしてくる
ボタンにhoverするとメニューが横から出ています。
ご覧の通り文字が潰れていたり、色々残念な感じです・・・。
<body><divclass="button">ボタン</div><div><divclass="test">メニュー1</div><divclass="test">メニュー2</div><divclass="test">メニュー3</div><divclass="test">メニュー4</div><divclass="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:widthcolor;}
実はホバー前も文字自体はすでに出ています。ですが、colorを白にすることでないように見せかけているだけです。
あと、本当はホバーではなくてactiveでクリックされたら表示という風にやりたかったのですが、うまく動いてくれなくて時間オーバーになってしまいました。
感想
不甲斐ないの一言です。1時間しか勉強時間を取らなかったのがそもそもの原因で、調子に乗っていたなと反省しております。今回うまくいかなかったことは必ず原因追求して克服します。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。