レスポンシブ対応のナビゲーションバーを作った

  • 2018.02.25
  • Web
NO IMAGE

ナビゲーションバー

PCで見やすいタイプ

【コード】

DAFU” data-default-tab=”html” data-slug-hash=”QQVPNr” data-theme-id=”dark” data-height=”265″>See the Pen DAFU/pen/QQVPNr/”>Navbar by DAFU (DAFU“>@DAFU) on CodePen.


スマホで見やすいタイプ
【コード】

DAFU” data-embed-version=”2″ data-pen-title=”Navbar for SP”>See the Pen DAFU/pen/YeOMxp/”>Navbar for SP by DAFU (DAFU“>@DAFU) on CodePen.

両方を使用してレスポンシブデザインとした例
(このページの幅が狭くてレスポンシブデザインなのが分からないのが悲しい)

DAFU” data-default-tab=”html,result” data-slug-hash=”oEPOex” data-theme-id=”0″ data-height=”350″>See the Pen DAFU/pen/oEPOex/”>Navbar by DAFU (DAFU“>@DAFU) on CodePen.

レスポンシブなのがよくわかるgifアニメ
navbar