Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

年末まで毎日webサイトを作り続ける大学生 〜29日目 ナビバーのスライドイン 自作に失敗する〜

$
0
0

はじめに

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

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

サイトURL

やったこと

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

gif↓
test.gif

ボタンに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時間しか勉強時間を取らなかったのがそもそもの原因で、調子に乗っていたなと反省しております。今回うまくいかなかったことは必ず原因追求して克服します。

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


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>