yk_acのブックマーク / 2021年4月20日

yk_ac id:yk_ac

2021年4月20日のブックマーク (3件)

CSSで作るドロップダウンメニュー | ゆんつてっく
WEBサイトにを見ているとグローバルナビゲーションにマウスカーソルを乗せるとニューっとサブメニューが現れる「ドロップダウンメニュー」というのを見かけることがあります。ドロップダウンメニューを一見すると何か複雑な仕掛けがありそうな気がしますが、実は割と簡単にCSSだけで実装することが出来ます。今日はCSSを使ってロップダウンメニューを作りたいと思います。基本的なドロップダウンメニューとても基本的なドロップダウンメニューを作成したいと思います。作成するサブメニューは初期状態では隠しておくマウスカーソルがメインメニューの上に乗ったらサブメニューが現れるようにするサブメニューの開始位置はメインメニューの直下というものです。 <body>  <nav id="header-nav"> <ul class="header-list"> <li
yk_ac 2021/04/20
ドロップダウンメニュ

css
リンク
CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ
ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーションエフェクトまとめ 01. 文字を上からスライド表示 See the Pen #1226 – Horizontal menu with slide down on hover by LittleSnippets.net (@littlesnippets) on CodePen. マウスホバーすることで、上からスライドするアニメーションエフェクト。 02. 文字を下からスライド表示 See the P
yk_ac 2021/04/20
アニメーション

css

hover
リンク
[簡単]コピペするだけ！ナビゲーションホバーエフェクト - Qiita
自分のメモも含めて、最近よく見かけるナビゲーションのホバーエフェクトをまとめてみました。 css：DEMO scss：DEMO cssのみで記述されたシンプルなものになります。 scssでも実装してみましたが、今回は初心者の方向けにCSSで記述したもので解説していきます！共通HTML・CSS HTML <nav class="type1"> <ul class="type1-menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> 通常のナビゲーションをマークアップします。 CSSをいじる前に… リセットCSSを設置！ Chrome・IEなどのブラウザによって
yk_ac 2021/04/20
hover

css
リンク
- 2021年4月22日
- 2021年4月20日
- 2021年4月19日