Codepenで何か挙げてるやつ

ちょっと頑張ったんであげます

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ってサイトへの埋め込み楽じゃない?すてきだわ~

‘ω’)ノシ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください