ちょっと頑張ったんであげます
See the Pen sideFixedMenu by stego-gaogao (@gaotec) on CodePen.
左上に画面追従のメニューを作るやつ
三本線をクリックするとメニューが開き、✕をクリックで閉じる
その他の細かい所
・htmlとcssだけで動く。最近のブラウザで見てね
・開いたメニューの背景は rgba で透過有り
・メニューを開くボタンのマーク切り替えはアニメーションを付けた
・メニューが開いたあとのスクロールバーをcssでシンプルに装飾
・リンクテキストの前のアイコンをcssで作成
・リンクにマウスホバーでアンダーラインが出てくる
・真ん中の無関係なやつがよく回る
ソースをコピペで簡単に動くはず!
「遊び」の部分を使わないときは
<div class=”asobi”>
のhtml、cssを削除して、ついでに最後のpタグも消して使おう
スクロールバーの装飾だけを別に書いてるので、コレだけ欲しい人は下を見てちょうだい
See the Pen スクロールバーの装飾 by stego-gaogao (@gaotec) on CodePen.
スクロールバーの装飾には webkit なるものを使用している
あんまりわかってないけど、webkitが使えないブラウザは装飾されないらしい
いつもと変わらん!という方はブラウザが頑張ってないんです
わたしじゃないよ
以上!(cv.厚切り)
Codepenってサイトへの埋め込み楽じゃない?すてきだわ~
‘ω’)ノシ
コメントを残す