はじめに
こんにちは！@70days_jsです。
先に申し上げておくと、今日はナビバーを横からスライドインさせようとして失敗しました。
1時間あればできると思い、遅い時間から取り組み始めた慢心が原因です。全然できませんでした。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は29日目。(2019/11/16)
よろしくお願いします。
サイトURL
やったこと
やろうとしたこと → ナビバーアイコンをクリックすると、ナビバーのメニューが横からスライドインする
やったこと → ボタンにホバーすると横から微妙な感じでメニューがスライドインしてくる
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時間しか勉強時間を取らなかったのがそもそもの原因で、調子に乗っていたなと反省しております。今回うまくいかなかったことは必ず原因追求して克服します。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。