アプリ魂

はじめてのプログラミング生活

【136日目】コーポレートサイト風のシングルページとハンバーガーメニューをCSSで作ってみた

f:id:seitokaii:20170206124033p:plain

@appdamacyですペコリ(o_ _)o))

今回は1ページだけのシンプルな
コーポレートサイト(風)を作ってみました!

f:id:seitokaii:20170206100335p:plain

GitHubに全てのコードを置いています

これまではアイコンフォント
ハンバーガーメニューを表示してたけど
たったひとつのために読み込むのは
無駄なのでCSSだけで自作しました(ノ△・。)

f:id:seitokaii:20170206123650g:plain

コードはとっても簡単です

ポイントはこれだけ

  • 横線に見えるブロックを3つ縦に並べる
  • 上と下の横線を45度ずつ回転させる
  • 真ん中の横線を消す

これでハンバーガーメニューがバッテンに見えるようになりました(^^)

いまは押したあとページの上に表示されるナビゲーションメニューを制作中なので追って更新したいと思います(=ω=;)

2016 APPDAMACY